---
name: iconography
description: Use when asked about the design and use of icons — visual communication, consistency/standards, UX benefits, space optimization, branding, cultural adaptation — as a complementary visual-communication discipline to typography.
---

# Iconography

Iconography is the use and design of icons — visual representations or
symbols conveying meaning or representing concepts, objects, actions, or
ideas. Icons are widely used in user interfaces, graphic design,
signage, and communication generally, to communicate information
quickly and effectively.

## Key aspects

- **Visual communication** — icons are designed to be easily
  recognizable using simple shapes, colors, and symbols, enabling quick,
  efficient communication, especially across language barriers or where
  information needs to be compact and visually appealing.
- **Consistency and standards** — iconography often follows established
  conventions to ensure consistency and familiarity; commonly used icons
  (a hamburger menu, well-known social-media logos) have become widely
  recognized and understood.
- **User experience** — well-designed icons enhance UX by providing
  visual cues that aid navigation, information retrieval, and
  interaction.
- **Space optimization** — icons save screen space and reduce clutter by
  conveying information concisely, particularly valuable on mobile
  interfaces and small displays.
- **Branding and recognition** — icons can become closely associated
  with a brand, product, or service, contributing to recognition and
  identity.
- **Cultural adaptation** — iconography can be adapted to different
  cultures and contexts by incorporating culturally specific symbols,
  colors, or visual cues (see [[cross-cultural-communication]] for the
  broader discipline this adaptation draws on).

## Common pitfalls

- **Ambiguous or unconventional icons with no label** — an icon whose
  meaning isn't already a widely-recognized convention needs a text
  label or tooltip; relying on an icon alone to be self-explanatory
  often fails.
- **Inconsistent icon style within one interface** — mixing icon sets
  with different visual styles (line weight, fill vs. outline) looks
  disjointed and undermines the cohesion iconography is meant to
  provide.
- **Assuming universal cultural meaning** — a symbol that's clear or
  positive in one culture can be confusing or even offensive in another;
  verify cultural fit rather than assuming universality.
- **Icon-only interactive controls with no accessible label** — an icon
  button with no accessible name (via `aria-label` or visually-hidden
  text) is invisible to a screen reader; see [[aria-attributes]],
  [[screen-reader]] for making icon-only controls accessible.

## Learn more

- [[typography]] for the complementary visual-communication discipline of text styling.
- [[cross-cultural-communication]] for the broader discipline behind culturally adapting icon choices.
- [[aria-attributes]], [[screen-reader]] for making icon-only interactive elements accessible.