---
url: /components/icon-buttons/specs.md
description: Icon buttons help people take supplementary actions with a single tap.
---

# Icon buttons

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

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Variants

![Side by side view of default and toggle icon buttons.](/assets/1154b043-macn9b93-1.CGr48y1l.webp)

1. Default icon button
2. Toggle icon button

| Variant            |     M3    | M3 Expressive |
| ------------------ | :-------: | :-----------: |
| Default            | Available |   Available   |
| Toggle (selection) | Available |   Available   |

## Configurations

![Side by side view of size, shape, color, and width variations.](/assets/ecddabc8-macn9wle-2.cwj2u3Xt.webp)

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](../../foundations/design-tokens/overview.md)

::: token-table token-table-0fe2282006ae098b-91da5800
**Icon buttons tokens** · 9 token sets · 201 tokens · [live token table](https://m3.material.io/components/icon-buttons/specs) · 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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>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`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>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`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>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`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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

![Diagram indicating anatomy of filled icon button.](/assets/385cb1c0-macngrp0-3.DvgWAiEe.webp)

1. Icon 
2. Container

## Color

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). 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.

::: info 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.
:::

![Color roles of default and toggle buttons in 4 visual styles.](/assets/3f63dfd5-macnmn5n-4.Bx5nir_P.webp)

A: Filled, B: Tonal, C: Outlined, D: Standard<br>

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

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

## States

[States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") 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](../../foundations/design-tokens/overview.md)

### Filled button states

#### Default

![5 states of filled icon button.](/assets/9f4cd738-macny1bg-7.ntIgTW-6.webp)

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

#### Toggle

![5 states of filled toggle icon button.](/assets/5ef10912-macnyuzs-8.B67njn4o.webp)

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

![5 states of tonal icon button.](/assets/d00bfae7-maco0ivh-9.PSYf6NBI.webp)

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

#### Toggle

![5 states of tonal toggle icon button.](/assets/5357f103-maco1xul-10.CXndQ_Rt.webp)

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

![5 states of outlined icon button.](/assets/abcd9d0f-maco30ip-11.BNMuwmTJ.webp)

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

#### Toggle

![5 states of outlined toggle icon button.](/assets/4e9a8e67-maco3sgl-12.CnbC71X-.webp)

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

![5 states of standard icon button.](/assets/1adec98d-maco50jx-13.CBKqQ6aZ.webp)

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

#### Toggle

![5 states of standard toggle icon button.](/assets/19b99c92-maco5p31-14.D6_CUEDb.webp)

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.<br><br>The corner radius value differs for each button size. [See full icon button corner measurements](#b3df1f02-d313-44e9-9542-37f7e0e24dc7)

![Shape changes for round and square icon buttons in 3 states.](/assets/82c14a68-mal45bxj-15.DJRQP83u.webp)

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.<br><br>If the resting shape is square, the selected shape should be round.

![Shape changes for round and square toggle icon buttons in 3 states.](/assets/05d46adb-mafeboyy-16.Cw1o3qmB.webp)

A. Round, B. Square

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

## Measurements

![Diagram of 5 sizes of icon buttons in 4 widths.](/assets/8b35c133-macoq4wo-17.CZQ02zBF.webp)

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.

![Diagram of target sizes.](/assets/a8e85a6a-macosw5f-18.Dol11XJq.webp)

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

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

<a id="b3df1f02-d313-44e9-9542-37f7e0e24dc7"></a>

### Button corner radius

![Diagram of icon button corner radius.](/assets/8a9eb68e-mafelwts-19.CgRxkw25.webp)

<br>

|                  |  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.

::: token-table token-table-0fe2282006ae098b-4b99c4c0
**Icon buttons tokens** · 3 token sets · 114 tokens · [live token table](https://m3.material.io/components/icon-buttons/specs) · 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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>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`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
:::