A visual communication system using icons designed with consistent style, weight, and size to represent actions, objects, and concepts efficiently. Effective iconography reduces reliance on text labels, speeds up recognition, and contributes to the overall visual coherence of a product — but icons without labels can be ambiguous.
Common contexts
- Auditing a mobile toolbar where five unlabeled icons test poorly in usability sessions
- Building a design system icon library with three weight variants for different UI densities
- Replacing text-heavy table action buttons with icon-plus-label pairs to save horizontal space
Use when
Use icons with text labels on first-time or low-frequency interfaces where recognition cannot be assumed — pairs outperform solo icons in nearly every usability study below expert-user thresholds.
Avoid when
Don't swap text labels for icons purely to save space in dense enterprise UIs — misidentified icons cause more errors than the space saved is worth.
An icon is only as universal as the last 10 users you tested it with — your internal team's familiarity is the worst possible benchmark for icon clarity.
Real-world examples
- Google Maps uses a universally recognised red teardrop pin for locations — an icon so widely adopted that it appears unchanged in Apple Maps, Yelp, and dozens of competitor products.
- Twitter/X replaced its bird icon with X without any onboarding: the switch confused a measurable share of users who relied on the bird as a brand anchor, highlighting iconography's role in recognition.
- The floppy-disk save icon persists across Microsoft Office, Figma, and VS Code despite the format being obsolete, demonstrating how strong icons outlive their physical referents.