Iconography Guide
Icon Style Types
Line (Outline)
☆
♡
□
Clean, lightweight feel. Common in nav bars. Works well at small sizes with consistent stroke weight.
Fill (Solid)
★
♥
■
Bold, high contrast. Better for active/selected states. More readable at very small sizes.
Duotone / Two-tone
◈
⊕
⊗
Primary + lighter opacity layer. Adds depth while staying clean. Good for illustrations and dashboards.
Flat / Filled Color
★
♥
■
Used for category icons, app icons, marketing. Full color, no outlines.
Icon Sizing Grid
| Size | Canvas | Stroke Weight | Use Case |
|---|---|---|---|
| 16px | 16×16 | 1px | Inline text icons, table cells |
| 20px | 20×20 | 1.5px | Compact navigation, buttons |
| 24px | 24×24 | 1.5–2px | Standard navigation, most common |
| 32px | 32×32 | 2px | Feature icons, section headers |
| 48px | 48×48 | 2–2.5px | App icons, hero sections |
Icon Library Comparison
| Library | Count | Style | License |
|---|---|---|---|
| Heroicons | 292 | Line + Solid | MIT |
| Lucide | 1400+ | Line | ISC |
| Phosphor Icons | 9000+ | 6 weights | MIT |
| Material Symbols | 3000+ | Variable font | Apache 2.0 |
| Tabler Icons | 5000+ | Line | MIT |
| Font Awesome | 2000+ free | Solid + Brand | Free / Pro |
Pixel-Perfect Tips
- 🎯 Design on even-number grids (24px not 23px) to prevent sub-pixel blurring
- 🎯 Align paths to pixel grid — avoid decimal coordinates
- 🎯 Use consistent stroke weight across all icons in a set
- 🎯 Round line caps and joins for friendly feel, square for technical
- 🎯 Export SVG with viewBox="0 0 24 24" for scalability