Icon buttons

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

Overview · Specs · Guidelines · Accessibility

• Icon buttons must use a system icon with a clear meaning
• Two variants: default and toggle
• Many configurations: Color, size, width, and shape
• On web, display a tooltip describing the action while hovering
• In toggle buttons, use the outlined style of an icon for the unselected state, and the filled style for the selected state

Standard, filled unselected, filled selected, filled tonal, and outlined icon buttons

Availability & resources

Type	Resource	Status
Design	Design Kit (Figma)	Available
Implementation	Flutter	Available
Implementation	Jetpack Compose	Available
Implementation	Jetpack Compose: Expressive	Available
Implementation	Android Views (MDC-Android)	Available
Implementation	Android Views (MDC-Android): Expressive	Available
Implementation	Web	Available
Implementation	Web: Expressive	Unavailable

M3 Expressive update

May 2025

Icon buttons now have a wider variety of shapes and sizes, changing shape when selected. When placed in button groups, icon buttons interact with each other when pressed. More on M3 Expressive

Variants and naming:

• Default and toggle (selection)
• Color styles are now configurations. (filled, tonal, outlined, standard)

Shapes:

• Round and square options
• Shape morphs when pressed
• Shape morphs when selected

Sizes:

• Extra small
• Small (default)
• Medium
• Large
• Extra large

Widths: 

• Narrow
• Default
• Wide

1. Five sizes
2. Two shapes
3. Three widths

Differences from M2

• Color: New color mappings and compatibility with dynamic color
• Variants and naming: Icon buttons were called toggle buttons. There are now two variants of icon buttons: default and toggle.

1. Default icon buttons
2. Toggle icon buttons