02 / Foundations

Iconography

Lexicon ships with Unicons. One stroke weight, predictable sizes, MIT-licensed.

Library

Unicons (Iconscout). Imported via @iconscout/react-unicons. Naming convention: UilArrowUp, UilCheck, UilUserCircle. Sports UI components use a separate icon set, documented when that section publishes.

Sizes

Standard pixel sizes: 12, 14, 16, 20, 24. Match icon size to surrounding text size.

text-sm → 14px icon
text-md → 16px icon
text-lg → 20px icon

Colour

Icons inherit currentColor by default. Pair with --color-text-2 for body context, --color-text-muted for secondary, --color-accent for action affordance.

When to use icons

Accompany text labels for repeated controls (toolbars, menu items). Avoid icon-only buttons except for universally-recognised actions — close, back.