Iconography

Why It Matters

Iconography is the system of visual symbols used in an interface to represent actions, objects, and concepts — from the hamburger menu and magnifying glass to shopping carts and share arrows. Well-designed icons reduce cognitive load by communicating meaning faster than text, support multilingual audiences by transcending language barriers, and create visual rhythm that makes interfaces feel organized and scannable. Poorly designed icons, however, introduce ambiguity that slows users down, creates errors, and forces them to rely on trial-and-error interaction to discover what each symbol means.

Real-World Examples

1

Google Material Symbols icon system

Material Symbols provides over 2,500 icons on a unified 24px grid with variable font technology that lets developers adjust weight, fill, grade, and optical size through CSS font-variation-settings. The consistent grid and stroke system ensures every icon harmonizes visually, while the variable font approach reduces bundle size compared to shipping multiple static SVG variants. Comprehensive naming conventions and categorization make it practical to search and implement icons at scale across a large product.

2

Apple SF Symbols with text label pairing

Apple's SF Symbols are designed to optically align with San Francisco system text, and Apple's Human Interface Guidelines strongly recommend pairing icons with text labels in toolbars and tab bars. This pairing ensures that even ambiguous symbols like a square with an arrow — which could mean share, upload, or export — are instantly clarified by the adjacent label. The tight optical integration between icon and text creates a polished, professional appearance that reinforces comprehension.

Counter-example

Mystery icon toolbar with no labels or tooltips

A project management app displays a toolbar of 12 unlabeled abstract icons — circles, squares, arrows, and lines in various configurations — with no tooltips, labels, or onboarding hints to explain their functions. Users must click each icon to discover what it does, sometimes triggering irreversible actions like archiving a project. Support tickets about the toolbar icons outnumber tickets for all other features combined, and analytics show that half the toolbar actions are never used because users cannot figure out what they represent.

Role-Specific Guidance

Common Mistakes

• The most frequent mistake is using icons without text labels for ambiguous actions, assuming that visual metaphors are universally understood when research proves they are not — even the ubiquitous hamburger menu icon is misidentified by a significant percentage of users. Teams also mix icon styles from different libraries or design eras, combining outlined icons with filled ones or mixing rounded and sharp corners, which creates visual discord that makes the interface feel unpolished. Another common error is making interactive icons too small without adequate touch targets, causing frustration on touch devices where users repeatedly miss the tap target.