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:

Search Icons - Download Free Vector Icons | Noun Project    Email Icon Large Envelope | Email icon, Icon, Clip art.   Home - Free web icons

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?