Icon Design
The principles governing the style, sizing, and usage of icons in a UI.
Plain English
Icons are the punctuation of UI design — used sparingly, they clarify. Used everywhere, they become visual noise. The most common mistake is mixing icon styles from different libraries (some outline, some filled, some bold, some thin) — the result looks assembled from different products. Pick one style and stick to it. Size icons at 16, 20, or 24px optically — not mathematically — and always pair an icon with a text label unless the meaning is universally understood (close X, search magnifying glass).
Technical
Best practices: SVG icons are preferred (scalable, stylable with CSS, accessible with aria-hidden). Use a single icon library (Lucide, Heroicons, Phosphor, Radix UI Icons) for style consistency. Size icons at 16px (dense UI), 20px (standard), or 24px (prominent). currentColor makes icons inherit their parent's text colour. Add aria-hidden="true" to decorative icons; aria-label to standalone semantic icons. Stroke-based icons (outline) read better at small sizes; filled icons read better at very small sizes.
Live Demo
Size
Min readable size: 20px
Style consistency
Label pairing
Icons need text labels unless the metaphor is universally understood. Min size: 20px.
Usage
✓ Good usage
Use Heroicons (outline) at 20px throughout the UI with stroke width 1.5, always pairing each icon with a text label except for universally understood glyphs.
✗ Bad usage
Using Font Awesome solid for the nav, Feather icons for buttons, and Material icons for notifications — three visual styles in one interface.
Recommended values
- 16px — dense table/list contexts, metadata
- 20px — standard UI icons (nav, button icons, form field adornments)
- 24px — prominent standalone icons, empty state illustrations
- 32px+ — feature icons, onboarding illustrations
- Stroke width: 1.5–2px at 20–24px sizes
- Use one library across the entire product — never mix styles
Common mistakes
- Mixing icon styles from multiple libraries.
- Icons without text labels in non-obvious positions — not everyone understands your metaphors.
- Icons that are too small (12px and below) — illegible and hard to tap on mobile.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use Heroicons (outline style, 20px) throughout. All icons use currentColor. Pair every icon with a visible text label except for ×, ↗, and search. Stroke width 1.5. Do not mix icon libraries.