IconButton

IconButton allows users to take actions and make choices with a single tap. IconButtons use icons instead of text to convey available actions on a screen. Some buttons are specialized for particular tasks, such as navigation or presenting menus.

also known as Glyph button, Condensed Button

IconButton component

Usage guidelines

When to use
  • Interface space is limited. Prioritize using a Button if space is available
  • Triggering a Modal to complete a related task
  • Creating visual separation of actions in text-heavy content
  • Lower-emphasis actions that don't impede users from completing a task
When not to use
  • Displaying icons that don't have actions associated with them. Use an Icon instead
  • Displaying multiple IconButtons on a surface that uses the same icon for different actions
  • Text is better suited to convey the action and/or the icon isn't quickly recognizable by users
  • Destructive, high-emphasis actions, for example "delete", "remove"

Best practices

  • Avoid using a floating IconButton if it obscures important information on the screen
  • IconButton on mobile should primarily utilize the LG (44dp) size as the increased size will better accommodate tapping with a finger
  • When using IconButton on top of images, use a variant with background to ensure readability and accessible contrast

For general IconButton best practices, refer to the IconButton web documentation.

Accessibility

Ensure IconButton have a label describing the intent of the action. For example, use "Add Pin to board" instead of "Add icon".

People use Android’s accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessbile design on Android

, Opens a new tab

Accessible development on Android
, Opens a new tab

Design tokens

Use these tokens for applying size and color styles to IconButton.


Please note: Icons on IconButton have a limited range of colors and sizes compared to regular icons, as they are different components and have particular usage cases. See Icon for additional information.

Anatomy

IconButtons use icons instead of text to convey available actions on a screen. Some buttons are specialized for particular tasks, such as navigation or presenting menus. Icons(.svg viewbox) dimensions are the same for all icons regardless of the size of the vector asset inside of the container. See Icon for more information.


Variants

Size

Size specs: Container


Size specs: Icon


Size use cases

  1. LG (44dp)
    Large is the only size that should be used on Pinner surfaces.
  2. MD (32dp)
    Medium is the size used on more dense UI such as business surfaces or internal tools.
  3. SM (24dp)
    Small IconButton should be used sparingly and only in places where the UI is very dense.

Color

Icon colors are semantic—they have a specific meaning and aren't arbitrary. There is no disabled color for icons, as that is handled by the button state that an icon is in.

Light mode


Dark mode


Elevation

For elevated IconButton, we suggest using the IconButtonFloating component.

Writing

For writing best practices, refer to the content standards.

Do
  • Use a descriptive label to describe the IconButton action by beginning with a verb
Don't
  • Use the words "image" or "icon" in the description label; instead, prefer to use verbs that describe the action. For example "Save" or "Edit"
Edit page on GitHub