Iconography
Iconography
Section titled “Iconography”Icons provide visual cues, reduce cognitive load, and support text content. Our system is built on a consistent grid and stroke style.
Icon Sizes
Section titled “Icon Sizes”Size tokens
| Token | Size | Usage |
|---|---|---|
--icon-xs | 12px | Badges, inline icons |
--icon-sm | 16px | UI controls, links |
--icon-md | 20px | Navigation, buttons |
--icon-lg | 24px | Feature icons |
--icon-xl | 32px | Hero sections |
--icon-2xl | 48px | Empty states |
Icon Style
Section titled “Icon Style”- Stroke width: 2px for most icons, 1.5px for smaller sizes (12–14px)
- Corner radius: 2px — slightly rounded, not circular
- Fill: outline style by default, filled variant for active states
- Alignment: centered optically, not geometrically
Usage Guidelines
Section titled “Usage Guidelines”- Always pair icons with text labels in navigation and buttons
- Same icon size for sibling elements
- Don’t mix filled and outline styles in the same context
- Icons should be decorative or descriptive — never the sole indicator of meaning
- Use
currentColorfor icon fill/stroke to inherit text color