Icons
Two sets. One rule each.
Lucide covers all UI chrome — navigation, actions, status, and functional signifiers. React Social Icons handles social-platform identity only. Never substitute one for the other.
Lucide
Consistent stroke. Consistent weight.
Every Lucide icon ships at size=20 and strokeWidth=1.5 by default — refined without being fragile. Scale to 16 in dense layouts, 24 where icons carry primary meaning. Colour inherits from currentColor; override only with Slate, Terracotta, or Fog-50.
| Prop | Brand default | Notes |
|---|---|---|
size | 20 | 16 dense UI · 20 default · 24 comfortable |
strokeWidth | 1.5 | Never go heavier than 2 — it breaks the system weight |
color | currentColor | Inherits from parent text — override with Slate, Fog-50, or Terracotta only |
absoluteStrokeWidth | false (unset) | Leave unset — proportional strokes stay consistent at all sizes |
Structural icons, navigation, primary actions.
Decorative, secondary, or quiet indicators.
Emphasis only — one Terracotta icon per view, maximum.
Browse the full library, search by name, and download individual SVGs. Each icon page has a direct download button — pick SVG for print and design tools, or copy the React import for code.
Install from the Figma Community, then search and drag icons directly into frames at any size — the plugin respects the strokeWidth prop so brand defaults carry over.
Social Icons
Platform colours. One exception.
Social platform logos carry their own brand equity — use their native colours in footers and contact sections. In contexts requiring visual restraint (dark backgrounds, print, monochrome exports), switch every icon to Slate using bgColor. See the react-social-icons docs for the full list of supported networks and props.
bgColor="var(--primary)" + fgColor="var(--primary-foreground)".Always use official platform assets for print, presentations, and design files — not the SVGs bundled in the React package. Each kit includes approved colour values, minimum sizes, and clear-space rules.