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.

Enabled
Enabled tokens
TokenValue
Icon button outlined colormd.comp.icon-button.outlined.outline.color
#CAC4D0
Icon button outlined color - toggle (unselected)md.comp.icon-button.outlined.unselected.outline.color
#CAC4D0
Icon button outlined container color - toggle (selected)md.comp.icon-button.outlined.selected.container.color
#322F35
Icon button outlined icon colormd.comp.icon-button.outlined.icon.color
#49454F
Icon button outlined icon color - toggle (unselected)md.comp.icon-button.outlined.unselected.icon.color
#49454F
Icon button outlined icon color - toggle (selected)md.comp.icon-button.outlined.selected.icon.color
#F5EFF7
Disabled
Disabled tokens
TokenValue
Icon button outlined disabled outline colormd.comp.icon-button.outlined.disabled.outline.color
#CAC4D0
Icon button outlined disabled outline color (unselected)md.comp.icon-button.outlined.unselected.disabled.outline.color
#CAC4D0
Icon button outlined disabled container color (selected)md.comp.icon-button.outlined.selected.disabled.container.color
#1D1B20
Icon button outlined disabled container opacity (selected)md.comp.icon-button.outlined.selected.disabled.container.opacity
10%
Icon button outlined disabled icon colormd.comp.icon-button.outlined.disabled.icon.color
#1D1B20
Icon button outlined disabled icon opacitymd.comp.icon-button.outlined.disabled.icon.opacity
38%
Hovered
Hovered tokens
TokenValue
Icon button outlined hovered state layer colormd.comp.icon-button.outlined.hovered.state-layer.color
#49454F
Icon button outlined hovered state layer color - toggle (unselected)md.comp.icon-button.outlined.unselected.hovered.state-layer.color
#49454F
Icon button outlined hovered state layer color - toggle (selected)md.comp.icon-button.outlined.selected.hovered.state-layer.color
#F5EFF7
Icon button outlined hovered state layer opacitymd.comp.icon-button.outlined.hovered.state-layer.opacity
8%
Icon button outlined hovered icon colormd.comp.icon-button.outlined.hovered.icon.color
#49454F
Icon button outlined hovered icon color - toggle (unselected)md.comp.icon-button.outlined.unselected.hovered.icon.color
#49454F
Icon button outlined hovered icon color - toggle (selected)md.comp.icon-button.outlined.selected.hovered.icon.color
#F5EFF7
Focused
Focused tokens
TokenValue
Icon button outlined focused state layer colormd.comp.icon-button.outlined.focused.state-layer.color
#49454F
Icon button outlined focused state layer color - toggle (unselected)md.comp.icon-button.outlined.unselected.focused.state-layer.color
#49454F
Icon button outlined focused state layer color - toggle (selected)md.comp.icon-button.outlined.selected.focused.state-layer.color
#F5EFF7
Icon button outlined focused state layer opacitymd.comp.icon-button.outlined.focused.state-layer.opacity
10%
Icon button outlined focused icon colormd.comp.icon-button.outlined.focused.icon.color
#49454F
Icon button outlined focused icon color - toggle (unselected)md.comp.icon-button.outlined.unselected.focused.icon.color
#49454F
Icon button outlined focused icon color - toggle (selected)md.comp.icon-button.outlined.selected.focused.icon.color
#F5EFF7
Pressed
Pressed tokens
TokenValue
Icon button outlined pressed state layer colormd.comp.icon-button.outlined.pressed.state-layer.color
#49454F
Icon button outlined pressed state layer color - toggle (unselected)md.comp.icon-button.outlined.unselected.pressed.state-layer.color
#49454F
Icon button outlined pressed state layer color - toggle (selected)md.comp.icon-button.outlined.selected.pressed.state-layer.color
#F5EFF7
Icon button outlined pressed state layer opacitymd.comp.icon-button.outlined.pressed.state-layer.opacity
10%
Icon button outlined pressed icon colormd.comp.icon-button.outlined.pressed.icon.color
#49454F
Icon button outlined pressed icon color - toggle (unselected)md.comp.icon-button.outlined.unselected.pressed.icon.color
#49454F
Icon button outlined pressed icon color - toggle (selected)md.comp.icon-button.outlined.selected.pressed.icon.color
#F5EFF7