What Is Iconography?

Key takeaways

Iconography is the strategic use of simple, recognizable symbols created by user experience (UX) designers to communicate messages, replace words, and improve software navigation.

• Iconography serves as a visual tool that helps users navigate software and mobile interfaces through universally recognizable symbols used interchangeably with commands or directions.

• The effectiveness of iconography is evaluated by UX designers through user research and prototypes to understand the value of different icons and when to use them on web pages.

• You can study existing icon systems from products you admire or practice creating your own cohesive icon sets to develop expertise in this area of visual communication.

Read on to learn more about the iconography process, including qualities of effective iconography and common design mistakes to avoid. Build job-ready skills for an in-demand career by enrolling in the Google UX Design Professional Certificate.

How do UX designers use iconography? 

UX designers conduct user research and create prototypes to test out different icons and how users may react to them. Evaluating the effectiveness of iconography is a vital part of the UX design process, because it helps designers understand the value of different icons and when to use them on web pages.

Qualities of iconography

When you are designing icons and symbols, you need to ensure the iconography reflects the brand of the company, communicates a clear message, and promotes a positive user experience. Good iconography has visual appeal, universal accessibility, and recognizable symbols.

Types of Icons in Modern UX Design

Universal Icons for Navigation and Actions

Near-universal icons like the hamburger menu navigation, magnifying glass for search, and house icon for homepage create immediately intuitive interfaces; however, even‌ universal icons can benefit from text labels for clarity.

System and Status Icons

Users often encounter status in peripheral vision or during stressful situations when their attention is divided. Low battery icons, error icons, and notification badges all represent a need for action by the user without causing anxiety or overwhelm.

Brand-Specific Custom Icons

Custom iconography creates opportunities for differentiation and brand expression. Many successful products develop distinctive icon styles that become recognizable elements of their brand identity, making them unmistakably part of your visual brand family.

What Are Iconography Best Practices?

1. Always Pair Icons with Labels Initially: to eliminate ambiguity 

2. Maintain Consistency Across Icons: visual consistency increases trust

3. Design for Multiple Sizes and Contexts: icons must work from smartwatches to large desktop monitors

4. Test Icons with Real Users in Realistic Contexts: Usability testing should include tasks that require users to locate and interpret various icons, revealing which symbols are immediately understood and which cause hesitation or errors. 

5. Provide Clear Feedback for Interactive Icons: Visual feedback might include color changes, subtle animations, or temporary state changes that acknowledge the user's tap or click; this confirms that the system registered the user's action.

Essential Qualities of Effective Iconography:

Visual Appeal and Aesthetic Coherence

Universal Accessibility and Inclusive Design

Optimal Size and Proportions

Strategic Use of Color

5 Common Mistakes to Avoid in Icon Design

1. Overcomplicating Icon Designs: Determine which details to remove while preserving recognizability and meaning.

2. Inconsistent Visual Treatment: A cohesive system prevents visual noise.

3. Relying on Obscure or Ambiguous Symbols: Assess whether your target users will understand the symbol without training; ensure that icons communicate clearly.

4. Neglecting Accessibility Requirements: Consider accessibility requirements like size and alternative text to create better experiences for everyone.

5. Ignoring Platform Conventions: Icons designed for iOS should follow Apple's Human Interface Guidelines, while Android icons should adhere to Material Design principles; ignoring platform-specific conventions creates poor interface experiences. 

Getting Started with Iconography in Your UX Practice

Whether you're new to UX design or looking to strengthen your iconography skills, you can develop expertise in this crucial area of visual communication. Start by studying existing icon systems from products you admire. Analyze what makes them effective, whether it’s their consistency, clarity, style, or how they support the overall user experience. Many companies publish their design systems publicly, providing valuable learning resources. Then, practice creating your own icon sets as personal projects. This hands-on practice develops your skills in balancing detail with simplicity, maintaining consistency, and thinking through how icons communicate meaning.

Keep learning with these free resources

If you're ready to get started as a UX designer or deepen your understanding of what UX design encompasses, check out these free resources:

• Watch our video on YouTube: UX Design Career Tips

• Review our study guide: Glossary of UX Terms and Definitions

• Explore roles and specializations: UX Career Paths

With Coursera Plus, you can learn and earn credentials at your own pace from over 350 leading companies and universities. With a monthly or annual subscription, you’ll gain access to over 10,000 programs—just check the course page to confirm your selection is included. 

订阅 Coursera Plus，培养就业技能

开始为期 7 天的免费试用

• 
• 
• 
• 

开始为期 7 天的免费试用