Icon Design Rules to Remember



An image is worth a thousand words. Well thought out costs even more. We see them on road signs, in restaurants, airports and applications. They can save time, or they can create confusion.

Icons are read faster than text, they are easier to notice, they take up less space and require less translation effort. The wall from the text merges into a heap, and the icons vary in shape and look good even in groups. A few recommendations for creating effective icons are translated under cat.

1. Avoid similar shapes for different icons.



Icons of similar shapes look like they are connected to each other or perform similar functions. Keep this in mind when creating the next square icon for your UI.

The icon should be easy to distinguish from all the others only in form. Make the form too similar - confuse the user.

2. Minimize the complexity of the icons.



The more elements the icon has, the less contrast and the more time it takes to recognize it. It looks like a mix of forms.

Sometimes it requires you to make the icon unique and add some β€œzest” to it. Make sure this is not at the expense of readability and clarity. Keep your shape simple and clean.

3. Keep the visual style



UI elements cannot violate the general rules of the established style. Even small changes can make the icons look like they don’t belong to the same application.

Contrast in visual style attracts attention when created not by chance. Make sure the icons are designed side by side and check more often how the elements fit together.

4. Do not rely on text.



Text makes the icon redundant, unclear for small sizes and limits it to one language. In addition, the inscription can reduce the clarity of the image.

This error is often found in large application icons and logos. If it is very necessary to include the text, then do it in the form of a label under the icon.

5. Do not reinvent the wheel



Many millions of hours have been spent creating and testing already installed icons. Even if they can be improved, think twice. Most likely, users already know their meaning, because they often come across them.

Constantly using the same forms of icons, you can decide that you do not know how to create them. But there is no need to reinvent the wheel, just to impress. The key is usability. Design should improve it, not interfere.

6. Make the message consistent.



Nothing slows down the work and does not cause anger, like an incorrectly used icon. You may be surprised, but there are applications that use the same icon for different functions.

This mistake can easily be made if you mix inactive and active icons, preventing the user from distinguishing them from each other.

7. Consider small sizes.



A beautiful icon loses all its charm when you fit it into a small space. All small and carefully thought-out details turn into a mess.

Details are cool and show your attentiveness and skill. But remember that the icons are not the main ones. First they should be useful, and only then beautiful.

8. Don't rely on color.



People with color blindness will thank you for that. Color will be a great addition to the icon, but shape is what people notice first.

Color may mask your design error. If you compensate for them with a weak icon, then better think about how to make it better.

All Articles