Icons
Icons are inline stroke SVGs, not an icon font.
Icons are inline stroke SVGs. The spec: fill:none · stroke:currentColor · stroke-width:1.5 · linecap/linejoin:round, with colour always inherited from the parent's semantic text token — an icon that ships its own hard-coded colour is an icon that will be wrong in the next state. No icon font: it is an external dependency, and when it fails to load every icon-only button becomes an empty square. Icons appear too often to gamble on an external dependency.
Four hit-area steps, with the glyph following along
The 20px step is below the accessibility minimum and may only be used when the same action is also reachable through a target that does meet 24px. Note that the step names collide with control heights but not with their values: a mini control is 24px tall, while a mini icon button is 20px square.
Three kinds of icon, three obligations
| Type | Obligation | Why |
|---|---|---|
| Decorative | aria-hidden="true" | It sits next to its own text label, and would otherwise be announced twice |
| Interactive | aria-label | Describe the action rather than the picture: 「New seed」, not 「Dice」 |
| Indicative | Screen-reader text | Icons like status dots, where neither the colour nor the shape carries meaning on its own |
Directional icons — arrows, chevrons, back and forward, indent, undo — need a class that lets RTL flip them. Clocks, checkmarks, play buttons, logos and charts with a time axis must never flip. Up/down arrows never need flipping, so prefer them whenever you have the choice.