Skip to content

Icons

Icons are awesome and an important tool for designing quality user interfaces. But if not used carefully, they can also become a real usability issue.

Icons Can Hurt Usability

There is plenty of UX research showing usability issues with icons. Icons can be ambiguous, reduce accessibility and make UIs slower to use - see the references below for much more detail on that. Labels avoid such issues and should generally be the first choice.

There are still many reasons to use icons, or icons without labels even. Follow the guidelines below.

References

Others have described the usability issues with icons:

Icon Usage

  • The default choice is a label.

    Nothing beats the clarity and accessibility of a label. Only add an icon if it adds real value, as discussed in the following guidelines.

    In some (rather rare) occasions, icons add real value simply by making the UI look more visually appealing. This should still be done sparingly though, with careful judgment.

  • Use universally understood icons.

    Many icons are well-known and understood by users, even outside of Blender. For example, the trash icon for deletion, the plus icon for adding new items, or the magnifying glass for searching. Usage of them can be more relaxed since they don't carry many of the issues common to more custom icons. A save icon without a label will still be clear enough.

    Such icon use should still be un-ambiguous. For example, a play icon can mean different things in an animation context, compared to a scripting or game development context. Only use the icon without label if context is clear.

  • Icons without label may be used if space is clearly limited.

    For example, adding labels to the vertical tabs of the Properties editor would significantly increase the amount of needed space, making them a hassle to deal with.

    Often it's suggested to remove labels to save space when there isn't an actual lack of space. Critically judge the trade-offs of that decision, and consider the other icon guidelines.

  • Icons without label may be used to reduce prominence of an option.

    Sometimes, using a label increases the size of a UI element so that it looks way more visually important than it should be. In such cases, an icon without label can be used to reduce its prominence. However, first consider moving the element to a less prominent location, such as a menu or sidebar.

  • Icons without label may be used to provide additional information, such as indicating status or type of content.

    A status indication, like "animated" or "modified by a library override" adds useful context. So do warning/error icons when there's a need to indicate a problem or warning.

    Using labels for such indicators would take space and distract from the main content. Therefore it's better to omit the label. However, give the icon a tooltip, as the following guideline explains.

  • When using an icon without label, give it a tooltip.

    Icons are often displayed without any label for aesthetic, or space saving reasons. The meaning of icons is often less obvious than it seems. Solve this by giving the icon a tooltip.

    Tool icons display their name, description and shortcut in a tooltip.

    When the icon symbolizes some status, that should be explained in the tooltip as well:

    An error icon tooltip can explain the reason for the error.

  • Use icons as visual anchors to structure content.

    Research suggests that users remember the location of icons more than the actual icon itself. This can be "exploited" to visually structure content. An icon can serve as a visual anchor. For example, a more prominent play icon can quickly indicate a blob of playback control buttons. Or menu sections can be differentiated quickly by placing a single anchoring icon (see the following guideline).

  • Do not add icons to every menu entry, use them as visual anchors.

    When using many icons inside a menu (or any other UI element), that adds a lot of visual noise. Individual icons "drown" in that noise and loose meaning. It becomes harder to focus a single icon and distinguish it from other similar ones.

    As mentioned in the previous guideline, use icons as visual anchors to structure content. Only add icons to the first item in a section of menu entries.

    By only adding icons to the first item in a section, the icon helps quickly locating and describing the section.

    If an action has a commonly used icon associated with it (e.g. copying, pasting or deleting), users may expect to find that specific icon. It should therefore be included, even if more items in the section have an icon already. Similarly, some menus let users choose from a bunch of variants where each has a dedicated icon that we show in other places. In these cases the icon should be included too.

    The menu to add constraints lets users choose the type of constraint to add. Each has its dedicated icon that should be displayed

  • Do not reuse icons for different purposes.

    Slight variation of icons are fine. Composing an icon out of multiple other icons is fine as well. But generally the rule is: One icon for one thing.

  • Do not use the Blender logo on its own, unless it is referring to Blender itself.

    An icon may consist out of multiple symbols though, including the Blender logo if the icon indicates something as Blender specific.

Icon Design

Main Icon set

Tool Icons

The colors are used to convey different information to the icons. For instance:

  • Green: Added geometry
  • Red: Removed geometry.
  • Purple: Edited geometry.

Default Thumbnails/Previews