Iconography

Iconography is the use of symbolic images or icons to represent actions, objects, concepts, or navigation destinations in an interface. Effective iconography reduces cognitive load when icons are universally understood, but creates confusion when they are not.

What is iconography in UX design?

Iconography refers to the system of icons used within an interface to represent actions, objects, navigation destinations, and concepts. Icons are small symbolic images that, when effective, communicate their meaning at a glance without requiring text labels, saving space and reducing visual clutter. In practice, the effectiveness of an icon depends entirely on whether users share the cultural and experiential context needed to interpret its meaning correctly. Icons that are universally understood across user groups work well without labels. Icons whose meaning is ambiguous or context-specific require text labels to be usable by all users.

When do icons work without text labels?

Icons work reliably without labels when they have become universal conventions through consistent use across thousands of products over many years. A magnifying glass for search, a house for home, an envelope for messages, a gear for settings, a heart for favorites, and a shopping cart for a purchase cart are understood by most digital users without labels. Beyond this small set of conventions, icon meaning becomes significantly less reliable. Research from the Nielsen Norman Group consistently shows that users must learn new icon meanings and frequently misinterpret unfamiliar ones, making icon-only buttons a significant usability risk for non-universal symbols.

What makes a good icon system?

A good icon system uses a consistent visual style: matching stroke weight, corner radius, size, and optical weight across all icons. Consistency enables users to recognize that icons belong to the same system and builds the visual vocabulary needed to interpret less familiar symbols. Icons should be designed at a specific size and tested at the sizes they will actually be displayed, because small icons lose detail quickly. Each icon should have a distinct silhouette that remains readable at small sizes and in reduced-contrast contexts. All icons should have accessible text alternatives through alt text or ARIA labels so screen reader users can access the information they represent.

Related terms

Related guides