# Icons 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 ```dh-specs Grid size | 24 × 24px Stroke weight | 1.5px Line cap | round Line join | round Fill style | Stroke-only (outline) Optical sizes | 16px · 20px · 24px ``` ```dh-principles #006aff | Optical 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. #189f60 | 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. #820ad1 | 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
16pxCompact / inline
20pxDefault
24pxLarge / hero
Identity6 icons
Camera
Face Capture
ID Card
Shield
User Verified
Search Check
People3 icons
User
Users
Genuine User
Actions4 icons
Lock
Check Circle
Warning
Star
Communication4 icons
Mobile
Email
Chat
Clock
System3 icons
Layers
AI Stars
Rocket
 Use icons at 16px, 20px, or 24px only. These are the optical sizes they were designed for. Avoid arbitrary sizes. Icons inherit color via currentColor. Don't set a fill or stroke color directly — use the text color token on the parent element. 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. Icons at 16px pair with Label or Caption text. Icons at 20–24px pair with Body or Button text. Match visual weight. Icons are designed for a specific orientation. Don't rotate unless the icon has an explicit direction variant. 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.