Based on what criteria do you add/not add icons to labels within a toolbar?

Question

Some toolbars have icons for each label, and some toolbars do not have icons for any label. There is enough discussion about that.

However, some toolbars will attach icons to label selectively, and on that I cannot find any type of discussion. Here is an example from Intellij:

The leftmost toolbar attaches only few labels with icons, while the rightmost toolbar almost attaches all the labels with icons.

The majority of the discussion is about whether to rely only on icons, only on labels, or combine them. There is no discussion or reasearch about selective use of icons in the same toolbar.

While it could be argued that "save all", "print" and "open" are "iconified" due to these actions being ubiquitous with easily relateable visualizations, "project structure" does not satisfy that idea. There are also many other features like "export" and "import" with easy visualizations that can be iconified.

I wonder if there is a practice that guides when to add an icon to a text label, and the extent to which one could add iconfs to labels before there is clutter (if there is such a limitation).

Answer 1

There are a couple of reasons:

1. If there is a generally accepted icon for that feature. Examples, save, cut, copy etc.
2. If the feature is borrowed from another application which has an app-icon. For example, sharing on facebook can use the Facebook icon.
3. Context of use, if a lot of the similar icons are displayed together, the icons will lose their purpose. However if it was the only one of that kind on the current interface, it will be useful. One way to overcome this is to group similar features and denote them with a single icon.

Answer 2

I don't think there's an "official" methodology for this, but I've noticed a pattern across a number of programs. Many programs - especially IDEs - have a number of commands that can be accessed both through drop-down menus and through toolbar buttons. An icon is required for a toolbar button, and the same icon is usually used for that command in the drop-down menu. This gives the user a common visual reference and makes it easier to understand that the toolbar button and menu entry represent the same thing.

Answer 3

I would recommend only adding icons when they provide value, ie differentiating between javascript and HTML files. Looking at your screenshot, you would need to create a tonne of similar-looking icons for open, settings and exports alone. What value would that have for the user? I would argue it would confuse things.

Answer 4

Simple answer, "Yes".

They chose to provide icons to ubiquitous actions and where applicable they used icons which can be pulled from existing use such as file icons.

There is no need to iconify actions which have esoteric meanings and would differ between one app and another.

Check out Oracle's SQL Developer for more examples on not iconifying everything:

Answer 5

Each design/development team will have their own criteria for doing this, and hopefully it is aligned to some kind of design system or convention that they have established for their product/service.

Briefly speaking, there might be a number of reasons and it is most likely to be a combination of them, some are design related while others are probably more subjective.

Some design related issues that might have been considered:

• consistency of iconography that can be created to existing style or convention
• difficulty of creating the symbol/icon for the feature/label
• number of items that need to be catered for (now and in the future)
• existing conventions (internal) for using iconography

Some subjective issues that might have been considered:

• importance of the actual item/label (whether it needs to be emphasized or differentiated in some way)
• whether there are good existing conventions (e.g. print, copy) that should be applied

It is worth noting that sometimes you don't necessarily need very good icons for a label, because many people actually also use it as a reference point of where the actual item is located in a list of items, which seems to justify the use of icons that don't resemble the item it is supposed to represent.

Answer 6

Icons are effective inversely proportional to their frequency.

If everything has both text and icons, the interface becomes crowded. I would only add icons to common actions.

IMHO, both your submenu and the menu in the SQL Developer example are too crowded.

Answer 7

Icons have to mean something somewhere. for example:

The save icon above will be seen on the toolbar without the text and users could use it to map it to the action of saving.

Another example:

Typescript files have the icon in your finder or file system to map it to type script.

The ones like:

• Export to BOM
• Line Separator
• Diagram

The general practice is to always remember that your user does not know what your icon means. So unless the icon is going to be used again, without the text, there is no need to iconize.