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.
  

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

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

##Pair unfamiliar icons with labels If you still want to use a unique icon, consider using text label alongside with it.  ##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.

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

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.

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

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.

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