Hero Image


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.

    <Icon icon="information" />


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

Icon button

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

Hide/toggle for less clutter

Icon button with speech bubble

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.


Do:Use a clear icon.


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

Don’t: Unclear icons.


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:Use as a compliment to clarify actions or information .


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

Don’t: Use as a primary button.


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.


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 anatomy

A. - Icon


Icon clicked anatomy

B. – Container (When pressed)



Default and inverted icon button

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


24px (Default)

Icon button sizes with 24 at the bottom and to the right

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

Icon button containig additional information

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


Icon triggering a dialog

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

1Hiding details for simplicity

Icon button used in login-feed

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


Icon button triggering a dialog opening

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

Quick and simple actions


Icon button

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

2Selected State(filled)

Icon button active

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.