Iconography is the visual images and symbols used in a work of art or the study or interpretation of these. Icons add both form and function to your UI designs when used properly. They 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
Your 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.
10. Use universal icons
When it comes to iconography, don’t try to reinvent the wheel. Sure, unique, creative icons can add visual interest to your user interface. But if users don’t understand them or they’re hard to decipher, you’re harming the overall user experience.
For common functions, stick to icons people recognize. Here are a few examples of universally recognized icons:
- House icon for the home page
- Three horizontal lines to indicate a hamburger menu
- A magnifying glass for search
- A pencil to edit or modify content
- A thumbs up or heart to like something
- A heart or star to favorite something
- A bookmark to save a bookmark
- An arrow coming out of the top of a square to share something
- An arrow pointing down into a square to download something
- A gear or cog for settings
- A lock icon to show something is secure
There are others that are context-specific (such as shapes for media player controls), but this is a good place to start. If you’re using the functionality mentioned in the list, it’s generally best to use a universally recognized icon. If you deviate from a universal icon, be sure to add a text label to assist users.
Use these rules to design successful UI icons
Not every UI design needs to include icons, but when used properly, they can improve the user’s experience while also providing additional aesthetic appeal for your websites and other digital products.
Subscribe for newsletter
* You will receive the latest news and updates on your favorite celebrities!
UX Design and SEO: What’s The Connection
To put it simply, the goal of SEO and UX both is to give users the best experience when they…
Globalizing your UX Designs
Designing for users across the globe creates more inclusive experiences and products. Designing for a global audience while collaborating with…
Gamification in UX Design: Enhancing user experience and engagement
Gamification has emerged as among the most amazing trends in UX design in the last few years. Games play a…