A custom icon set designed to match the visual weight of DM Sans. All icons are outlined strokes on a 24×24 grid with 1.5px stroke weight — no fills. They scale cleanly at 16px, 20px, and 24px.
Specifications
Grid size
24 × 24pxStroke weight
1.5pxLine cap
roundLine join
roundFill style
Stroke-only (outline)Optical sizes
16px · 20px · 24pxOptical sizing, not scaling
Use icons at 16px, 20px, or 24px only. These are the three sizes they were designed for. Arbitrary sizes produce blurry renders and mismatched stroke weight.
Color via currentColor
Icons inherit color from the parent's text-color token. Never set fill or stroke directly — let the design token cascade handle it.
Always pair with a label
Don't use an icon alone for an action unless it's universally recognized (close, search). Always add a visible label or aria-label for accessibility.
Size scale
Consistent sizing
Use icons at 16px, 20px, or 24px only. These are the optical sizes they were designed for. Avoid arbitrary sizes.
Color via text color
Icons inherit color via currentColor. Don't set a fill or stroke color directly — use the text color token on the parent element.
Always pair with a label
Don't use an icon alone for an action unless it's universally recognized (close, back, search). Always add a visible label or aria-label.
Weight matching
Icons at 16px pair with Label or Caption text. Icons at 20–24px pair with Body or Button text. Match visual weight.
No arbitrary rotation
Icons are designed for a specific orientation. Don't rotate unless the icon has an explicit direction variant.
Optical alignment
When placing an icon next to text, use a 2–4px gap (Scale.1–Scale.2) and align to the text baseline, not the center of the text block.