Build Assets
Brand Guideline
Icon Usage Rules
How to use, size, and apply the brand icon system consistently.
Platform: bothTags: icons, iconography, brand, usage, system
The Rule
Use only the approved icon library (Lucide React). Never mix icon styles from different libraries. All icons must use currentColor inheritance — never hardcoded hex. Standard sizes: 12px (dense UI), 16px (default), 20px (prominent), 24px (large). Never scale icons between these sizes.
Rationale
Mixed icon styles — different stroke weights, corner radii, or fill approaches — are immediately perceptible as visual inconsistency even to non-designers. Consistent iconography is one of the lowest-effort, highest-impact coherence decisions.
Specifications
approved LibraryLucide React — stroke weight 1.5px, rounded caps
sizes12px, 16px, 20px, 24px — never between
colorcurrentColor always — never hardcoded hex in icon SVG
touch TargetsMinimum 44×44px tap target even for 16px visual icons
Examples
- Correct: <Icon size={16} /> inside a 44px button
- Incorrect: mixing Heroicons (filled) with Lucide (outline) in the same product
- Incorrect: <Icon color="#F97316" /> — use color: var(--color-accent) on the parent instead