Icons and pictograms: best practices
Style consistency, minimum size, accompanying text: best practices for using icons effectively in an interface.
Icon alone, or icon + text?
| Context | Recommendation |
|---|---|
| Frequent, universally recognised action (close, search) | Icon alone is acceptable |
| Less common or ambiguous action | Always pair with text or a tooltip |
| Primary navigation | Icon + text, to remove any ambiguity |
An icon alone, with no text or tooltip, is a bet on universal symbol recognition — often a bad one (the "floppy disk" save icon isn't recognised by younger users, who've never seen a physical floppy disk).
Minimum size and tap target
| Context | Recommended minimum size |
|---|---|
| Desktop icon | ~16-24px visually |
| Tap target (mobile) | 44×44px minimum (Apple/Google guidance) |
Style consistency within one icon set
- Same stroke weight for all icons (outlined) or the same filled style — don't mix the two styles in one interface.
- Same design grid (e.g. 24×24px) for consistent visual alignment.
- Same level of detail: overly detailed icons become illegible at small sizes.
Common icon libraries
| Library | Style |
|---|---|
| Feather Icons | Minimal, thin strokes |
| Font Awesome | Wide selection, multiple styles (solid, regular, brands) |
| Material Icons | Google's style, several weights |
| Heroicons | Minimal, built for Tailwind CSS |
Thanks for the feedback!