web design

Why icons are important for the UX

Icons are used everywhere from web apps to the labels on our clothes. Their main purpose is to represent an action or object, which is why icons should convey a clear message regarding their purpose.

by Iulian Pistol

Icons are subtle cues

Icons create a unified visual experience, helping users quickly recognize elements or actions which are related. There is a group of widely used and recognized icons referred to as “universal icons” - a name chosen because any user, no matter the background of digital prowess, knows what they stand for.

Examples of universal icons:

• the “cog” icon is used to indicate the settings page
• the “envelope ” is used to indicate a contact form
• the “home” icon is used for navigating to the homepage
• the “magnifying glass” represents a search bar

example from the icon set Untitled UI Icons

This consistency makes it easier and faster for the users to understand the interface and creates a deep feeling of trust.

Icons save real estate

Icons can also be used to represent elements that would take up a lot of space on the page if represented by text. The best examples are the “help” icon, which indicates where a user should go for more information about the product, or the “search” icon, which is used to indicate the placement of the search bar.

By using icons as visuals, designers create a concise, uncluttered, and intuitive interface which improves the user experience. This is especially important when the user navigates the website on a smaller device.

dashboard snippet from the Untitled UI Kit

Icons boost the brand identity

In addition to improving the user experience, icons can also be used to represent an organization’s brand identity. Icons can help create a unique and recognizable visual representation of the brand. Users are more likely to remember an image with a strong visual identity. Furthermore, icons can also help communicate a company's purpose, values, and ethos.

Stripe is one of the companies that have successfully incorporated icons in their brand presence with animated duotone icons.

snippet from the Stripe.com homepage

Icons that can break the UX

Sometimes icons are ambiguous and confusing, which makes it difficult for users to complete basic tasks.

An example of an ambiguous icon is the “hamburger” icon. It’s often used to represent a slide-out menu, but it’s very similar to the icon used for a “list”.

Another example of ambiguity is the heart and the star icons. Both of these icons can be used to favorite, save or rate an item.

Two ways to create less ambiguous situations are:

• be consistent throughout the design. Use the same icon to represent the same action across all the pages of the website or app
• use labels that are large enough to read and clearly represent what the icon stands for

example from the icon set Untitled UI Icons

Conclusion

Icons can make or break the user experience. If used correctly, they can help make navigation easier, create a more aesthetically pleasing look, and make information easier to access. Icons play a crucial role in creating a great user experience on a website, particularly when it comes to information-dense designs such as dashboards. By using icons to represent complex ideas, users can quickly and easily understand information at a glance. This not only saves time but also improves the overall usability and accessibility of the website. When selecting icon sets for your dashboard, consider factors such as consistency, scalability, and style to ensure that the icons enhance the user experience and create a visually appealing interface.