đŸ‘‹đŸœ We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Icon Guidelines

In the context of interface design, icons are small graphics used to communicate with the user visually.

Applies to:
Icon
Icon and Label

Common uses for icons

Most products and platforms use icons to represent an idea or interaction. Below are a few common uses for icons.

Graphic images

When trying to highlight features of a product or service, icons may be used to represent the feature visually. These icons make the page look more attractive and aren’t necessarily interactive.

Icons in user inputs

Icons are often added to buttons, links, text inputs, and other user inputs to make them look more attractive. Icons also give the user a visual cue as to what will happen when they click on it or what it is for.

Depending on how generally understood an icon is, it may also be used as a standalone button without a label.

On small devices such as phones, large text labels won’t always fit into the available navigational space. Because of this, icons are often used to navigate through an interface.

A common practice nowadays is to make the text labels really small so that they fit below the icon. This is so that first-time users still know what will happen when they press the link and to them to learn what the icon means.

Icon toggle

A toggle is a user input that switches between an “on” and “off” state. When you click or tap an icon toggle, it will change its appearance and turn something on or off. For example, when you tap a heart icon, you may be “liking” or “unliking” something, and when you click the eye icon in a password field, you may be toggling between “show” and “hide”.

Feedback

Feedback is when the system needs to communicate something to the user. In these feedback messages, an icon will often be used to communicate with the user visually.


On small screens or components, links are often hidden behind a menu icon. Depending on what the links do or where the menu is, they may act differently.

Tapping a hamburger menu icon (also known as the bars or menu icon) typically opens up a drawer or side navigation containing global navigation links.

Clicking a kebab icon (also known as the vertical ellipse or options menu icon) will reveal a list of options that the user can select from. The links in the dropdown menu should only be used for actions relevant to the page they are on (i.e., not for global navigation).

The meatball icon (also known as the horizontal ellipsis or more menu icon) is used when all the buttons or links can’t fit into an area. As the available space decreases, the icon links will get moved into a dropdown menu. Sometimes the kebab icon is used instead of the meatballs icon.


Common icons

There are many icons used in different situations. Below we will look at the most common ones and their meanings.

Authoring icons

Authoring icons indicate that the user can create or edit something. At times, the meaning of these icons may overlap.

The pencil icon can mean to create something new or to edit/update something that has already been created.

The add icon is used only for creating something new or for adding something to something else.

Destructive icons

Destructive icons usually mean that if you click them, something will get removed or deleted.

Clicking the trash icon (also known as the delete icon) will usually delete something irreversibly. It is wise to put steps in place so that the user doesn’t press it by mistake.

The remove icon takes many forms and occasionally gets used as a delete icon. A remove icon typically means that you remove something but don’t delete it. For example, it might be used when a user is removing items from a checkout basket.

Chevrons

A chevron is an icon that looks like a triangle with only 2 sides. Chevrons are used to visually indicate a directional event that will take place when the chevron is clicked.

Directional chevrons are used with links to move between sequential pages.

Accordion chevrons are used to show if an accordion section is open or closed.

General icons

These icons have been used so often that most users understand their meaning. Because of this, they are often used for navigational purposes.

The home icon typically takes the user to the front page of the site or app.

The profile icon will usually take the user to their profile or settings page.

The notification or bell icon will take users to a page with all their notifications.

The message icon will usually take the user to a page with all their messages.

The camera icon will usually open the device’s camera.

Feedback icons

Feedback icons usually appear in feedback messages to let the user know whether or not a task they attempted was successful.

The checkmark icon means that the journey the user was on was successful. For example, if the user was trying to pay someone online, they might see a checkmark if the payment was successful.

A warning or alert icon (!) will usually appear in a feedback message if the user needs to be aware of the consequences of an action they are about to perform. For example, if they were trying to delete a project, they may get a message letting them know the full ramifications of their actions.

A cross (or X) icon will usually appear if the user’s journey was unsuccessful. For example, a user may see this icon if they tried to pay a friend online and the transfer failed. The cross icon can also be used to close a window.

Appreciation icons

Appreciation icons are used by users to show how much they like a piece of content.

The heart and thumbs-up icons (both are also known as the "like" icon) are both used to show appreciation. They are generally used as a toggle button that switches between "like" and "unlike".

The star icon (also called the favorite icon) is used to show appreciation in a similar way to the like buttons except that it will usually also save the content for later reference. For example, if a user favorites an email, it will appear on their favorited emails page.

Star rating icons allow users to vote how much they like something on a scale.


Best practices

There are a few best practices when using icons in your designs.

Icon consistency

Across different platforms and products, a global icon language has been developed. Users know that they can delete content with a trash icon. They know that the pencil icon lets them edit something. They know that the speech bubble icon means message or comment.

Because of this language that users have built up, they expect the icon language to work similarly across all platforms. Avoid creating a new meaning for an existing icon.

Icons in context

Consider how an icon’s context or surroundings can change its meaning. For example, clicking a heart icon could toggle it on or off, or it could take you to a page with all the likes a user has received.

A text label is the best type of icon

In 2015, Thomas Byttebier said “The best icon is a text label.”

What he meant by this was that sometimes icons are harder to understand than simple text. It was a common belief that “users will learn our icons”, but this is just simply not true. Unless you expect a user to spend hours a day using your software, chances are they won’t learn or remember what your icon means without a written cue.

Some icons have been in our lexicon for centuries, for example, the heart or speech bubble graphic. However, other icons (such as the share icon) are fairly new.

It takes a long time for users to understand what new icons mean, so rather pair new icons with a text label.


Variations

In Balsamiq, you can use the ‘Quick add’ tool and directly insert an icon with a label into your designs. This symbol can be altered in the property inspector to center-, left-, or right-align the icon.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.