Icon Button

Icon buttons allow users to take actions, and make choices, with a single tap.

Icon buttons can take the form of a standard, emphasize, destructive, or disabled variant but most commonly will be styled as standard or destructive buttons.

Icon buttons have the same size and variant options as a button with a text label.

The button must have a minimum target size of 40x40px CSS pixels. This is to ensure that the button is large enough to be easily activated by users with motor impairments.

In dense layouts, many icon buttons can be placed next to each other to create a toolbar of popular actions.

Icon buttons are commonly used in other components, like top app bars and cards. These buttons should be used for common actions. Only display a few icon buttons at once.

Use an icon button when the purpose of your button may be easily understood using an icon in place of a text label.

Best practices:

• Verify that the button's purpose will still be understood using an icon without a text label.
• Consider your audience and the context where the button is being rendered.
• Use a tooltip with a text label for the button so users can hover or focus the button to read a button label.

Use icon buttons to display actions in a compact layout. Icon buttons can represent opening actions such as opening an overflow menu or search.

Use icon buttons to represent binary actions that can be toggled on and off, such as favorite or bookmark.