Component

Material Design 3 icon buttons tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

[Deprecated] Enabled
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Filled tonal icon button container sizemd.comp.filled-tonal-icon-button.container.size
40dp
Filled tonal icon button container widthmd.comp.filled-tonal-icon-button.container.width
40dp
Filled tonal icon button container heightmd.comp.filled-tonal-icon-button.container.height
40dp
Filled tonal icon button container shapemd.comp.filled-tonal-icon-button.container.shape
Full
Filled tonal icon button container colormd.comp.filled-tonal-icon-button.container.color
#E8DEF8
Filled tonal icon button unselected container colormd.comp.filled-tonal-icon-button.unselected.container.color
#E6E0E9
Filled tonal icon button selected container colormd.comp.filled-tonal-icon-button.selected.container.color
#E8DEF8
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal icon button icon sizemd.comp.filled-tonal-icon-button.icon.size
24dp
Filled tonal icon button icon colormd.comp.filled-tonal-icon-button.icon.color
#4A4458
Filled tonal icon button toggle unselected icon colormd.comp.filled-tonal-icon-button.toggle.unselected.icon.color
#49454F
Filled tonal icon button toggle selected icon colormd.comp.filled-tonal-icon-button.toggle.selected.icon.color
#4A4458
[Deprecated] Disabled
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Filled tonal icon button disabled container colormd.comp.filled-tonal-icon-button.disabled.container.color
#1D1B20
Filled tonal icon button disabled container opacitymd.comp.filled-tonal-icon-button.disabled.container.opacity
12%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal icon button disabled icon colormd.comp.filled-tonal-icon-button.disabled.icon.color
#1D1B20
Filled tonal icon button disabled icon opacitymd.comp.filled-tonal-icon-button.disabled.icon.opacity
38%
[Deprecated] Hovered
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Filled tonal icon button hover state layer colormd.comp.filled-tonal-icon-button.hover.state-layer.color
#4A4458
Filled tonal icon button toggle unselected hover state layer colormd.comp.filled-tonal-icon-button.toggle.unselected.hover.state-layer.color
#49454F
Filled tonal icon button toggle selected hover state layer colormd.comp.filled-tonal-icon-button.toggle.selected.hover.state-layer.color
#4A4458
Filled tonal icon button hover state layer opacitymd.comp.filled-tonal-icon-button.hover.state-layer.opacity
8%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal icon button hover icon colormd.comp.filled-tonal-icon-button.hover.icon.color
#4A4458
Filled tonal icon button toggle unselected hover icon colormd.comp.filled-tonal-icon-button.toggle.unselected.hover.icon.color
#49454F
Filled tonal icon button toggle selected hover icon colormd.comp.filled-tonal-icon-button.toggle.selected.hover.icon.color
#4A4458
[Deprecated] Focused
[Deprecated] Focus indicator
[Deprecated] Focus indicator tokens
TokenValue
Filled tonal icon button focus indicator colormd.comp.filled-tonal-icon-button.focus.indicator.color
#625B71
Filled tonal icon button focus indicator thicknessmd.comp.filled-tonal-icon-button.focus.indicator.thickness
3dp
Filled tonal icon button focus indicator offsetmd.comp.filled-tonal-icon-button.focus.indicator.outline.offset
2dp
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Filled tonal icon button focus state layer opacitymd.comp.filled-tonal-icon-button.focus.state-layer.opacity
10%
Filled tonal icon button focus state layer colormd.comp.filled-tonal-icon-button.focus.state-layer.color
#4A4458
Filled tonal icon button toggle unselected focus state layer colormd.comp.filled-tonal-icon-button.toggle.unselected.focus.state-layer.color
#49454F
Filled tonal icon button toggle selected focus state layer colormd.comp.filled-tonal-icon-button.toggle.selected.focus.state-layer.color
#4A4458
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal icon button focus icon colormd.comp.filled-tonal-icon-button.focus.icon.color
#4A4458
Filled tonal icon button toggle unselected focus icon colormd.comp.filled-tonal-icon-button.toggle.unselected.focus.icon.color
#49454F
Filled tonal icon button toggle selected focus icon colormd.comp.filled-tonal-icon-button.toggle.selected.focus.icon.color
#4A4458
[Deprecated] Pressed (ripple)
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Filled tonal icon button pressed state layer opacitymd.comp.filled-tonal-icon-button.pressed.state-layer.opacity
10%
Filled tonal icon button pressed state layer colormd.comp.filled-tonal-icon-button.pressed.state-layer.color
#4A4458
Filled tonal icon button toggle unselected pressed state layer colormd.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color
#49454F
Filled tonal icon button toggle selected pressed state layer colormd.comp.filled-tonal-icon-button.toggle.selected.pressed.state-layer.color
#4A4458
Icon
Icon tokens
TokenValue
Filled tonal icon button pressed icon colormd.comp.filled-tonal-icon-button.pressed.icon.color
#4A4458
Filled tonal icon button toggle unselected pressed icon colormd.comp.filled-tonal-icon-button.toggle.unselected.pressed.icon.color
#49454F
Filled tonal icon button toggle selected pressed icon colormd.comp.filled-tonal-icon-button.toggle.selected.pressed.icon.color
#4A4458