FoundationsIconography
Lucide, set at 1.5 stroke, in two tones.
Icons are drawn in 1.5 px stroke, in a muted or emphasis tone, and at one of five sizes. The library is Lucide — not because it's the best, but because it is consistent, well-aligned, and shipped via lucide-react.
The library
Lucide is the only icon library in the system. It is imported aslucide-react and wrapped by SiteIcon incomponents/site-icon.tsx. The wrapper enforces the 1.5 stroke, the size scale, and the tone system — every icon in the codebase goes through it.
import { ArrowRight } from "lucide-react"
import SiteIcon from "@/components/site-icon"
<button>
Read more <SiteIcon icon={ArrowRight} size="sm" />
</button>The five sizes
| Size | Use |
|---|---|
| xs (12 px) | Inline with body text, in tight UI |
| sm (16 px) | Default icon size for UI affordances |
| md (20 px) | Icon buttons, callouts |
| lg (24 px) | Section icons, headers |
| xl (32 px) | Feature icons, marketing |
The public icon set
Every icon in active use across the site, as of v1.0.
Four icon rules
| Rule | Why |
|---|---|
| 1.5 stroke, never 1 or 2 | The 1.5 stroke is the same on a 12 px and a 32 px icon; it doesn't get thicker as the icon gets bigger, so the visual weight stays consistent across the system. |
| Tone, not color | Icons are never filled with a hex. They use tone (muted, default, emphasis) so the icon follows the text and never breaks out of the typographic hierarchy. |
| Aligned to baseline, not centered | An icon sitting next to a label is vertically aligned to the x-height of the text, not to the center of the row. The difference is what makes an icon look like part of the text. |
| aria-hidden unless load-bearing | An icon is decorative by default. The label next to it is the accessible name. The only time the icon is announced is when it is the only thing in the button or link. |
Icons in context
The most common patterns: in a button, in a callout, in a link, in a table.
Callout title
The icon sits to the left, in muted tone, at md size.
Why Lucide
Lucide is a fork of Feather, expanded with a much larger set of glyphs and an active maintainer. It is the most consistent open-source icon set available: same x-height, same stroke width, same terminal ends. That consistency is what makes it possible to use it without the wrapper feeling restrictive.