Sample set — Heroicons outline at the default size
A representative slice of the icon library at the canonical 24-px stroke-1.5 weight. Heroicons is the single icon system across the site + dashboard; no custom glyphs unless explicitly registered.
Icon sizes — four steps, no in-betweens
The four pixel sizes the system reaches for, by placement. Stick to these; arbitrary sizes start to read as inconsistent across surfaces.
- 16: inline glyphs in text.
- 20: button leading icons, form-field affixes.
- 24: default (nav, list items).
- 32 / 40: feature tiles, icon chips.
How to apply icons — outline first, currentColor always
Three rules behind how icons sit in the system. Following them keeps icons feeling like part of the typography rather than imported decoration.
- Use outline by default. Solid only when paired with a tinted chip.
- Icon chips sit on
--brand-blue-softwith the icon in--accent-link. - Icons inherit
currentColor- never hard-code the fill.