Foundations / Iconography
Lucide. Outline only. 1.5px. Always currentColor.
Icons are typography-adjacent. They inherit color, sit at aligned baselines, and come from one source — Lucide. 1.5px stroke. MIT-licensed. Mixed libraries are forbidden.
Size scale — exactly four values
14px
16px
20px
24px
14 inline with body, 16 default UI, 20 sidebar nav and section headers, 24 empty-states and modal title icons. No 18, no 22, no 32 — scale breaks consistency.
Color rule: always currentColor. Never hardcode an icon color. Theme-switching, status colors, and hover states flow through automatically.
Default icon set
LayoutDashboard
FileText
CheckSquare
BarChart3
Users
Settings
Bell
Search
Plus
X
ChevronDown
ChevronUp
ChevronLeft
ChevronRight
AlertTriangle
AlertCircle
CheckCircle
Info
Edit3
Trash2
ExternalLink
LogOut
Calendar
Clock
Mail
Phone
MapPin
Filter
Download
Upload
Forbidden
- Emoji as icons
- Mixing libraries (no Heroicons + Lucide + Phosphor in the same project)
- Custom SVGs for anything Lucide already covers
- Filling icons (system is outline-only)
- Rotating, flipping, or animating on hover