Skills on AI 459 skills

Iconography

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 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

View iconography/SKILL.md on GitHub