Iconography in user experience (UX) design refers to a visual language geared to product identity, where designers craft or adapt icons—simplified illustrations that help users navigate across digital environments. Designers create clear, unambiguous icons and use them consistently to communicate effectively so users can instantly recognize their meaning and achieve goals faster.
CEO of Experience Dynamics, Frank Spillers explains important points about Google’s Material Design, a helpful resource in the design of icons and more.
The definition of iconography—as well as the design and application of iconography sets—has evolved with computing and design over many years. Particularly with the advent of home computing in the early 1980s—and especially with the common use of the computer mouse—the need to represent interactive functionality on screens became profound. Icons are a vital component of any graphic user interface (GUI).
Icons are essentially a form of design language that encapsulate concepts in simple shapes. To a certain extent, they mirror pictograms in graphic design and infrastructure works—such as those inside buildings and on roadsides, like “for customers with disabilities” or “to airport”—for users to understand at a glance the function or content on their screens. Effective visual iconography is far more than a skill designers need to create visual elements to improve the user experience and interactive design of a digital product. Icons represent keys to accessing vast dimensions of usability in digital products. Without them—and unless voice-controlled user interfaces (VUIs) become the dominant form—users would encounter severe pain points and obstacles to their goals.
Google’s Material Design icons are customizable options.
© Google, Fair Use
In iconography for web design and apps, well-designed iconic symbols are vital cues for how a user interacts with a user interface (UI). The importance of icons for digital interfaces becomes even more apparent when one considers the relationship between a signifier and an affordance in the physical world. For instance, a door is an affordance. Meanwhile, the presence of a push plate—as opposed to a “Pull” handle—helps users realize what they must do to use the door in the right direction. If the plate also features the word “Push,” that’s the signifier that assures users of what to do. Other examples include the red “Exit” sign or a pictogram of a person running—set above a fire exit. Since icons on digital devices must offer more intricate functionalities—and more frequently on small screens—designers must leverage principles of iconography in UI design well to guide their target audience. They need to offer users the most effective types of icons to suit their needs for a multitude of tasks and goals.
Some iconography examples have become firmly entrenched in the modern user experience. The trash can—later the recycle bin—was an early example of an icon in an interface. It’s a skeuomorphic design. This means the trash can mimics its real-world counterpart. Early computer users also came to associate the icon of the then-common floppy disk with the function of saving work such as a text file. These two physical items—the floppy having long since fallen out of everyday use—are examples of how iconography becomes established and then indelibly stamped in the public consciousness. Icons that succeed and become “household names” are like shorthand for the brain to respond to—like muscle memory.
Some icons are mainstays of UI design, such as these ones that resemble their real-world counterparts.
© Sandra Boicheva, Fair Use
Designers continue to create, adapt and use icons to:
One main purpose of icons is that they should be immediately recognizable—a quality that makes them effective for quick communication in user interfaces. Their ability to encapsulate information swiftly is especially valuable in environments where speed and clarity are vital. Especially in mobile contexts—the more common way users engage brands in the 21st century—this is a particularly important consideration for designers to accommodate in icons. When designers use a well-crafted icon style that users find familiar or can learn at a glance, it means users can navigate new interfaces more efficiently.
In digital design—especially on smartphone screens—space is a premium commodity. Icons are compact and allow a limited interface area to feature multiple functions. This space efficiency makes them indispensable in toolbars and menus where horizontal or vertical real estate is limited. So, designers can create clean and uncluttered user interfaces.
Icons transcend linguistic barriers, so they’re a universal component of digital communication. They eliminate the need for translation in global applications—particularly helpful for international software. An envelope icon indicates email, for example. Icons can form part of a seamless user experience across different cultures and languages—slashing the potential for confusion while boosting accessibility.
Author and Human-Computer Interaction Expert, Professor Alan Dix explains important points about how to design with culture in mind:
Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons
Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg
Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg
Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg
Designers tend to align the icon symbols they use on digital products like websites and mobile apps with the look and feel of their brand. It’s important to present users with iconography that’s familiar to them. However, if a designer can fine-tune this sense to match the personality of their brand—including a suitable color palette—they can welcome users and customers that much further into a seamless experience.
One of the keys to a seamless user experience is that users should not need to pause and think about the interface or its icons.
© Andrew Kucheriavy, Fair Use
Designers can utilize libraries like Google Material Design iconography or start working on their own from scratch. In any case, when designers embark on icon design, they should:
Establish a clear, consistent visual language: It should match the brand’s personality and the users’ expectations. So, it’s vital to conduct user research and follow the brand’s guidelines in a design brief. For example, a “traditional” bank website will call for a look that boosts trust, with a careful application of sedate colors and symmetry or visual balance. Meanwhile, an entertainment-oriented app can afford to embrace a certain degree of playfulness. In any case, designers should consider factors such as the following:
Line weight: For example, 2 pixels for a line weight is a common feature.
Fill style: Designers choose whether they want to stroke icons or fill them. If they stroke them, it’s important to have the same line thickness.
Strokes and fills—important considerations for a brand’s icon set.
© Bonnie Kate Wolf, Fair Use
Corner radius: This is the degree to which the icon has rounded corners.
This image marks the change when iOS app corners became distinctly more rounded.
© Appifier, Fair Use
Use a grid system to keep the alignment and balance effective: It’s vital to make sure that each icon is in harmony visually within the set.
The icon’s live area is the part visible to users. An icon 24×24 dp (density-independent pixels) in overall size would have an effective live area of 20×20 dp—so, with 2-pixel padding.
© Shriya Pandey, Fair Use
Make sure icons are ultra-quick for users to recognize: It’s best to use ones that users are used to. Familiar icons that have stood the test of time are there for consistent application. Designers can apply Home (house icon), Print (printer) and Search (magnifying glass) as reliable examples.
The Play button, along with next track and previous track symbols and others, are universal to recognize, on Amazon and Spotify, for example.
© Amazon, Fair Use
© Spotify, Fair Use
Use icons to save space but keep fat-finger friendly as a rule of thumb for mobile users: Users need to recognize icons in toolbars and elsewhere, so they shouldn’t be too detailed or hard to decipher. Plus, users need to be able to enjoy great accessibility, including with fat-finger friendly icon sizes (44 pixels).
Make icons describe function and purpose in visual terms: They’re not for decoration. Designers should consider if their product’s users could tell what an icon means without any help from labeling.
Always use a single icon set as per design and branding guidelines: In the same sense that microcopy needs to be consistent (e.g., “Remove item” or “Delete”), so do the icons on a site or app. One icon should have a single function, and there shouldn’t be multiple icons for the same function.
Label for clarity, as needed: On a toolbar, for example, be sure to label icons for clarity. Labels should go on the right of the icon or beneath it. Be sure to leave enough space between the icon and its label to maximize readability.
Beware of icons that might be ambiguous to users: Even if one thinks that sheer weight of usage over the decades should have indelibly stamped what some icons mean in the popular psyche, designers shouldn’t take the gamble if in doubt. For example, hamburger menus have historically proved problematic in this way—most interfaces implement hamburger icons to indicate the main navigation menu, but some don’t. Star and heart icons also run into grey areas in the sense that some users may not associate them with bookmarking and favorites, respectively.
Two icons can mean the same thing.
© Sandra Boicheva, Fair Use
Keep icons simple: Don’t insert too much graphic detail or make complex arrangements. Icons need to be schematic and recognizable at first glance.
Use distinct shapes and colors: If users can recognize shapes and colors that represent distinct functions, they’ll be able to act accordingly and without confusion.
Use text labels if the need arises: Sometimes, there can be doubt over how to encapsulate a function within—or indicate content using—an icon. Text labels can serve either to complement the icon or to serve as a button in its own right.
Some brands apply a combination of text labels and icons—as with YouTube (above)—and some utilize more text buttons, like Bank of America, below.
© YouTube, Fair Use
© Bank of America, Fair Use
Remember visual hierarchy: Consider how the icons work as a set on each screen. It’s vital to arrange them so they complement the interface and deliver the most intuitive experience to users.
Watch our video to understand more about visual hierarchy:
Test icons with real users: This is vital. As straightforward and intuitive as designers believe their icon creations may be, only through user testing can they get the feedback they may need to make refinement to icons—to ensure they’re intuitive and effective. Remember, simplicity in design aids user recognition and understanding. This is why effective icons remain an indispensable tool in UI design
UX Strategist and Consultant, William Hudson explains the importance of user testing:
When it comes to choices in iconography, Google’s Material Design is an example of a popular resource to work with. Designers who want to create their own icons have many options, too. The following tools are among the most helpful with features like collaborative work facilitation and plugin libraries:
Adobe Illustrator: Vector-based, this tool is good for designing icons, logos and more.
Figma: This is a popular choice to make UI elements with—and that includes icon sets.
Sketch: This vector-based software is easy to learn.
Designers can use icon templates as well.
© Gavin McFarland, Fair Use
Overall, a well-designed set of icons is a key part of product design. Users come to know—and love—the brands they choose to interact with through a journey of discovery. The best of these journeys invariably include those all-important seamless experiences. Like the logo, a brand’s iconography is a form of visual communication with its users and customers.
Many designers don’t venture out to create icons in a custom set for their client’s or brand’s digital products. However, the creations of designers who do stretch creatively to design system iconography, symbols and more intuitive ways to interact with a brand can be impressive. The most effective of these may prove to strengthen the links between users, customers and the brands they love in a more engaging and delightful UX. Some icons may join the core group of household symbols like the recycle bin, and through sheer frequency of use become iconic.
Take our Visual Design: The Ultimate Guide course.
Consult Guide to Iconography Design for Enhancing Your UX/UI Abilities by Bonnie Kate Wolf for further insights.
Go to Icon Usability - Best UX Tips and Design Guidelines by Andrew Kucheriavy for more information and guidelines.
See UI Icons: Explaining Every Single Type with Inspirational Examples by Sandra Boicheva for more details and tips.
Read How to Design Better Icons by Buninux for more insights, tips and information.
Refer to Google’s Material Design guidelines, including for icons.
To create effective UI icons, keep simplicity, clarity and consistency as your focus. Simple icons are things that users can recognize and understand quickly. Avoid unnecessary details—they can clutter your design and confuse users.
Use simple shapes and lines: Choose basic shapes that users can easily identify. Simplify the icon's design to its most essential form.
Maintain clarity: Make sure the icon's purpose is clear for users at a glance. Test your icons with users to confirm they understand each intended function.
Keep them consistent: Use a consistent style throughout the interface; that means consistency in line weight, color palette and size—for a cohesive and professional look.
Follow established conventions: Use familiar symbols that users recognize—for instance, a magnifying glass for search or a trash can for delete.
Test for scalability: Icons should be clear at various sizes. Test your icons on different devices and resolutions.
Add labels when you need to: If the icon's meaning isn’t clear immediately, add a label so users can understand the icon's function.
Keep an eye on hierarchy: See how the icons look together on the screen; is the hierarchy effective?
Take our Visual Design: The Ultimate Guide course.
Watch our video to understand more about visual hierarchy:
Flat icon design and skeuomorphic icon design are different both in their visual style and the philosophy behind each.
Flat Icon Design:
Flat icons use simple shapes and colors—no textures, gradients or shadows.
Designers focus on clear minimalism—prioritize functionality over decoration.
Flat icons look modern and clean. Plus, they load quickly, which improves performance.
Skeuomorphic Icon Design:
Skeuomorphic icons mimic real-world objects. They have textures, shadows and gradients for a three-dimensional effect.
Designers aim to make digital interfaces feel familiar, so they replicate physical objects like magnifying glasses.
Skeuomorphic icons often look detailed and realistic. They can help users understand new technology since they relate it to real-world items.
Read our Topic Definition of Flat Design.
Read our Topic Definition of Skeuomorphism.
It’s best to approach this with a clear strategy. Try the following:
Make sure your colors are in line with your brand’s identity: Use brand colors consistently; it helps users recognize your icons quickly. Refer to your brand guidelines.
Think about color meanings and cultural differences: For instance, red often signifies urgency or errors, while green indicates success—or safety. Research your target audience so you know how they might look on colors.
Make accessibility a priority: Make sure there’s enough contrast between icon colors and backgrounds; it will help with visibility. Tools like WebAIM’s contrast checker will help you meet accessibility standards.
Use color sparingly: Too many colors can confuse users. Instead, use color to highlight key icons or show different states (e.g, active or inactive).
Test your icons in various contexts: View them on various devices and backgrounds to see that they remain effective.
Read our piece, Understand Color Symbolism.
Watch our video on accessibility to understand more about this vital subject:
There are several common mistakes in icon design you should be aware of, so you can make sure your icons are effective and user-friendly. These include:
Don’t use overly complex designs: Icons should be simple and recognizable at a glance. Complex icons can confuse users and don’t communicate their purpose quickly enough.
Avoid inconsistency: Use a consistent style, size and color scheme across all your icons. Inconsistent icons disrupt the visual harmony and make your interface look unprofessional.
Don’t rely solely on color to convey meaning: Users with color blindness might not distinguish certain colors. Combine color with other visual elements, such as shapes or labels, to ensure clarity.
Make sure your icons are universally understandable: Avoid culturally specific symbols that might confuse international users. For example, a mailbox icon might not make sense to users in countries where physical mailboxes are uncommon.
Test your icons on different devices and screen sizes: Icons should look clear and sharp on all resolutions. Blurry or pixelated icons can frustrate users and spoil the user experience.
Watch as Author and Human-Computer Interaction Expert, Professor Alan Dix explains why it’s important to design with culture in mind:
Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons
Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg
Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg
Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg
Take our Visual Design: The Ultimate Guide course.
You can do several things, such as:
Match your icon style to your brand identity: If your brand feels modern and sleek, use minimalist and clean icons. If your brand feels playful and fun, opt for colorful and whimsical icons. This alignment creates a cohesive visual experience for users.
Consider the context of where you’ll use the icons: For example, use simple and clear icons for mobile apps so users can read easily on small screens. For websites, you might have some more flexibility to use somewhat more detailed icons.
Keep things consistent: Choose a style and stick with it across all icons to keep a harmonious look. Mix-and-match styles can confuse users—and make your interface look unprofessional.
Make clarity a priority: Icons should communicate their purpose without your needing to include text. Don’t use abstract designs that might confuse users.
Test your icons with your target audience: Get and collect feedback to see if users understand—and appreciate—the style. Make adjustments according to their input so you make sure your icons meet their needs.
Take our Visual Design: The Ultimate Guide course.
UX Strategist and Consultant, William Hudson explains important points about usability testing:
Iconography plays a crucial role in branding; here are some ways:
Icons help users recognize your brand quickly: Unique and consistent icon designs create a visual identity that users associate with your brand. For example, Apple’s simple, sleek icons mirror its innovative and modern brand image.
Icons communicate messages efficiently: They carry complex ideas in a compact visual form. For instance, a shopping cart icon immediately tells users where to find their purchases.
Icons help users as they guide navigation and highlight important actions: Clear and intuitive icons help users interact with your product effortlessly—a hallmark of a positive experience.
Icons support accessibility: They give visual cues that go beyond language barriers. Universal icons, such as the envelope for email, make sure that users around the world understand their functions.
Read our piece, Understand Color Symbolism.
Watch our video on accessibility to understand more about this vital subject:
Here are some main ones; icon libraries:
Save you time: Designers can access a wide range of pre-made icons and not have to make each icon from scratch.
Make sure of consistency: All icons in a library share a unified style—and so keep a cohesive look across your project, improve users’ experiences, plus make your design appear professional.
Offer variety: They provide numerous icons for different purposes, allowing designers to find the perfect match for their needs. This variety ensures that you can cover all aspects of your design without compromising on style.
Make for easy customization: Designers can often adjust the size, color and other icon properties for their brand-specific requirements.
Frequently update: Regular updates give you access to the latest design trends and technologies—helping keep your project modern and relevant.
Take our Visual Design: The Ultimate Guide course.
Read our Topic Definition of Design Systems for more on icons and other relevant subject.
Icons are important for this since they guide users' attention and clarify information for them. More specifically, icons:
Draw the eye to important elements: For icons that are next to key actions or information, these elements stand out—for example, a trash can icon highlights the delete function.
Help organize content: They break up text-heavy sections and give visual cues. Users find it easier to scan and understand, then.
Indicate what the functionality is: They show users what actions they can take, such as play, pause or share—helping them understand at a glance what to do.
Create emphasis: Larger or more colorful icons draw more attention, so helping users to prioritize information, such as a red warning icon for critical issues.
Keep the visual hierarchy clear: When they’re in consistent use and follow a cohesive style, icons are part of a structured and professional design.
Take our Visual Design: The Ultimate Guide course.
Watch our video to understand more about visual hierarchy:
Try to follow these steps:
Use dual-tone icons: Make two versions of each icon—one for light mode and one for dark.
Make high contrast a priority: Make sure your icons contrast well against both light and dark backgrounds. Don’t use colors that blend into the background.
Outline your icons: A border or outline on your icons helps keep visibility high on different backgrounds, and can give a clear edge whatever the background color is.
Test your icons in both modes: Fine-tune any adjustments to make sure of a high level of consistency and readability.
Use adaptive icons if you can: Get icons that automatically adjust based on the user’s mode preference.
Take our Visual Design: The Ultimate Guide course.
Read our Topic Definition of Dark Mode.
Silvennoinen, J. (2016). Aesthetic Appeal and Visual Usability in Four Icon Design Eras [PDF]. Typeset.io.
This publication looks at the influence of different icon design styles from various eras on aesthetic appeal and usability experiences. The study uses the method of primed product comparisons in its analysis as to how users perceive and evaluate icons from different design eras. The main theoretical and methodological contribution is the analysis of visual usability and appeal as a cognitive process—and it sheds light on the partly unconscious process by which people find pictorial representations visually appealing and usable. The paper discusses the multi-dimensional nature of aesthetic appeal and the relationship between familiarity, novelty and aesthetic preferences. It also explores the implications of icon design styles on visual search and user interface design principles for creating visually usable and aesthetically pleasing interfaces.
Spiliotopoulos, K., Rigou, M., Sirmakessis, S., & Tsakalidis, A. (2018). A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective. Multimodal Technologies and Interaction, 2(2), 31.
This publication investigates how users perceive and experience the two dominant design approaches in user interface design—skeuomorphism and flat design—specifically at the level of icon design. The study examines icon recognizability, recall, effectiveness, as well as overall aesthetic appeal and perceived usability of the two design styles through a series of experiments and eye-tracking data. The main contribution is an analysis of the potential effects of the design approach on various usability metrics like task completion time, errors, as well as subjective assessments of usability and aesthetics. The paper aims to provide insights into the ongoing debate around skeuomorphic vs flat design—through empirically evaluating user perceptions and performance with each style. The findings have implications for designing visually usable and aesthetically appealing user interfaces.
Do you want to improve your UX / UI Design skills? Join us now
You earned your gift with a perfect score! Let us send it to you.
We’ve emailed your gift to name@email.com.
Do you want to improve your UX / UI Design skills? Join us now
Here’s the entire UX literature on Iconography by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
.png){kind=icon}
