Icon Design Best Practices for UI Consistency
Icons communicate faster than words, but only when they follow consistent rules. This guide covers sizing, stroke weight, grid alignment, and semantic clarity for icon sets.
Key Takeaways
- Icons serve as visual shorthand: a magnifying glass means search, a trash can means delete.
- Every icon in a set should be drawn on the same base grid — typically 24x24px with 2px padding (20x20 live area).
- Choose one primary style for your set and stick with it.
- If you choose outlined icons, lock the stroke weight across the entire set.
- An icon fails if users cannot guess its meaning.
Color Palette Generator
The Role of Icons in UI
Icons serve as visual shorthand: a magnifying glass means search, a trash can means delete. They reduce cognitive load and save horizontal space in navigation bars, toolbars, and mobile interfaces.
Designing on a Grid
Every icon in a set should be drawn on the same base grid — typically 24x24px with 2px padding (20x20 live area). This ensures consistent optical sizing regardless of the icon's shape. Circles, squares, and tall/wide shapes all occupy the same bounding box but use different portions of the live area.
Stroke vs Fill
| Style | Best For | Considerations |
|---|---|---|
| Stroke (outline) | Navigation, toolbars | Lighter visual weight, requires consistent stroke width |
| Fill (solid) | Active states, emphasis | Heavier weight, better at small sizes |
| Duotone | Illustrations, features | Two-tone depth, more complex to maintain |
Choose one primary style for your set and stick with it. Mixing stroke and fill icons in the same toolbar breaks visual consistency.
Consistent Stroke Weight
If you choose outlined icons, lock the stroke weight across the entire set. A 1.5px or 2px stroke at 24px is a common standard. When scaling icons to different sizes (16px, 20px, 32px), consider creating dedicated optical variants rather than simply scaling the SVG.
Semantic Clarity
An icon fails if users cannot guess its meaning. Test with the five-second rule: show the icon in isolation for five seconds and ask what action it represents. If fewer than 80% of testers guess correctly, add a text label or choose a more universally recognized metaphor.
SVG Optimization
Export icons as SVG for crisp rendering at every resolution. Run them through an optimizer (SVGO) to strip metadata, simplify paths, and reduce file size by 20-40%. Inline SVGs in HTML for instant rendering without additional HTTP requests.