COMPONENT

Icon

This library ships no icons at all — no sprite, no assets, no dependency. Which pictures your site uses is your decision. What you get here is the contract an icon obeys once it arrives.

Four sizes

One rung apart, all four filled with currentColor. Two-tone is the specimen below, because its second colour belongs to the container rather than to the icon.

HTML

<svg class="icon icon-xl" viewBox="0 0 40 40" aria-hidden="true" stroke-width="2">
  <path d="M6 26 L14 26 L14 34 L6 34 Z"></path>
  <path d="M14 18 L26 18 L26 34 L14 34 Z"></path>
  <path d="M26 10 L34 10 L34 34 L26 34 Z"></path>
</svg>
<svg class="icon icon-lg" viewBox="0 0 24 24" aria-hidden="true">
  <circle cx="12" cy="12" r="9"></circle>
</svg>
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
  <rect x="4" y="4" width="16" height="16"></rect>
</svg>
<svg class="icon icon-sm" viewBox="0 0 24 24" role="img" aria-label="A named icon">
  <rect x="6" y="6" width="12" height="12"></rect>
</svg>

Two-tone on two grounds

Both squares are the same icon. Each sits in a container that sets --icon-bg to its own surface, so the bar through the middle is the ground showing rather than a painted line.

HTML

<div class="icon-on-raised" style="background:var(--ds-raised); padding:22px 26px; color:var(--ds-accent)">
  <svg class="icon icon-duo icon-lg" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2">
    <rect x="4" y="4" width="16" height="16"></rect>
    <path d="M4 12 L20 12"></path>
  </svg>
</div>
<div class="icon-on-cream" style="background:var(--ds-cream); padding:22px 26px; color:var(--ds-ink-on-cream)">
  <svg class="icon icon-duo icon-lg" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2">
    <rect x="4" y="4" width="16" height="16"></rect>
    <path d="M4 12 L20 12"></path>
  </svg>
</div>

Reference

Read from components/icon.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.icon.icon-duo.icon-sm.icon-lg.icon-xl.icon-on-sunk.icon-on-raised.icon-on-cream

SETTINGSSet the first on one element; a theme sets the second for all of them.--icon-bg — falls back to --ds-ground

READS--ds-cream--ds-icon--ds-icon-lg--ds-icon-sm--ds-icon-xl--ds-raised--ds-sunk

Notes

TWO RULES, AND BOTH ARE THE SAME RULE

An icon takes its colour from currentColor. An SVG with a hardcoded fill is a component that has opted out of the theme — the same failure as a hardcoded colour in CSS, only harder to grep for. Strip fill and stroke from the asset and let it inherit.

A two-tone icon reads its second colour from --icon-bg, which must be the surface the icon sits on — an icon filled with the wrong ground looks like a hole. Set it on the container with .icon-on-sunk and a whole card of icons is right at once.

LABELLING

An icon beside a label is decorative and wants aria-hidden="true". An icon that is the only content of a control needs role="img" and an aria-label. The CSS cannot know which, so the caller must choose — and the choice is not optional.

WHAT THIS REFERENCE CHOSE, AS AN EXAMPLE OF CHOOSING

The library ships none, so this site had to pick some: every icon in the left rail is Lucide, read at build time and inlined once per page as a sprite. They arrive already drawn in currentColor with no fill of their own, which is the contract above, and that is most of why they were the easy choice.

None of it is in the package. It is a build-time dependency of this site and nothing else, which is exactly the arrangement this component describes — the system states how an icon behaves, and the site decides which pictures. Lucide is ISC; the notice travels in book/src/icons/.