Round buttons with only a symbol, for frequent actions in toolbars, rows and headers.

When to use

Toolbar actions such as refresh or more, row actions such as edit or details, and the close button of a sheet.

Best practices

  • Every icon button has an accessible label and a tooltip with the same words.
  • Three sizes, 28, 36 and 44 points, which grow automatically on touch screens.
  • In a row, actions share one style: quiet tertiary symbols with a hover fill.
  • “More” (an ellipsis symbol) opens a menu of the remaining actions.

Avoid

Actions people use rarely, or can’t guess from the symbol. Give those a title.