Icon Button

Icon buttons help users take supplementary actions with a single tap.

Design documented

The component is fully documented

React documented

Flutter documented

Design

Is the design finished and component available in Figma library?

Up to date

React

Is new design vision part implemented using new tokens?

Up to date

Flutter

Is new design vision part implemented using new tokens?

Up to date

Introduction

Icon buttons are small graphical representations of specific actions or functionalities that are commonly used in user interfaces.

There are several reasons why icon buttons are widely used in user interfaces:

  1. Space optimization: Icon buttons allow for efficient use of limited screen space, especially in mobile applications or websites where screen real estate is at a premium. By using icons instead of lengthy text labels, designers can convey actions or options concisely.
  2. Internationalization and language independence: Icons can transcend language barriers, making them particularly useful in applications with a global audience. Unlike text labels, which may require translation or localization efforts, icons have the potential to be universally understood.
  3. Enhanced usability: When used appropriately, icon buttons can improve the usability of an interface. Familiar icons with consistent meanings across applications or platforms reduce the cognitive load on users, as they can rely on their prior knowledge and experiences.

Releated components