Icon buttons

They provide the user with visual iconography that is typically used to invoke an event or action, allow users to take actions, navigate and make choices with a single tap.

When to use

Use icon buttons when at least two out of the following three conditions apply:

  • Space is very limited and need to save space.
  • The icons are standardized and recognizable.
  • The icon represents an object with a strong physical analog or a visual attribute (e.g., a cart icon to access to shopping cart).

When don't use

Use a button instead of icon button when is a principal action and have enough space for add it.

Use a link instead of icon button when have enough space for add it.

Main elements

Icon

The icon that represents an object with a strong physical analog or a visual attribute (e.g., a cart icon to access to shopping car) or a universal symbols that we can expect most people understand intuitively (Include the X, plus (+) and minus (–) signs, and arrows)

Behaviors

  • Cart icon has a related with a counter component, is a badge with the number of products for the current order, it can be appear (increase or decrease depending number of products within).
  • Tap search icon button apply an action to object and expand the search bar.

Some icon buttons have for a special behavior:

  • Apply an action to an object or page, e.g. close, go back.
  • Trigger a new element to appear on the page, e.g. Search bar.

Did this page help you?