Icon Design in UX: Top 5 Considerations

An icon is a graphic symbol representing and object, action or idea. They are an integral part of our visual language providing clear, recognizable and memorable meaning wherever they are applied, whether on a sign, logo, or user interface (UI).

Let’s crack open the black box of icon design as we look at 5 key questions that impact the effectiveness and usability of icon design.

What is the purpose of the icon?

A good place to start is to discern why the icon is being used. There are two initial streams it can fall into: visual or functional.

Visual Icons

can be used in both print and digital design to support content, and guide the eye to specific areas of the layout. For example, icons might be used to highlight new features or services along with descriptive text. Visual icons can also reinforce a message or status. An example of this would be a clock icon beside the words “In Progress.” The key to successfully incorporating visual icons is to focus on the way they can help to create a visual hierarchy. Think about the way you’d like someone to read the page and use icons to map out landing places for the eye.

Functional Icons

act as links or tools in digital design. Navigational menus often implement icons to both provide interest and prompt action from the user.

In user interface design, we often have a blend of visual and functional icons so our approach to their styling needs to be distinguishable to avoid any potential confusion and frustration. You don’t want your user to see visual icons and expect to click on them the same way you do with your tool-based icons.

How will the icon be viewed?

Once its purpose is defined, it’s time to consider the audience. Understanding the user will help to direct your visual approach and tone. Being mindful of cultural differences is an important consideration in your symbol exploration. A common example of this consideration is the symbol for a mailbox where the shape of a mailbox varies significantly from country to country. Using a more universal symbol of an envelope helps to avoid potential confusion.

Another way to ensure meaning is understood is to display a text label along with your icons whenever possible. This becomes increasingly important with functional icons, which require instant understanding to assist users with their tasks.

What is the visual in the icon design?

With a sense of your audience and tone, you can now explore the litany of shapes and symbols that will illustrate your intended icon meaning. Consider the following four categories:

Literal Icons

They represent their purpose. They are instantly recognizable and are great to use in interface design with novice users in mind.

Example: A piece of paper represents a document.

Metaphoric Icons

Represent another otherwise unrelated object by drawing a direct comparison. These icons are engaging since they rely on the user to make a connection.

Example: The concept of an idea is often portrayed with a light bulb.

Universal Icons

Follow learned conventions so should be used whenever possible in interface design. They often represent physical objects.

Example: A floppy disk represents the save action. Users who have never seen or used a floppy disk in their life still recognize this symbol because it has been consistently used in systems and applications.

Abstract Icons

Use form, colour and arrangement to create a learned connection. This type of icon design is often used to create something distinctly recognizable such as a logo.

Example: The Google Drive icon uses a multi-coloured triangle to convey the idea of sharing and centralizing content, the essence of the product.

What is the visual approach in the icon design?

With research complete, you can now put pen to paper and determine the style of your icon. Be conscious of the tone you wish to set with your design when you make visual decisions. With so many options available (ie. decisions on the use of colour, perspective, shadow, line widths, colour, texture, and containers) it’s easy to over design an icon thus clouding its impact and meaning. Remember that simplicity is best to keep icons iconic. There is currently a big movement towards flat design for this very reason and it makes perfect sense in UI design.

Who’s coming to the party?

Unless you’re doing a logo or sign design, you are likely going to have a set of icons working together in some capacity. When this is the case, perform an icon audit so you can approach their design holistically. It’s a good idea to design icons with the others visible on the same art-board so you can make sure they are going to play nicely together. Stylistically, you should choose some rules and apply them across the board. For example, select a baseline width for outlines or details, and make sure sizing and contrast is consistent. When deploying styles such as shadowing or perspective, make sure you’re using them across the board too. As much as creating some commonality is important so is creating distinction, so seek to find that perfect balance.

As you can see, a lot of thought goes into designing even the smallest of visual elements. Don’t overlook the importance of icon design in your user experience or the impact that a poorly designed icon might have.