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