Icons
Icon sizing, stroke, alignment, and RTL mirroring.
Sizing
Icons inherit size from their container via [&_svg]:size-*, never the other way round. One stroke width across the set.
size-3.5
size-4
size-5
size-6
size-8
Mirroring
Directional glyphs flip under RTL. Everything else must not — flip the toggle above to see it.
Mirror these
Arrows, chevrons, trend lines, undo/redo, text alignment — anything whose meaning depends on which way it points.
Never mirror these
🕐✓🔍
Clocks, checkmarks, logos, magnifiers, media play buttons, and any glyph containing numerals or letters.
Accessibility
- Decorative icons beside text are aria-hidden — the text already carries the meaning.
- Icon-only controls need an aria-label describing the action, not the glyph. 'Delete workout', not 'trash icon'.
- Never encode meaning in an icon alone where the action is destructive or irreversible.