Icons

Puppertino does not ship its own icon set. Apple’s SF Symbols is the icon system that pairs with the Human Interface Guidelines, but Apple does not license SF Symbols for web use.

Instead, we recommend pairing Puppertino with Phosphor Icons. Phosphor is the closest open-source match to SF Symbols in spirit and execution.

Why Phosphor

Apple’s SF Symbols has three properties that make it work so well in iOS and macOS:

• Multiple weights that match the text weight they sit next to
• Optical alignment with the system font at every size
• Consistent stroke design across thousands of symbols

Phosphor matches all three.

The six weights map cleanly to the most useful SF Symbols weights. Use Regular for body content, Bold for headings and prominent UI, and Fill for selected states.

Install

Pick the integration that fits your stack.

Via CDN

The fastest setup. Drop a single <link> in your <head>. Pick the weight you need.

<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.2/src/regular/style.css">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.2/src/bold/style.css">

Then use the icon classes anywhere in your markup.

<i class="ph ph-house"></i>
<i class="ph-bold ph-gear"></i>

Via npm

If you have a build step, install the package and import the weights you use.

npm install @phosphor-icons/web

import '@phosphor-icons/web/regular'
import '@phosphor-icons/web/bold'

The full list of available icons lives at phosphoricons.com.

A sample set

Here is a small selection of Phosphor’s bold weight rendered next to Puppertino’s typography. They sit comfortably alongside the type system without competing with it.

Sizing and alignment

Phosphor icons inherit font-size from their parent, so they scale with the surrounding text. To match Apple’s icon-with-text alignment, set the icon to roughly 1.2x the text size and align it to the baseline.

<p style="font-size: 17px;">
  <i class="ph-bold ph-house" style="font-size: 20px; vertical-align: -0.15em;"></i>
  Home
</p>

For standalone icons inside buttons, size them to match the line-height of the button text.

<button class="p-btn p-prim-col">
  <i class="ph-bold ph-arrow-right" style="font-size: 17px;"></i>
  Continue
</button>

Color

Phosphor icons inherit color from their parent through currentColor, so any text color you set on the parent applies to the icon.

<p class="p-sys-blue-color">
  <i class="ph-bold ph-info"></i>
  Information
</p>

To use a system color directly:

<i class="ph-bold ph-warning" style="color: var(--p-sys-orange);"></i>
<i class="ph-bold ph-x-circle" style="color: var(--p-sys-red);"></i>
<i class="ph-bold ph-check-circle" style="color: var(--p-sys-green);"></i>

Weights for state

Apple uses different SF Symbols weights for selected and unselected states. Phosphor lets you do the same.

<!-- Unselected -->
<i class="ph ph-heart"></i>

<!-- Selected -->
<i class="ph-fill ph-heart" style="color: var(--p-sys-red);"></i>

This pattern works well for tab bars, toolbar buttons, and any interactive element with an active state.

Other options

If Phosphor is not the right fit, two other open-source libraries pair well with Puppertino.

• Lucide is a fork of Feather Icons. 1,500+ icons, 24px grid, 2px stroke, MIT license. The aesthetic is closer to SF Symbols’ outline weight specifically.
• Heroicons by the Tailwind team. 300+ icons in three styles (outline, solid, mini). Smaller set, very high quality.

Both render as inline SVGs rather than icon fonts, which gives you more control but requires more setup per icon.