Icon button


A toolbar icon button is an icon that appears on a toolbar.


There are three types of toolbar icon buttons:

An action button triggers an action immediately on clicking it, e.g. the Open button.

A toggle button switches the state on clicking it, e.g. a button to show and hide warnings in the output tree.

A drop-down button has an arrow icon in the bottom right corner and opens a menu with actions or checkboxes. Use menu list guidelines for drop-down buttons.

When to use

Follow the rules for toolbar.

How to use

Provide a recognizable icon. Use an existing icon or create a new one using icon guidelines.

Provide a short and descriptive name for a toolbar icon button. Show a tooltip with the button name on mouse hover. Include a shortcut if there is one. See Context help for details.

Highlight a toolbar icon button on mouse hover. Highlight a toolbar icon button with a brighter color on clicking it.

  • Toggle buttons remains highlighted when they are in the switched on mode. Toggled on buttons do not change color on hover.

  • Drop-down buttons remain highlighted while the menu is opened.

If an action is not available in this context, disable the corresponding button and gray out the icon. For toolbar drop-down buttons, disable the arrow icon as well. Do not highlight a disabled icon on mouse hover.

Sizes and placement

Icons size is 16x16 px, icon selection is 22x22 px.

For guidelines on the space between toolbar icon buttons see Toolbar.