01Icon Grid
16pxInline, tight spaces
24pxDefault / UI
32pxCards, emphasis
48pxHero, feature
Check
Close
Plus
Minus
Chevron R
Chevron L
Chevron D
Arrow R
Search
Sun
Grid
Moon
02Usage Rules
01
Always use 2px stroke width at all sizes.Maintains visual consistency across the scale.
02
Round caps and round joins only.stroke-linecap: round; stroke-linejoin: round;
03
24px viewBox as canonical base.Scale up/down from 24x24 viewBox.
04
Stroke only, no fills.Icons are outline-based. Use fill: none.
05
Use currentColor for inheritance.Icons inherit color from parent text color.
06
Minimum touch target: 44x44px.Icons smaller than 24px need padding for accessibility.
03Color Variants
Default / Creamvar(--cream)
Brand / Limevar(--lime)
Muted / Dimvar(--dim)
Error / Destructivevar(--error)
Info / Bluevar(--blue)
Warning / Flarevar(--flare)