IconButton

IconButton allows users to take actions and make choices with a single click or tap. IconButtons use icons instead of text to convey available actions on a screen. IconButton is typically found in forms, dialogs and toolbars. 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, e.g "delete", "remove".

Mobile best practices

  • Avoid using a floating icon button if it obscures important information on the screen.
  • IconButton on mobile should primarily utilize the lg (48dp) size as the increased size will better accommodate tapping with a finger.

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

Accessibility

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
Accessible development on Android

Variants

Size

  1. lg (48pt)
    Large is the only size that should be used on Pinner surfaces.
  2. md (32pt)
    Medium is the size used on more dense UI such as business surfaces or internal tools.
  3. sm (24pt)
    Small IconButton should be used sparingly and only in places where the UI is very dense.
small IconButton

size = "sm"

medium IconButton

size = "md"

large IconButton

size = "lg"

Elevation

  1. Flat
    Flat components sit right on top of the background, with no elevation. Therefore they do not have a drop shadow.
  2. Floating
    Floating components are lifted off of the background, with high-emphasis elevation. They present with a drop shadow which can serve as an affordance for scrolling behavior.
flat IconButton

flat

floating IconButton

floating

Styling

For information on color, icons, roles and states, refer to the web IconButton documentation.

Writing

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