Icon buttons

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

Overview · Specs · Guidelines · Accessibility

Variants

1. Default icon button
2. Toggle icon button

Variant	M3	M3 Expressive
Default	Available	Available
Toggle (selection)	Available	Available

Configurations

1. Five sizes
2. Two shapes
3. Four color styles
4. Three widths

Category	Options	M3	M3 Expressive
Size	Small (default)	Available	Available
Size	XS, M, L, XL	--	Available
Shape	Round (default)	Available	Available
Shape	Square	--	Available
Color	Filled (default), tonal, outlined, standard	Available	Available
Width	Default	Available	Available
Width	Narrow, wide	--	Available

Tokens & specs

Icon button token sets are organized by common tokens, color, and size. Select the token set from the table’s menu. Learn about design tokens

Design tokens

Token table

Machine-readable relationship table

Icon buttons tokens · 9 token sets · 201 tokens · live token table · DSDB TOKEN_TABLE.0fe2282006ae098b

• Default context: Theme: Light · Platform: Android · Audience: 3P · Motion scheme: Standard · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Font: Static · Language height: Small
• Other contexts: Theme: Dark · Motion scheme: Expressive · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.
• Token sets requested by the page but missing from the data module: Icon button

Icon button - Color - Filled · md.comp.icon-button.filled · 31 tokens

For filled icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.icon-button.filled.container.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled	md.comp.icon-button.filled.unselected.container.color	Color	md.sys.color.surface-container → md.ref.palette.neutral94	#F3EDF7	Dark: #211F26 via md.ref.palette.neutral12
Enabled	md.comp.icon-button.filled.selected.container.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled	md.comp.icon-button.filled.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Enabled	md.comp.icon-button.filled.unselected.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled	md.comp.icon-button.filled.selected.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Disabled	md.comp.icon-button.filled.disabled.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled	md.comp.icon-button.filled.disabled.container.opacity	Opacity	—	0.1	—
Disabled	md.comp.icon-button.filled.disabled.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled	md.comp.icon-button.filled.disabled.icon.opacity	Opacity	—	0.38	—
Hovered	md.comp.icon-button.filled.hovered.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Hovered	md.comp.icon-button.filled.unselected.hovered.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.filled.selected.hovered.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Hovered	md.comp.icon-button.filled.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.icon-button.filled.hovered.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Hovered	md.comp.icon-button.filled.unselected.hovered.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.filled.selected.hovered.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Focused	md.comp.icon-button.filled.focused.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Focused	md.comp.icon-button.filled.unselected.focused.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.filled.selected.focused.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Focused	md.comp.icon-button.filled.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.icon-button.filled.focused.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Focused	md.comp.icon-button.filled.unselected.focused.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.filled.selected.focused.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Pressed	md.comp.icon-button.filled.pressed.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Pressed	md.comp.icon-button.filled.unselected.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.filled.selected.pressed.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Pressed	md.comp.icon-button.filled.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.icon-button.filled.pressed.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Pressed	md.comp.icon-button.filled.unselected.pressed.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.filled.selected.pressed.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20

Icon button - Color - Tonal · md.comp.icon-button.tonal · 31 tokens

For tonal icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.icon-button.tonal.container.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Enabled	md.comp.icon-button.tonal.unselected.container.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Enabled	md.comp.icon-button.tonal.selected.container.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Enabled	md.comp.icon-button.tonal.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled	md.comp.icon-button.tonal.unselected.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled	md.comp.icon-button.tonal.selected.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Disabled	md.comp.icon-button.tonal.disabled.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled	md.comp.icon-button.tonal.disabled.container.opacity	Opacity	—	0.1	—
Disabled	md.comp.icon-button.tonal.disabled.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled	md.comp.icon-button.tonal.disabled.icon.opacity	Opacity	—	0.38	—
Hovered	md.comp.icon-button.tonal.hovered.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered	md.comp.icon-button.tonal.unselected.hovered.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered	md.comp.icon-button.tonal.selected.hovered.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Hovered	md.comp.icon-button.tonal.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.icon-button.tonal.hovered.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered	md.comp.icon-button.tonal.unselected.hovered.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered	md.comp.icon-button.tonal.selected.hovered.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Focused	md.comp.icon-button.tonal.focused.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused	md.comp.icon-button.tonal.unselected.focused.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused	md.comp.icon-button.tonal.selected.focused.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Focused	md.comp.icon-button.tonal.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.icon-button.tonal.focused.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused	md.comp.icon-button.tonal.unselected.focused.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused	md.comp.icon-button.tonal.selected.focused.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Pressed	md.comp.icon-button.tonal.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed	md.comp.icon-button.tonal.unselected.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed	md.comp.icon-button.tonal.selected.pressed.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Pressed	md.comp.icon-button.tonal.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.icon-button.tonal.pressed.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed	md.comp.icon-button.tonal.unselected.pressed.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed	md.comp.icon-button.tonal.selected.pressed.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20

Icon button - Color - Outlined · md.comp.icon-button.outlined · 33 tokens

For outlined icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.icon-button.outlined.outline.color	Color	md.sys.color.outline-variant → md.ref.palette.neutral-variant80	#CAC4D0	Dark: #49454F via md.ref.palette.neutral-variant30 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30
Enabled	md.comp.icon-button.outlined.unselected.outline.color	Color	md.sys.color.outline-variant → md.ref.palette.neutral-variant80	#CAC4D0	Dark: #49454F via md.ref.palette.neutral-variant30 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30
Enabled	md.comp.icon-button.outlined.selected.container.color	Color	md.sys.color.inverse-surface → md.ref.palette.neutral20	#322F35	Dark: #E6E0E9 via md.ref.palette.neutral90
Enabled	md.comp.icon-button.outlined.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled	md.comp.icon-button.outlined.unselected.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled	md.comp.icon-button.outlined.selected.icon.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Disabled	md.comp.icon-button.outlined.disabled.outline.color	Color	md.sys.color.outline-variant → md.ref.palette.neutral-variant80	#CAC4D0	Dark: #49454F via md.ref.palette.neutral-variant30 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30
Disabled	md.comp.icon-button.outlined.unselected.disabled.outline.color	Color	md.sys.color.outline-variant → md.ref.palette.neutral-variant80	#CAC4D0	Dark: #49454F via md.ref.palette.neutral-variant30 Medium contrast: #79747E via md.ref.palette.neutral-variant50 High contrast: #49454F via md.ref.palette.neutral-variant30
Disabled	md.comp.icon-button.outlined.selected.disabled.container.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled	md.comp.icon-button.outlined.selected.disabled.container.opacity	Opacity	—	0.1	—
Disabled	md.comp.icon-button.outlined.disabled.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled	md.comp.icon-button.outlined.disabled.icon.opacity	Opacity	—	0.38	—
Hovered	md.comp.icon-button.outlined.hovered.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.outlined.unselected.hovered.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.outlined.selected.hovered.state-layer.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Hovered	md.comp.icon-button.outlined.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.icon-button.outlined.hovered.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.outlined.unselected.hovered.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.outlined.selected.hovered.icon.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Focused	md.comp.icon-button.outlined.focused.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.outlined.unselected.focused.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.outlined.selected.focused.state-layer.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Focused	md.comp.icon-button.outlined.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.icon-button.outlined.focused.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.outlined.unselected.focused.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.outlined.selected.focused.icon.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Pressed	md.comp.icon-button.outlined.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.outlined.unselected.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.outlined.selected.pressed.state-layer.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Pressed	md.comp.icon-button.outlined.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.icon-button.outlined.pressed.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.outlined.unselected.pressed.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.outlined.selected.pressed.icon.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100

Icon button - Color - Standard · md.comp.icon-button.standard · 26 tokens

For standard icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.icon-button.standard.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled	md.comp.icon-button.standard.unselected.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled	md.comp.icon-button.standard.selected.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Disabled	md.comp.icon-button.standard.disabled.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Disabled	md.comp.icon-button.standard.disabled.icon.opacity	Opacity	—	0.38	—
Hovered	md.comp.icon-button.standard.hovered.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.standard.unselected.hovered.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.standard.selected.hovered.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Hovered	md.comp.icon-button.standard.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.icon-button.standard.hovered.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.standard.unselected.hovered.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Hovered	md.comp.icon-button.standard.selected.hovered.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused	md.comp.icon-button.standard.focused.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.standard.unselected.focused.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.standard.selected.focused.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused	md.comp.icon-button.standard.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.icon-button.standard.focused.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.standard.unselected.focused.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Focused	md.comp.icon-button.standard.selected.focused.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Pressed	md.comp.icon-button.standard.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.standard.unselected.pressed.state-layer.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.standard.selected.pressed.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Pressed	md.comp.icon-button.standard.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.icon-button.standard.pressed.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.standard.unselected.pressed.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Pressed	md.comp.icon-button.standard.selected.pressed.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20

Icon button - Size - Xsmall · md.comp.icon-button.xsmall · 16 tokens

For XS icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.icon-button.xsmall.container.height	Length	—	32dp	—
All tokens	md.comp.icon-button.xsmall.icon.size	Length	—	20dp	—
All tokens	md.comp.icon-button.xsmall.narrow.leading-space	Length	md.sys.measurement.space50	4dp	—
All tokens	md.comp.icon-button.xsmall.narrow.trailing-space	Length	md.sys.measurement.space50	4dp	—
All tokens	md.comp.icon-button.xsmall.default.leading-space	Length	md.sys.measurement.space75	6dp	—
All tokens	md.comp.icon-button.xsmall.default.trailing-space	Length	md.sys.measurement.space75	6dp	—
All tokens	md.comp.icon-button.xsmall.wide.leading-space	Length	md.sys.measurement.space125	10dp	—
All tokens	md.comp.icon-button.xsmall.wide.trailing-space	Length	md.sys.measurement.space125	10dp	—
All tokens	md.comp.icon-button.xsmall.container.shape.round	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
All tokens	md.comp.icon-button.xsmall.container.shape.square	Shape	md.sys.shape.corner.medium	Rounded corners 12dp	—
All tokens	md.comp.icon-button.xsmall.outlined.outline.width	Length	—	1dp	—
All tokens	md.comp.icon-button.xsmall.pressed.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
All tokens	md.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.damping	Duration	md.sys.motion.spring.fast.spatial.damping	0.9	Expressive: 0.6 via md.sys.motion.spring.fast.spatial.damping
All tokens	md.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.stiffness	Duration	md.sys.motion.spring.fast.spatial.stiffness	1400	Expressive: 800 via md.sys.motion.spring.fast.spatial.stiffness
All tokens	md.comp.icon-button.xsmall.selected.container.shape.round	Shape	md.sys.shape.corner.medium	Rounded corners 12dp	—
All tokens	md.comp.icon-button.xsmall.selected.container.shape.square	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—

Icon button - Size - Small · md.comp.icon-button.small · 16 tokens

For small icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.icon-button.small.container.height	Length	—	40dp	—
All tokens	md.comp.icon-button.small.icon.size	Length	—	24dp	—
All tokens	md.comp.icon-button.small.narrow.leading-space	Length	md.sys.measurement.space50	4dp	—
All tokens	md.comp.icon-button.small.narrow.trailing-space	Length	md.sys.measurement.space50	4dp	—
All tokens	md.comp.icon-button.small.default.leading-space	Length	md.sys.measurement.space100	8dp	—
All tokens	md.comp.icon-button.small.default.trailing-space	Length	md.sys.measurement.space100	8dp	—
All tokens	md.comp.icon-button.small.wide.leading-space	Length	md.sys.measurement.space175	14dp	—
All tokens	md.comp.icon-button.small.wide.trailing-space	Length	md.sys.measurement.space175	14dp	—
All tokens	md.comp.icon-button.small.container.shape.round	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
All tokens	md.comp.icon-button.small.container.shape.square	Shape	md.sys.shape.corner.medium	Rounded corners 12dp	—
All tokens	md.comp.icon-button.small.outlined.outline.width	Length	—	1dp	—
All tokens	md.comp.icon-button.small.pressed.container.shape	Shape	md.sys.shape.corner.small	Rounded corners 8dp	—
All tokens	md.comp.icon-button.small.pressed.container.corner-size.motion.spring.damping	Duration	md.sys.motion.spring.fast.spatial.damping	0.9	Expressive: 0.6 via md.sys.motion.spring.fast.spatial.damping
All tokens	md.comp.icon-button.small.pressed.container.corner-size.motion.spring.stiffness	Duration	md.sys.motion.spring.fast.spatial.stiffness	1400	Expressive: 800 via md.sys.motion.spring.fast.spatial.stiffness
All tokens	md.comp.icon-button.small.selected.container.shape.round	Shape	md.sys.shape.corner.medium	Rounded corners 12dp	—
All tokens	md.comp.icon-button.small.selected.container.shape.square	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—

Icon button - Size - Medium · md.comp.icon-button.medium · 16 tokens

For medium icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.icon-button.medium.container.height	Length	—	56dp	—
All tokens	md.comp.icon-button.medium.icon.size	Length	—	24dp	—
All tokens	md.comp.icon-button.medium.narrow.leading-space	Length	md.sys.measurement.space150	12dp	—
All tokens	md.comp.icon-button.medium.narrow.trailing-space	Length	md.sys.measurement.space150	12dp	—
All tokens	md.comp.icon-button.medium.default.leading-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.icon-button.medium.default.trailing-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.icon-button.medium.wide.leading-space	Length	md.sys.measurement.space300	24dp	—
All tokens	md.comp.icon-button.medium.wide.trailing-space	Length	md.sys.measurement.space300	24dp	—
All tokens	md.comp.icon-button.medium.container.shape.round	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
All tokens	md.comp.icon-button.medium.container.shape.square	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
All tokens	md.comp.icon-button.medium.outlined.outline.width	Length	—	1dp	—
All tokens	md.comp.icon-button.medium.pressed.container.shape	Shape	md.sys.shape.corner.medium	Rounded corners 12dp	—
All tokens	md.comp.icon-button.medium.pressed.container.corner-size.motion.spring.damping	Duration	md.sys.motion.spring.fast.spatial.damping	0.9	Expressive: 0.6 via md.sys.motion.spring.fast.spatial.damping
All tokens	md.comp.icon-button.medium.pressed.container.corner-size.motion.spring.stiffness	Duration	md.sys.motion.spring.fast.spatial.stiffness	1400	Expressive: 800 via md.sys.motion.spring.fast.spatial.stiffness
All tokens	md.comp.icon-button.medium.selected.container.shape.round	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
All tokens	md.comp.icon-button.medium.selected.container.shape.square	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—

Icon button - Size - Large · md.comp.icon-button.large · 16 tokens

For large icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.icon-button.large.container.height	Length	—	96dp	—
All tokens	md.comp.icon-button.large.icon.size	Length	—	32dp	—
All tokens	md.comp.icon-button.large.narrow.leading-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.icon-button.large.narrow.trailing-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.icon-button.large.default.leading-space	Length	md.sys.measurement.space400	32dp	—
All tokens	md.comp.icon-button.large.default.trailing-space	Length	md.sys.measurement.space400	32dp	—
All tokens	md.comp.icon-button.large.wide.leading-space	Length	md.sys.measurement.space600	48dp	—
All tokens	md.comp.icon-button.large.wide.trailing-space	Length	md.sys.measurement.space600	48dp	—
All tokens	md.comp.icon-button.large.container.shape.round	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
All tokens	md.comp.icon-button.large.container.shape.square	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp	—
All tokens	md.comp.icon-button.large.outlined.outline.width	Length	—	2dp	—
All tokens	md.comp.icon-button.large.pressed.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
All tokens	md.comp.icon-button.large.pressed.container.corner-size.motion.spring.damping	Duration	md.sys.motion.spring.fast.spatial.damping	0.9	Expressive: 0.6 via md.sys.motion.spring.fast.spatial.damping
All tokens	md.comp.icon-button.large.pressed.container.corner-size.motion.spring.stiffness	Duration	md.sys.motion.spring.fast.spatial.stiffness	1400	Expressive: 800 via md.sys.motion.spring.fast.spatial.stiffness
All tokens	md.comp.icon-button.large.selected.container.shape.round	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp	—
All tokens	md.comp.icon-button.large.selected.container.shape.square	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—

Icon button - Size - Xlarge · md.comp.icon-button.xlarge · 16 tokens

For XL icon buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.icon-button.xlarge.container.height	Length	—	136dp	—
All tokens	md.comp.icon-button.xlarge.icon.size	Length	—	40dp	—
All tokens	md.comp.icon-button.xlarge.narrow.leading-space	Length	md.sys.measurement.space400	32dp	—
All tokens	md.comp.icon-button.xlarge.narrow.trailing-space	Length	md.sys.measurement.space400	32dp	—
All tokens	md.comp.icon-button.xlarge.default.leading-space	Length	md.sys.measurement.space600	48dp	—
All tokens	md.comp.icon-button.xlarge.default.trailing-space	Length	md.sys.measurement.space600	48dp	—
All tokens	md.comp.icon-button.xlarge.wide.leading-space	Length	md.sys.measurement.space900	72dp	—
All tokens	md.comp.icon-button.xlarge.wide.trailing-space	Length	md.sys.measurement.space900	72dp	—
All tokens	md.comp.icon-button.xlarge.container.shape.round	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
All tokens	md.comp.icon-button.xlarge.container.shape.square	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp	—
All tokens	md.comp.icon-button.xlarge.outlined.outline.width	Length	—	3dp	—
All tokens	md.comp.icon-button.xlarge.pressed.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
All tokens	md.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.damping	Duration	md.sys.motion.spring.fast.spatial.damping	0.9	Expressive: 0.6 via md.sys.motion.spring.fast.spatial.damping
All tokens	md.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.stiffness	Duration	md.sys.motion.spring.fast.spatial.stiffness	1400	Expressive: 800 via md.sys.motion.spring.fast.spatial.stiffness
All tokens	md.comp.icon-button.xlarge.selected.container.shape.round	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp	—
All tokens	md.comp.icon-button.xlarge.selected.container.shape.square	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—

Anatomy

1. Icon 
2. Container

Color

Color values are implemented through design tokens. For designers, this means working with color values that correspond with tokens; in implementation, a color value will be a token that references a value.

There are four built-in color styles: filled, tonal, outlined, and standard. Default and toggle buttons use different color roles per style.

Note

These color roles were chosen to create design coherence and familiarity. Other color roles can be used as long as the container and text have a 3:1 contrast ratio. For example, tertiary and on tertiary.

A: Filled, B: Tonal, C: Outlined, D: Standard

1. Default
2. Toggle, unselected
3. Toggle, selected

	1. Default	2. Toggle, unselected	3. Toggle, selected
Filled container Filled icon	Primary On primary	Surface container On surface variant	Primary On primary
Tonal container Tonal icon	Secondary container On secondary container	Secondary container On secondary container	Secondary On secondary
Outlined container Outlined icon	Outline variant (outline) On surface variant	Outline variant (outline) On surface variant	Inverse surface Inverse on surface
Standard icon	On surface variant	On surface variant	Primary

States

States are visual representations used to communicate the status of a component or interactive element. State layers slightly change button color. Disabled states have different base colors. View tokens for details

Filled button states

Default

1. Enabled 
2. Disabled (10% state layer)
3. Hovered (8% state layer)
4. Focused (10% state layer)
5. Pressed (10% state layer)

Toggle

A: Unselected. B: Selected

1. Enabled 
2. Disabled (10% state layer)
3. Hovered (8% state layer)
4. Focused (10% state layer)
5. Pressed (10% state layer)

Tonal button states

Default

1. Enabled 
2. Disabled (10% state layer)
3. Hovered (8% state layer)
4. Focused (10% state layer)
5. Pressed (10% state layer)

Toggle

A: Unselected. B: Selected

1. Enabled 
2. Disabled (10% state layer)
3. Hovered (8% state layer)
4. Focused (10% state layer)
5. Pressed (10% state layer)

Outlined button states

Default

1. Enabled 
2. Disabled (10% state layer)
3. Hovered (8% state layer)
4. Focused (10% state layer)
5. Pressed (10% state layer)

Toggle

A: Unselected. B: Selected

1. Enabled 
2. Disabled (10% state layer)
3. Hovered (8% state layer)
4. Focused (10% state layer)
5. Pressed (10% state layer)

Standard icon button states

The standard icon button’s container is invisible at rest, but visible when the state layer is applied.

Default

1. Enabled 
2. Disabled (10% state layer)
3. Hovered (8% state layer)
4. Focused (10% state layer)
5. Pressed (10% state layer)

Toggle

A: Unselected. B: Selected

1. Enabled 
2. Disabled (10% state layer)
3. Hovered (8% state layer)
4. Focused (10% state layer)
5. Pressed (10% state layer)

Shape morph

Pressed state

While pressed, icon buttons can morph to become more square. 

Both round and square icon buttons should have the same pressed shape radius.

The corner radius value differs for each button size. See full icon button corner measurements

A. Round, B. Square

1. Enabled
2. Hovered
3. Pressed

When selected

In addition to changing shape when pressed, toggle icon buttons also change the resting shape from round (unselected) to square (selected) by default.

If the resting shape is square, the selected shape should be round.

A. Round, B. Square

1. Enabled
2. Hovered
3. Pressed
4. Selected

Measurements

A. Extra small  B. Small  C. Medium  D. Large  E. Extra large

1. Icon size
2. Default width size 
3. Narrow width size  
4. Wide width size

Target sizes

Extra small and small icon buttons must have a target size of 48x48dp or larger to be accessible.

A. Extra small icon button size  B. Small icon button size

1. Narrow width 
2. Default width
3. Wide width

Button corner radius

	XS	S	M	L	XL
A. Round button	Full	Full	Full	Full	Full
B. Square button	12dp	12dp	16dp	28dp	28dp
C. Pressed state	8dp	8dp	12dp	16dp	16dp

Baseline tokens

Use the table's menu to select a token set. Filled, tonal, and outlined icon button tokens are now deprecated in favor of the new token sets. All other tokens are still available in the module at the top of the page.

Design tokens

Token table

Machine-readable relationship table

Icon buttons tokens · 3 token sets · 114 tokens · live token table · DSDB TOKEN_TABLE.0fe2282006ae098b

• Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

[Deprecated] Icon button - Filled · md.comp.filled-icon-button · 39 tokens

This token set is deprecated. Use `md.comp.icon-button.filled` instead.

Group	Token	Type	Reference chain	Resolved value	Other contexts
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-icon-button.container.size (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-icon-button.container.width (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-icon-button.container.height (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-icon-button.container.shape (deprecated)	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-icon-button.container.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-icon-button.unselected.container.color (deprecated)	Color	md.sys.color.surface-container-highest → md.ref.palette.neutral90	#E6E0E9	Dark: #36343B via md.ref.palette.neutral22
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-icon-button.selected.container.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Enabled › [Deprecated] Icon	md.comp.filled-icon-button.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Enabled › [Deprecated] Icon	md.comp.filled-icon-button.icon.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Enabled › [Deprecated] Icon	md.comp.filled-icon-button.toggle.unselected.icon.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Enabled › [Deprecated] Icon	md.comp.filled-icon-button.toggle.selected.icon.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Disabled › [Deprecated] Container	md.comp.filled-icon-button.disabled.container.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Disabled › [Deprecated] Container	md.comp.filled-icon-button.disabled.container.opacity (deprecated)	Opacity	—	0.12	—
[Deprecated] Disabled › [Deprecated] Icon	md.comp.filled-icon-button.disabled.icon.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Disabled › [Deprecated] Icon	md.comp.filled-icon-button.disabled.icon.opacity (deprecated)	Opacity	—	0.38	—
[Deprecated] Hovered › [Deprecated] State layer	md.comp.filled-icon-button.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] State layer	md.comp.filled-icon-button.hover.state-layer.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Hovered › [Deprecated] State layer	md.comp.filled-icon-button.toggle.unselected.hover.state-layer.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Hovered › [Deprecated] State layer	md.comp.filled-icon-button.toggle.selected.hover.state-layer.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Hovered › [Deprecated] Icon	md.comp.filled-icon-button.hover.icon.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Hovered › [Deprecated] Icon	md.comp.filled-icon-button.toggle.unselected.hover.icon.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Hovered › [Deprecated] Icon	md.comp.filled-icon-button.toggle.selected.hover.icon.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Focused › [Deprecated] State layer	md.comp.filled-icon-button.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
[Deprecated] Focused › [Deprecated] State layer	md.comp.filled-icon-button.focus.state-layer.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Focused › [Deprecated] State layer	md.comp.filled-icon-button.toggle.unselected.focus.state-layer.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Focused › [Deprecated] State layer	md.comp.filled-icon-button.toggle.selected.focus.state-layer.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Focused › [Deprecated] Icon	md.comp.filled-icon-button.focus.icon.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Focused › [Deprecated] Icon	md.comp.filled-icon-button.toggle.unselected.focus.icon.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Focused › [Deprecated] Icon	md.comp.filled-icon-button.toggle.selected.focus.icon.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.filled-icon-button.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.filled-icon-button.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.filled-icon-button.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.comp.filled-icon-button.pressed.state-layer.opacity (deprecated)	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.comp.filled-icon-button.pressed.state-layer.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.comp.filled-icon-button.toggle.unselected.pressed.state-layer.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.comp.filled-icon-button.toggle.selected.pressed.state-layer.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Pressed (ripple) › [Deprecated] Icon	md.comp.filled-icon-button.pressed.icon.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
[Deprecated] Pressed (ripple) › [Deprecated] Icon	md.comp.filled-icon-button.toggle.unselected.pressed.icon.color (deprecated)	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
[Deprecated] Pressed (ripple) › [Deprecated] Icon	md.comp.filled-icon-button.toggle.selected.pressed.icon.color (deprecated)	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20

[Deprecated] Icon button - Tonal · md.comp.filled-tonal-icon-button · 39 tokens

This token set is deprecated. Use `md.comp.icon-button.tonal` instead.

Group	Token	Type	Reference chain	Resolved value	Other contexts
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.container.size (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.container.width (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.container.height (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.container.shape (deprecated)	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.container.color (deprecated)	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.unselected.container.color (deprecated)	Color	md.sys.color.surface-container-highest → md.ref.palette.neutral90	#E6E0E9	Dark: #36343B via md.ref.palette.neutral22
[Deprecated] Enabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.selected.container.color (deprecated)	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
[Deprecated] Enabled › [Deprecated] Icon	md.comp.filled-tonal-icon-button.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Enabled › [Deprecated] Icon	md.comp.filled-tonal-icon-button.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Enabled › [Deprecated] Icon	md.comp.filled-tonal-icon-button.toggle.unselected.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Enabled › [Deprecated] Icon	md.comp.filled-tonal-icon-button.toggle.selected.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Disabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.disabled.container.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Disabled › [Deprecated] Container	md.comp.filled-tonal-icon-button.disabled.container.opacity (deprecated)	Opacity	—	0.12	—
[Deprecated] Disabled › [Deprecated] Icon	md.comp.filled-tonal-icon-button.disabled.icon.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Disabled › [Deprecated] Icon	md.comp.filled-tonal-icon-button.disabled.icon.opacity (deprecated)	Opacity	—	0.38	—
[Deprecated] Hovered › [Deprecated] State layer	md.comp.filled-tonal-icon-button.hover.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Hovered › [Deprecated] State layer	md.comp.filled-tonal-icon-button.toggle.unselected.hover.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Hovered › [Deprecated] State layer	md.comp.filled-tonal-icon-button.toggle.selected.hover.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Hovered › [Deprecated] State layer	md.comp.filled-tonal-icon-button.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] Icon	md.comp.filled-tonal-icon-button.hover.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Hovered › [Deprecated] Icon	md.comp.filled-tonal-icon-button.toggle.unselected.hover.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Hovered › [Deprecated] Icon	md.comp.filled-tonal-icon-button.toggle.selected.hover.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Focused › [Deprecated] State layer	md.comp.filled-tonal-icon-button.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
[Deprecated] Focused › [Deprecated] State layer	md.comp.filled-tonal-icon-button.focus.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Focused › [Deprecated] State layer	md.comp.filled-tonal-icon-button.toggle.unselected.focus.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Focused › [Deprecated] State layer	md.comp.filled-tonal-icon-button.toggle.selected.focus.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Focused › [Deprecated] Icon	md.comp.filled-tonal-icon-button.focus.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Focused › [Deprecated] Icon	md.comp.filled-tonal-icon-button.toggle.unselected.focus.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Focused › [Deprecated] Icon	md.comp.filled-tonal-icon-button.toggle.selected.focus.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.filled-tonal-icon-button.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.filled-tonal-icon-button.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.filled-tonal-icon-button.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.comp.filled-tonal-icon-button.pressed.state-layer.opacity (deprecated)	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.comp.filled-tonal-icon-button.pressed.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.comp.filled-tonal-icon-button.toggle.selected.pressed.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Pressed (ripple) › Icon	md.comp.filled-tonal-icon-button.pressed.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Pressed (ripple) › Icon	md.comp.filled-tonal-icon-button.toggle.unselected.pressed.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Pressed (ripple) › Icon	md.comp.filled-tonal-icon-button.toggle.selected.pressed.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100

[Deprecated] Icon button - Outlined · md.outlined-icon-button · 36 tokens

This token set is deprecated. Use `md.comp.icon-button.outlined` instead.

Group	Token	Type	Reference chain	Resolved value	Other contexts
[Deprecated] Enabled › [Deprecated] Container	md.outlined-icon-button.container.size (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.outlined-icon-button.container.width (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.outlined-icon-button.container.height (deprecated)	Length	—	40dp	—
[Deprecated] Enabled › [Deprecated] Container	md.outlined-icon-button.container.shape (deprecated)	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
[Deprecated] Enabled › [Deprecated] Container	md.outlined-icon-button.selected.container.color (deprecated)	Color	md.sys.color.inverse-surface → md.ref.palette.neutral20	#322F35	Dark: #E6E0E9 via md.ref.palette.neutral90
[Deprecated] Enabled › [Deprecated] Outline	md.outlined-icon-button.unselected.outline.color (deprecated)	Color	md.sys.color.outline → md.ref.palette.neutral-variant50	#79747E	Dark: #938F99 via md.ref.palette.neutral-variant60 Medium contrast: #49454F via md.ref.palette.neutral-variant30 High contrast: #322F37 via md.ref.palette.neutral-variant20
[Deprecated] Enabled › [Deprecated] Outline	md.outlined-icon-button.unselected.outline.width (deprecated)	Length	—	1dp	—
[Deprecated] Enabled › [Deprecated] Icon	md.outlined-icon-button.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Enabled › [Deprecated] Icon	md.outlined-icon-button.unselected.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Enabled › [Deprecated] Icon	md.outlined-icon-button.selected.icon.color (deprecated)	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
[Deprecated] Disabled › [Deprecated] Container	md.outlined-icon-button.disabled.selected.container.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Disabled › [Deprecated] Container	md.outlined-icon-button.disabled.selected.container.opacity (deprecated)	Opacity	—	0.12	—
[Deprecated] Disabled › [Deprecated] Icon	md.outlined-icon-button.disabled.icon.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Disabled › [Deprecated] Icon	md.outlined-icon-button.disabled.icon.opacity (deprecated)	Opacity	—	0.38	—
[Deprecated] Disabled › [Deprecated] Outline	md.outlined-icon-button.disabled.unselected.outline.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Disabled › [Deprecated] Outline	md.outlined-icon-button.disabled.unselected.outline.opacity (deprecated)	Opacity	—	0.12	—
[Deprecated] Disabled › [Deprecated] Outline	md.outlined-icon-button.disabled.outline.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Disabled › [Deprecated] Outline	md.outlined-icon-button.disabled.outline.opacity (deprecated)	Opacity	—	0.12	—
[Deprecated] Hovered › [Deprecated] State layer	md.outlined-icon-button.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] State layer	md.outlined-icon-button.unselected.hover.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Hovered › [Deprecated] State layer	md.outlined-icon-button.selected.hover.state-layer.color (deprecated)	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
[Deprecated] Hovered › [Deprecated] Icon	md.outlined-icon-button.unselected.hover.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Hovered › [Deprecated] Icon	md.outlined-icon-button.selected.hover.icon.color (deprecated)	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
[Deprecated] Focused › [Deprecated] State layer	md.outlined-icon-button.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Focused › [Deprecated] State layer	md.outlined-icon-button.unselected.focus.state-layer.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Focused › [Deprecated] State layer	md.outlined-icon-button.selected.focus.state-layer.color (deprecated)	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
[Deprecated] Focused › [Deprecated] Icon	md.outlined-icon-button.unselected.focus.icon.color (deprecated)	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
[Deprecated] Focused › [Deprecated] Icon	md.outlined-icon-button.selected.focus.icon.color (deprecated)	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
[Deprecated] Focused › [Deprecated] Focus indicator	md.outlined-icon-button.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
[Deprecated] Focused › [Deprecated] Focus indicator	md.outlined-icon-button.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.outlined-icon-button.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.outlined-icon-button.pressed.state-layer.opacity (deprecated)	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.outlined-icon-button.unselected.pressed.state-layer.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Pressed (ripple) › [Deprecated] State layer	md.outlined-icon-button.selected.pressed.state-layer.color (deprecated)	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
[Deprecated] Pressed (ripple) › Icon	md.outlined-icon-button.unselected.pressed.icon.color (deprecated)	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
[Deprecated] Pressed (ripple) › Icon	md.outlined-icon-button.selected.pressed.icon.color (deprecated)	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100