Icon Button

The Icon Button is used to provide a clear and concise visual representation with a complementary action. It combines a clear icon allowing users to perform specific actions with a single click.

Interactive demo

This demo lets you preview the Icon Button and configuration options.

<CodeViewerExample>
  <IconButton>
    <Icon icon="information" />
  </IconButton>
</CodeViewerExample>

Usage

The Icon Button component should be used when there is a need for a simple and recognizable icon that represents a specific action or functionality.

Less is more

Take decision on what to hide and what not to hide, using the Button Icon for this is perfect.

Hide/toggle for less clutter

The Icon Button component can be used when there is a need to hide or toggle less important information, providing a more focused and clutter-free user interface.

Content

Do

Use a clear icon that effectively communicates the intended action or functionality. Choose icons that are easily recognizable and visually distinct.

Don't

Use icons that do not communicate the intended action or functionality clearly. Don’t select icons that are ambiguous or confusing, as they may lead to user frustration or misunderstanding.

Do

The Icon Button component is primarily used to provide secondary or non-primary actions within a user interface.

Don't

It should not be used as the primary action. For primary actions with only an icon, the Button (only icon) component and its variant should be utilized instead.

Anatomy

The anatomy of the Icon Button is simple, featuring a container measuring 24x24 pixels that houses a symbol. When pressed, the button reveals a circular background (bigger than 24x24), subtly hinting at the action it represents. This minimalist design ensures clarity and enhances user interaction, making it intuitive and visually appealing.

Icon

A. - Icon

Container

B. – Container (When pressed)

Formatting

Inverted

Use the default Icon Button on light surfaces and ensure it meets a11y guidelines. Use the inverted variant on darker surfaces.

Sizes

24px (Default)

The Icon Button component is designed to be used at a default size of 24 pixels (px). It is not recommended to use the Icon Button component at larger sizes, as it may negatively impact the visual harmony and consistency within the user interface.

Examples of proper usage

In the examples below, we have two images showcasing different scenarios. The first image demonstrates the action of hiding additional information, while the second image illustrates the action of opening or revealing more information.

1Hiding details for simplicity

Example showcasing how the Icon Button in Lotto hides additional information about 'Joker' for a clutter-free user interface:

2Container

Example of a Icon Button triggering the opening of a contextual dialog when clicked.

1Hiding details for simplicity

Example of how the Icon Button is used in the login feed to hide additional information about 'Bank-id'.

2Container

Example showcasing how the Icon Button can trigger the opening of a dialog when clicked.

Quick and simple actions

1Like/Favourite

The Icon Button can be used to enable quick and easy actions, such as liking or favoriting content.

2Selected State(filled)

In the selected state, the Icon Button appears differently to show that it's active. The filled icon indicates that an option has been chosen or selected.

Related

Components – legacy

Button

Foundation

Iconography

Components – legacy

Dialog