Design
Icon Buttons are circular interactive elements that display a single icon to trigger an action or represent a state. They’re used when an action can be represented visually (e.g. Close, Play, Next) without the need for text.
Icon Buttons are always circular and available in two styles: Filled and Outlined. This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use Icon Buttons for:
- Simple, universally recognisable actions (play, pause, close, next, previous).
Avoid Icon Buttons when:
- Use a standard Button when text is needed for clarity.
- Avoid ambiguous icons without a tooltip or accessible label.
- Don’t use Icon Buttons for navigation unless the icon’s meaning is clearly understood.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Minimum touch area: 24 × 24 px, recommended 44 × 44 px (WCAG 2.5.5, EN 301549).
- Must always include an ARIA label (e.g. “Close”, “Play video”).
- Maintain distinct hover and focus styles (not interchangeable).
- Icon Buttons are always circular and available in two styles: Filled and Outlined.
Properties
Section titled “Properties”Type : Filled by State
Section titled “Type : Filled by State”Rested
Icon Button
Background color:
buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5buttons-icon-button-filled-neutral-rested-fill-color#282830 Height: 80
Width: 80
Hover
Icon Button
Background color:
buttons-icon-button-filled-neutral-hover-fill-color#f5f5f5buttons-icon-button-filled-neutral-hover-fill-color#6c7073Active
Icon Button
Background color:
buttons-icon-button-filled-neutral-active-fill-color#f5f5f5buttons-icon-button-filled-neutral-active-fill-color#282830 Border color:
buttons-icon-button-filled-neutral-active-border-color#000000buttons-icon-button-filled-neutral-active-border-color#282830 Border weight: 1
Disabled
Icon Button
Background color:
buttons-icon-button-filled-neutral-disabled-fill-color#f5f5f5buttons-icon-button-filled-neutral-disabled-fill-color#a8aaacFocus
Icon Button
Border color:
color-border-focus-neutral-default#c57046color-border-focus-neutral-default#0072f0 Border weight: 2
Icon Button
Type: Filled
Type : Outlined by State
Section titled “Type : Outlined by State”Rested
Icon Button
Border color:
buttons-icon-button-outlined-neutral-rested-border-color#999999buttons-icon-button-outlined-neutral-rested-border-color#a8aaac Height: 80
Width: 80
Border weight: 1
Hover
Icon Button
Background color:
buttons-icon-button-outlined-neutral-hover-fill-color#f5f5f5buttons-icon-button-outlined-neutral-hover-fill-color#6c7073Active
Icon Button
Background color:
buttons-icon-button-outlined-neutral-active-fill-color#000000buttons-icon-button-outlined-neutral-active-fill-color#282830 Border color:
buttons-icon-button-outlined-neutral-active-fill-color#000000buttons-icon-button-outlined-neutral-active-fill-color#282830Disabled
Icon Button
Border color:
buttons-icon-button-outlined-neutral-disabled-border-color#666666buttons-icon-button-outlined-neutral-disabled-border-color#6c7073 Border weight: 1
Focus
Icon Button
Border color:
color-border-focus-neutral-default#c57046color-border-focus-neutral-default#0072f0 Border weight: 2
Icon Button
Type: Outlined
LG
Icon Button
Height: 80
Width: 80
Chevron_Right
Size: 40
MD
Icon Button
Height: 40
Width: 40
Chevron_Right
Size: 20
SM
Icon Button
Height: 32
Width: 32
Chevron_Right
Size: 20
Contrast
Section titled “Contrast”False
Icon Button
Background color:
buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5buttons-icon-button-filled-neutral-rested-fill-color#282830True
Icon Button
Background color:
buttons-icon-button-filled-contrast-rested-fill-colorrgba(0, 0, 0, 0.3)buttons-icon-button-filled-contrast-rested-fill-color#ffffffBackground
Section titled “Background”True
Icon Button
Background color:
buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5buttons-icon-button-filled-neutral-rested-fill-color#282830False
Components
Section titled “Components”Toyota
Icon Button
Background color:
buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5buttons-icon-button-filled-neutral-rested-fill-color#282830Lexus
Icon Button
Background color:
buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5buttons-icon-button-filled-neutral-rested-fill-color#282830Layout and spacing
Section titled “Layout and spacing”Type: Filled, State: Rested
Section titled “Type: Filled, State: Rested”Icon Button
Direction: Horizontal
Alignment: Middle center
Vertical resizing: Fixed
Horizontal resizing: Fixed
Item spacing: 12
Padding: 8
Type: Filled, State: Focus
Section titled “Type: Filled, State: Focus”Icon Button
Direction: Horizontal
Alignment: Middle left
Vertical resizing: Hug
Horizontal resizing: Hug
Item spacing: 10
Padding: 4
Type: Outlined, State: Rested
Section titled “Type: Outlined, State: Rested”Icon Button
Direction: Horizontal
Alignment: Middle center
Vertical resizing: Fixed
Horizontal resizing: Fixed
Item spacing: 10
Padding: 8
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
buttons-icon-button-filled-contrast-rested-fill-color | Background color | Icon Button |
buttons-icon-button-filled-contrast-rested-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-rested-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-rested-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-hover-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-hover-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-active-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-active-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-disabled-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-disabled-fill-color | Background color | Icon Button |
buttons-icon-button-filled-neutral-rested-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-neutral-rested-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-neutral-hover-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-neutral-hover-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-neutral-active-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-neutral-active-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-neutral-disabled-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-neutral-disabled-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-contrast-rested-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-contrast-rested-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-contrast-hover-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-contrast-hover-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-contrast-active-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-contrast-active-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-contrast-disabled-foreground-color | Icon color | Icon Button |
buttons-icon-button-filled-contrast-disabled-foreground-color | Icon color | Icon Button |
buttons-icon-button-outlined-neutral-rested-border-color | Border color | Icon Button |
buttons-icon-button-outlined-neutral-rested-border-color | Border color | Icon Button |
buttons-icon-button-outlined-neutral-hover-fill-color | Background color | Icon Button |
buttons-icon-button-outlined-neutral-hover-fill-color | Background color | Icon Button |
buttons-icon-button-outlined-neutral-active-fill-color | Background color | Icon Button |
buttons-icon-button-outlined-neutral-active-fill-color | Background color | Icon Button |
buttons-icon-button-outlined-neutral-disabled-border-color | Border color | Icon Button |
buttons-icon-button-outlined-neutral-disabled-border-color | Border color | Icon Button |
buttons-icon-button-outlined-neutral-rested-foreground-color | Icon color | Icon Button |
buttons-icon-button-outlined-neutral-rested-foreground-color | Icon color | Icon Button |
buttons-icon-button-outlined-neutral-hover-foreground-color | Icon color | Icon Button |
buttons-icon-button-outlined-neutral-hover-foreground-color | Icon color | Icon Button |
buttons-icon-button-outlined-neutral-active-foreground-color | Icon color | Icon Button |
buttons-icon-button-outlined-neutral-active-foreground-color | Icon color | Icon Button |
buttons-icon-button-outlined-neutral-disabled-foreground-color | Icon color | Icon Button |
buttons-icon-button-outlined-neutral-disabled-foreground-color | Icon color | Icon Button |
color-border-focus-neutral-default | Border color | Icon Button |
color-border-focus-neutral-default | Border color | Icon Button |