Iconography in UI: When Icons Help and When They Hurt
Iconography in UI: When Icons Help and When They Hurt
Icons are a fundamental part of UI design, but using them incorrectly can confuse users rather than help them.
When icons work well:
- Universally recognized actions (search, home, settings, close)
- Paired with text labels for clarity
- Used consistently throughout the interface
- At appropriate sizes with sufficient padding
When icons fail:
- Abstract concepts without labels (what does a star mean?)
- Too many icon-only buttons in a row
- Inconsistent icon styles (mixing outlined and filled)
- Icons that are too small or lack contrast
Best practices:
- Always test icon recognition with users
- Use text labels alongside icons when possible
- Stick to one icon style throughout your product
- Choose icons from established icon libraries for consistency
What icon libraries do you recommend?