The Iconography Checklist

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.