Tips to Design Better Icons

Icons are the elements that add both form and function to your UI designs when used properly. When used correctly, UI icons can speed up user interactions by being immediately recognizable, and they can also add style and visual interest to your user interface designs.

Using icons doesn’t need to be complicated. Even a couple of well-placed icons can improve your user experience when done correctly. Check out these iconography tips and best practices before implementing them in your next UI design.

1. Keep icons simple

Don’t overcomplicate your icon designs. Keep them as simple as possible, especially at smaller sizes. The best icons are simple shapes and pictograms that users can instantly identify.

2. Make them recognizable

Icons should be immediately recognizable. If users are left wondering what an icon means, it defeats their purpose. Don’t leave users wondering what an icon is supposed to be, as that will only lead to them wondering what the icon’s purpose is, harming the overall user experience.

3. Give Icons meaning

The images used for icons should have meaning that’s easily understood. The meaning should be directly tied to the function of the icon, such as a house icon for the home page. While metaphors are sometimes easily deciphered by users, more literal icons are generally faster to recognize.

4. Make sure they are scalable

Icons are often used in small sizes, but you may occasionally find use cases where you want to use larger versions (or even smaller ones). For that reason, make sure that your icons look good regardless of the size they’re displayed at. You can use progressively more complex icons as the size gets larger, but make sure that you don’t let them get too complicated.

5. Make Icons accessible

If you’re not using text labels to accompany your icons, be sure that you implement proper alt tags so that their functionality is still accessible to people using screen readers.

Along a similar line, be sure that your icons have enough contrast and are sufficiently sized to be accessible. You should also make sure that touch targets around icons are sufficient for users who might have fine motor control issues to still tap the intended area.

6. Be careful with color

As a general rule of thumb, icons should be a single color. Furthermore, don’t use different colors for each of your icons unless it directly contributes to making them more usable. In most cases, you might use a different color to indicate an active icon, while the rest are another color.

7. Always use vectors

When creating custom icons, you should always create them in a vector image format. This way, they can be easily scaled without losing clarity or crispness. When saving them for use in digital products, the SVG file type is the best choice as it preserves the scalability of the icon as well as transparency.

The next best alternative to SVG is to save them as lossless PNG files, as they’ll retain transparency and the quality won’t deteriorate.

8. Keep icons uniform

When using an icon set, all icons should be uniform in style and size. Using icons that don’t have a consistent style will confuse users and make your interface look messy. Using icons that aren’t the same size will have a similar effect.

Conclusion

Icons can help users recognize and recall commands. But, a set of links with icons of inconsistent quality will confuse employees and waste their time. Better to either brainstorm, research, and design a set of usable icons, or just use clear text links and no icons at all.