An icon button is a small image that represents a command in a symbolic manner.   

Example of icon buttons



By clicking on an icon button, users can perform the corresponding action.

To make them easy to use, a tooltip with more information can be used when hover.

Icon button in pane header

To add action related to controlling the pane, one or more icon button can be placed on the right side of the pane header. 



By default, button icons shall be grey with 62% opacity.


Button icons shall be provided in 14x14px PNG and in a scalable vector file for all larger sizes than 14×14.

Related pages

A button is a clickable component that triggers an action when pressed.
The pane header allows users to quickly understand the purpose of each pane and their relationship to each other.