Icon Design Best Practices – Tips and Design Guidelines

Nowadays icons are considered to be the most universal and understandable language in the world. In fact, people have always used them in different forms or styles. Even Egyptian hieroglyphs or cave paintings are nothing else but icons, and people understand some of them even now. 

So there is no surprise that icons really matter in the digital world. You can speak any language, but you will get messages from icons because sometimes they are louder than any words. They help to navigate in a business center, shopping mall, airport, to perform a particular action using the software. There’re a lot of options for using these little images. And if you’re going to create your personal ones, we’re here to share icon best practices.

Why Do You Need Icons

Here are a few reasons for using icons in design:

• They are easy to recognize. Icons will attract the attention of the audience and help people to navigate at your web-site.
• They save space. This advantage is especially important for displaying a website on a mobile screen.
• They are comfortable. It’s convenient for users to click on them with a finger and the number of clicks on the link also increases.
• They are universal and understandable for people of any gender, age, from any country.
• They are aesthetically attractive. Icon design best practices help make a website or application more appealing.

Here is a couple of some award winning great icon design examples.

Science icons. Source

Star Wars Icons. Source

Food and Beverage icons. Source

Icons as Part of an Awesome UX | Common mistakes

At first glance, it seems that there is nothing easier than creating a good icon. In fact, many professional designers make mistakes that are fraught with poor UX and icon usability.

The biggest mistake is that we think users will understand the meaning of our icons. There is even a story about Microsoft Outlook. They designed a toolbar for icons only, but users were at a loss because they didn’t understand them at all. MO had to add text labels to save the situation. Therefore, you need to make sure that the icons are both creative and recognizable. Do not create too many graphic parts and do not reinvent the wheel. Take care of text labels for user experience icons just in case.

7 Icon Design Tips

There are several common recommendations on how to make the grade at the icon creation. If you need icons for a mobile application, you can also use Apple or Google Play icon guidelines with all the necessary requirements.

1. Decide on the style

Your first and most essential task is to choose the appropriate style. You can decide on the outline, plain, color, filled or the mixed style, it doesn’t matter. But make sure that all your icons in the set follow it. Indeed, if there are contour and filled icons at the same time, the second ones will attract more attention, and the set with different types of icons design will not be harmonious.

2. Use simple metaphors

Users should understand your point or message from first glance. After all, icons are needed for the quick perception of information through a visual image. To realize this you can use common and popular forms, colors, symbols. Follow the 5-seconds rule. If people need more than 5 seconds to think about the icon, that is the bad icon. 

3. Bet on grid

Ideal pixels are what you should remember and check throughout your work. Because of the grid, the icons will have clear lines and borders. This will make your work better. You can use the 8-pixel grid and 12-column layout, they are more flexible than the decimal matrix. That’s why they’re used for many interfaces. It is possible to divide 12 into two, three, four and six. Thus, 24- or 48-pixel icon areas have become standard. If a larger size is required, scale these icons. It is also important to observe line thickness. You can make 2 px. for large parts and for small ones 1px. 

4. Rounded corners

If you’ve created some of the icons with rounded corners, make sure that all others follow this rule. It may seem that this is a trifle, but it will also provide your set with organicity and unity of form.

5. Details matter

The details amount depends on the size of the ux design icon. The smaller it is, the less different details you need. Then the icon will not merge into a color spot. It is up to you whether you’ll make the icons detailed or minimalistic, but if they have high details, it is advisable to use finer lines.

6. Color

Don’t create icons set of different colors if it is not dictated by the features of the interface. For example, it is important to distinguish the confirmation and cancel icons. In other cases, use the same color for plain icons, or the same color combination for multi-colored ones. It would be nice to use your brand colours that the audience is already used to.

7. Add features

To combine your set into a single whole, you can add something to make them more interesting, e.g, you can use open contour lines. Experiment with different styles to create your own original product. Combine fill and outline, or add color spots.

Thus, it’s all yours to make icon something more than just a beautiful element for a website. They can become one of the ways to promote a business, increase brand-awareness and customer loyalty.