Checklist for Using Icons In UI

Icons are one of the most frequently used elements in graphical user interfaces. What makes a good icon?

In this article, I want to share a simple checklist that you can use to ensure that the icons you use work for your users.

1. Easy to recognize

Clarity is the most important characteristic of a great interface. Unfortunately, icons are often broken clarity. 

Icons must first and foremost communicate meaning. When it's not clear what the icon represents, it immediately loses its meaning and becomes nothing more than visual noise.

What makes an icon great is the fact that its meaning can be understood without reading a label

A few simple rules will help you avoid using icons that don't convey the meaning.

Try to use icons that are familiar to your users

User's understanding of an icon is based on previous experience. That's why it's better to use familiar icons rather than unique. 

  • Rely on universal icons. Icons like home, print, play, and search are so common that they don't require any explanation.

    Icons that have universal meaning

  • Conducting research. Check the icons used by your competitors.

Don't use icons with conflicting meaning

Icons that could represent multiple things should be avoided. For example, the 'Heart' and the 'Star' icons can both mean liking or putting an item to the favorites. When used together they can confuse users.

Heart and Start icons are icons with conflicting meaning

Test icon meaning

Don't listen to the phrases like "People will use our app daily; they'll learn the meaning of our icons." Test your icons!

5-second rule is an effective way to test your icon. Ask people what they expect the icons to stand for.

If it takes more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate a meaning

Test scalability

Test if your icons can still be recognized at small sizes such as 15 x 15 px.

Music icon scales well

Pair unfamiliar icons with labels

If you still want to use a unique icon, consider using text label alongside with it.

Icon paired with a text label

Don't redefine the meaning of the icon

It's fairly easy to confuse users by changing the meaning of an icon. When a functionality of the icon differs from the expected you confuse users.

Don't reinvent the wheel!

Even a slight difference in meaning hinders the ability for a user to understand an icon. 

For a long time, Google Docs used icons that look almost like a hamburger. The majority of interfaces uses a similar icon to represent the main navigation menu. But Google redefined its meaning and used it as 'Back' action. When users click on this icon, they were redirected to the Google Docs home page.

The icon at the top left corner of Google Doc can confuse users

2. Visually pleasing

It's possible to convey brand personality through illustrations, color, and icons. Done right, icons can certainly enhance the aesthetic appeal of a design.

Reduce the amount of graphic details

KISS principle works for all elements of UI including icons. Keep icons as simple as possible, and avoid unnecessary complexity by following two rules:

  • Limit the number of colors used. Use no more than 3 or 4 colors to keep the design clean. 
  • Reduce the amount of graphic details by focusing on the basic characteristics of the object. Try to keep the design schematic because schematic design translates well on different screens and resolutions.
    Don't get too fancy. Avoid designing icons with too much graphic detail.

Create delight by adding an animation effect

Animation can both have a clear functional purpose and delight users. For cases like state changes, it's possible to use animation to create a more dynamic experience.

Image: Helen Tran

3. Properly sized

Icons should be good targets for users. Leaving too little space for icons on mobiles is one of the most common mistakes among designers. When you design for touch, make sure that the icons are sized large enough to be easily touched in a finger. The recommended target size for touchscreen objects is 7–10mm. Also, make sure to add padding between targets to prevent incorrect taps.

Actual target size = visual target size + padding. Image: Microsoft

4. Consistent

Consistency is a key principle in design.

Consistent design is intuitive design

Both usability and learnability improve when similar elements have consistent look and function in a similar way.

Internal consistency

Icon sets should have visual unification. The icons you decide to use for your product should have the same style. Ideally, they all should look like they were designed by the same person. Here are some of the rules you need to follow to create a sense of unity:

  • Use the same color or color scheme for all your icons.
  • Use the same shape and other styling attributes (such as the size of borders) for all your icons.
    Icons that don't have enough cohesion looks wrong

Consistency with a platform

Make sure the style of icon is consistent with the platforms that you target. They will be most recognizable to your users.

Apple iOS and Google Android icons

Consistency with product family

If you have a product family, make sure that the same (or at least similar) icon style is used in all products.

Bonus

Usually, it's really hard to find the right icon for your project. That's why I want to share a list of resources that will make this task much easier. I'll update the list of a regular basis, so you'll find more helpful resources there.

Icons for your next project