Icon Button
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#999999buttons-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#0072f0color-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#a8aaacbuttons-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#d49677buttons-icon-button-outlined-neutral-hover-fill-color#6c7073Active
Icon Button
Background color:
buttons-icon-button-outlined-neutral-active-fill-color#e5e3e1buttons-icon-button-outlined-neutral-active-fill-color#282830 Border color:
buttons-icon-button-outlined-neutral-active-fill-color#e5e3e1buttons-icon-button-outlined-neutral-active-fill-color#282830Disabled
Icon Button
Border color:
buttons-icon-button-outlined-neutral-disabled-border-color#999999buttons-icon-button-outlined-neutral-disabled-border-color#6c7073 Border weight: 1
Focus
Icon Button
Border color:
color-border-focus-neutral-default#0072f0color-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.55)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 |
Accessibility
Section titled “Accessibility”Icon Buttons are interactive components that rely solely on visual cues (icons, outlines, and focus rings) to convey meaning. Because they don’t include text, ensuring accessibility through proper semantics, focus management, and colour contrast is essential.
For Design
Section titled “For Design”Minimum touch area
Section titled “Minimum touch area”To ensure accessibility and ease of interaction across devices, all interactive elements — including Icon Buttons — must respect a minimum touch target size.
Absolute minimum: 24 × 24 px — This is the lowest technical requirement referenced in accessibility standards (WCAG 2.5.5, EN 301549). It ensures the button can still be reached, but doesn’t guarantee an optimal experience for all users.
Recommended best practice: 44 × 44 px — Provides a comfortable interaction area for users with motor impairments, touch devices, or outdoor use. Should be considered the default requirement for Icon Buttons in our system.
The minimum target size applies regardless of the visual size of the icon or container. If the visual element is smaller (e.g. small icons or outlined variants), add invisible padding to meet the required target area. Maintain consistency across all sizes (LG, MD, SM) and across both styles (Filled / Outlined).
Guidance on how to use a component.
- Add invisible padding to meet the minimum touch size without altering the visual design.
- Ensure the button remains tappable and clearly identifiable in responsive layouts and mobile contexts.
- Keep spacing between Icon Buttons to at least one touch target (avoid overlapping targets).
Guidance on what to avoid when using a component.
- Don’t rely on the visible icon size to define the touch area.
- Don’t define interactive areas smaller than the minimum, even for small icons.
- Don’t cluster multiple Icon Buttons too closely, as this can make interaction difficult for users.
For Dev
Section titled “For Dev”To ensure Icon Buttons meet accessibility standards across platforms, follow this implementation checklist. These recommendations align with WCAG 2.2 AA and EN 301549, supporting keyboard navigation, screen readers, and assistive technologies.
- Screen reader support
- Use semantic
<button>elements for all Icon Buttons. - Each button must include a descriptive
aria-labelthat clearly communicates its purpose. - When used as toggles, add
aria-pressed="true"or"false"to indicate the current state. - Avoid using decorative icons alone — hide them from assistive tech with
aria-hidden="true". - Never use
<div>or<span>elements styled as buttons, as they break keyboard semantics.
- Use semantic
- Keyboard navigation
- Buttons must be focusable via Tab and activatable via Enter or Space.
- Maintain a visible focus state at all times, consistent with the visual design.
- Avoid intercepting default keyboard behaviour unless required (e.g. arrow keys for carousels).
- Ensure sufficient contrast between link focus indicators and adjacent elements (minimum 3:1).
- Motion sensitivity and feedback
- Avoid any animations that trigger automatically or on hover.
- Respect user preferences (
prefers-reduced-motion). - Motion should always support, not replace, visual state changes.
- ARIA and markup
- Always expose the button role and name to assistive technology (
role="button",aria-label="..."). - Use
aria-pressedfor toggle buttons andaria-busyfor asynchronous actions. - Use
aria-live="polite"for status updates triggered by Icon Buttons (e.g. loading states).
- Always expose the button role and name to assistive technology (
- Testing and validation
- Validate accessibility using tools like Axe, Lighthouse, or Accessibility Insights.
- Verify focus visibility under both light and dark modes.
- Test manually using keyboard navigation to ensure expected behaviour and focus order.