Icon Best Practices

Considerations When Using Icons

This post was originally published for the Agencyport Developer Zone on September 29th, 2015. Edits have been made from the original post.


Icons literally come in all shapes and sizes. From the enlarged images on a Mac dashboard to the magnifying glass in most search bars, we are introduced to hundreds of icons on a weekly basis. Now more than ever, it’s important that an icon be relatively simple and scalable. Icons in general have moved away from the skeuomorphic, 3D style made popular in the early 2000’s. Since icons are used in so many different ways on so many different platforms, this article focuses mainly on icons used within a digital product interface.

Icon Usage

Example of a work item in Portal 5.1. We use a “Link” icon to link a work item to an account. The “Road” icon labels this work item as “Auto Policy”.

In AgencyPortal 5.1, we use icons in many different ways. We use them in our navigation bar, card system, and on our data entry pages. Because we use Bootstrap as a framework, we’ve taken advantage of the Font Awesome library of icons. This has helped provide us with a set of icons that work similarly to fonts in that they can be re-sized and re-colored easily. However, this has also became disadvantageous over time, because there are only so many icons that are useful to our needs. We don’t want to repeatedly use the same icons repeatedly in different ways, which can be confusing to our users.

View of the “My Work” screen in Portal. We don’t use icons for “Transactions”.

To make things more complicated, some of the actions or destinations we want to represent with icons are not easily translated into small images. Some of these concepts are too complex in nature/too specific to the industry we work in, such as how would we differentiate between an insurance claim, an endorsement, and a renewal? For this reason, we don’t label everything with an icon. There are certain things that are better represented with text than with a graphic.

According to this UX Movement article, “It’s better to use icons for concrete actions than abstract ones because with concrete actions you have clear objects to work with that similarly represent an action. With abstract actions you have to go out of your way to think of an object that is commonly associated with an action. When you finally think of one, you still run the risk of users interpreting it differently.”

Photoshop Toolbar

Some of the more successful examples of icons can be found in word processing and image editing programs such as Word and Photoshop. However, even icons that have been around for years are not necessarily understood by the general public.

This quote from the UX Movement article explains it well: “There’s often a tendency to use metaphoric imagery on icons when images visually similar to an action aren’t obtainable. However, this can sometimes backfire if the metaphoric image isn’t closely associated with the action it represents. Using an image of scissors to represent the action ‘cut’ is easy to understand because most people associate scissors with cutting things. However, using an image of a chain link to represent hypertext linking is not as easy to understand because most people have not closely associated the two. The same study found that 64.71% of the users they tested did not understand the chain icon for hypertext linking.”

There’s a fine line to tread when it comes to relying on the accepted usage of an icon and defining a language all of your own. In general, I think it’s important to be consistent. For example, if you are going to represent the “cut” action with an icon, using the scissors makes sense. Why redefine an action that is already familiar to so many people? What it comes down to is a user already has a language of icons in their head based on their previous experiences. A designer has to be conscious of this to make sure they aren’t accidentally conflicting with that information.

Icon Specificity

When working with images like arrows, it helps to be as specific as possible. It may seem direct to a designer, but the difference between an “undo” and a “redo” arrow can be easily confusing to users. This is an example where using text along with the icon helps ensure the user’s understanding.

Undo/Redo Arrows in Word

The example of the undo and redo arrows is a great one, as pointed out by UX Movement: “In the same study, they found that more than half of the users they tested didn’t understand the icons for ‘undo’ and ‘redo’. These abstract actions were represented with an arrow pointing to the left and right. These arrows can easily have multiple meanings to any user as they are commonly used for different actions on interfaces. Instead of just using arrows in this situation, it would have been better to use the ‘undo’ and ‘redo’ abbreviations ‘Un’ and ‘Re’ with a small arrow pointing back and forward. Arrows by themselves can have multiple meanings. But if you add a unique element that resembles the action, you’ll make the icon clear and intuitive.”

Text can add another level of meaning for a user who might otherwise be confused by the image alone. However, for some designers, this might seem counterproductive. Why use an icon at all if text is going to be included anyway? It depends on the individual case. In the example of a navigation bar, it can make sense to have both. Just having an icon is not enough, and just having the text may not be engaging enough. It also adds the aspect of glance ability in certain cases.

When deciding on what type of icon to use, make sure you test it on other people. What seems straight forward to you can be completely different to other people. If it’s taking too long to find the right icon, it might not be possible. Heed this advice from Nielsen Norman Group: “Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.”

Icon Groups

An obvious example of too many icons!

The more icons you group together, the more potentially confusing it will be to users. We ran into this problem with our data entry pages. We use icons to represent different scenarios that demand the user’s attention. There was the possibility for two or three icons to be presented at once. Some of these icons display more information when a popover is clicked. Clicking on a series of icons is a tedious process. Thankfully, we’ve reduced it so that only one icon displays at a given time.

One icon next to the input field.. Much better.


The way we interact with screens will continue to change more and more drastically as new technology becomes available. Innovators are already talking about screen-less experiences. For now, though, icons are an useful element when used strategically. Used too liberally or in place of text can sometimes make an user’s experience unnecessarily difficult.

Please recommend if this article was helpful!