73Chip

The icon tile that fronts a feature row or an empty state. The fill and its hairline are color-mixed from one hue at two strengths, so they are provably the same colour — no second token, no soft glow.

Use it for

Leading a feature row, a benefit list or an empty state
Where an icon needs weight without becoming a button

Not for

As a button — it has no action and no focus state. Use an icon Button
Carrying meaning alone — the icon decorates the text beside it

Sizes

Three fixed steps. The glyph scales from the tile, so the ratio holds at every size.

markup

<span class="ns-chip ns-chip--sm"><i class="ph ph-code" aria-hidden="true"></i></span>
<span class="ns-chip"><i class="ph ph-lightning" aria-hidden="true"></i></span>
<span class="ns-chip ns-chip--lg"><i class="ph ph-graduation-cap" aria-hidden="true"></i></span>

Accent

markup

<span class="ns-chip"><i class="ph ph-cube" aria-hidden="true"></i></span>
<span class="ns-chip ns-chip--accent"><i class="ph ph-sparkle" aria-hidden="true"></i></span>

Accessibility contract

The icon is aria-hidden: the adjacent heading is the real label
Never the only way to tell two rows apart