Icons
An icon is a glyph in the sentence. It should take its weight, its size and its colour from the words next to it.
Stroke follows the label: about 1.5px beside regular text at 14–16px, 2px beside medium or semibold, 2.5px beside bold or standing alone. One optical strategy per surface; never two libraries with different stroke conventions on one toolbar. Size inline icons at one to one-and-a-quarter em so the pair scales together.
One SVG per icon, drawn in `currentColor`, with every state as CSS. Outline is the default state and fill is the active one, and the swap between them is a cross-fade: opacity, scale from a quarter, and four pixels of blur, at 300ms with no bounce.
- Design at render size; test every icon at 16px
- Native grid sizes (16, 20, 24), never fractional scaling
- Flip directional icons under RTL; leave the rest alone