Icons are one of the most frequently used graphic elements used in interfaces. You probably don’t even realize it, but you see dozens, if not hundreds of them every day! Let’s explore a simple checklist that will ensure you are using icons in a way that is effective and valuable to your design.
1. Recognizable
The most important consideration to keep in mind is “will my users understand?” First and foremost, icons must communicate meaning. When there is confusion or indistinguishability, it not only makes your icon ineffective but also makes your interface cluttered and ineffective as a whole. What makes really good icons so great? It’s that they remove the need for reading and interpretation. Here are a few that you will instantly recognize:
.
These are just a few examples of icons that are universally recognizably, and users will understand before ever reaching your screen.
2. Visually Pleasing
Once you’re certain your users will understand what your icons represent, you can focus on the visual appeal.
- Keep colors to a minimum
- Use as little graphic detail as you can (this will come in handy in the next step!)
- Focus on the most important elements of the object you are trying to convey
3. Scalability
Your icons should be effective at any size. Try using your icon in a variety of sizes, scaling all the way down to 15px. Is it still recognizable? Keep in mind that over time you may have to incorporate these icons into a variety of mediums, i.e. apps, favicons, social media, etc.
4. Size
When using interactive icons, you must ensure that they are large enough to be used as a touch on a device. The recommended target size is 7-10mm. Also, always ensure that there is enough padding (empty space surrounding the object) between icons to ensure there is adequate spacing.
5. Consistency
As you know, icons have to be consistent with each other in order to create a cohesive set for any interface or product. Not only do icon styles need to be consistent with each other, but they also need to be consistent with the system that you are designing for. For example, Apple and Android have different symbols representing the same things.
Conclusion
Next time you are trying to find the perfect icon, ask yourself the following questions:
- Will my users recognize what this represents? Is it meaningful?
- Can this be simplified?
- Will this work in a multitude of sizes?
- Will this look cohesive with my other icons?
- Will this look cohesive with the system I am designing for?