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