Material Design 3Actions
Icon Button
Icon buttons allow users to take actions and make choices with a single tap. They are compact, using only an icon without a label.
Overview
Icon buttons are used when the action is represented by a universally understood icon and a text label is not necessary. Material Design 3 provides four variants: Standard, Filled, Tonal, and Outlined. Icon buttons are commonly used in app bars, toolbars, and for toggle actions.
Live Preview
Standard
Filled
Tonal
Outlined
Common Icons
Toggle States
Unselected
Selected
Unselected
Selected
Brand Properties
The following table shows Icon Button properties with Material Design 3 defaults and brand-specific values.
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| Container Size | Dimension | 48px | 48px | 48px |
| Icon Size | Dimension | 24px | 24px | 24px |
| Corner Radius | Dimension | 24px (full) | 9999px (full) | 9999px (full) |
| Standard Icon Color | Color | #49454F | #038012 | #1A1A1A |
| Standard Hover Background | Color | 8% black | #F5F5F5 | #F5F5F5 |
| Filled Background | Color | #6750A4 | #038012 | #1A5129 |
| Filled Icon Color | Color | #FFFFFF | #FFFFFF | #FFFFFF |
| Tonal Background | Color | #E8DEF8 | primary + 20% | primary + 20% |
| Tonal Icon Color | Color | #6750A4 | #038012 | #1A5129 |
| Outlined Border Color | Color | #79747E | #038012 | #1A5129 |
| Outlined Border Width | Dimension | 1px | 1px | 1px |
| Selected Background | Color | #E8DEF8 | primary + 20% | primary + 20% |
| Selected Icon Color | Color | #6750A4 | #038012 | #1A5129 |
| Disabled Opacity | Percentage | 38% | 50% | 50% |
| Focus Ring Color | Color | #6750A4 | #038012 | #1A5129 |
| Focus Ring Width | Dimension | 2px | 2px | 2px |
Accessibility
- Always provide
aria-labeldescribing the button action - Use
aria-pressedfor toggle buttons - Ensure 48x48px minimum touch target
- Maintain 3:1 contrast ratio for icon against background
- Provide visible focus indicators for keyboard navigation
- Support keyboard activation with Enter and Space keys
Do's and Don'ts
Do
- Use universally recognized icons
- Provide tooltips for uncommon icons
- Use consistent icon style throughout app
- Show clear selected/unselected states for toggles
Don't
- Use obscure icons without labels
- Make icon buttons smaller than 48px touch target
- Use icon buttons for complex actions
- Mix different icon styles (filled/outlined)
Related Components
- Material Button - Buttons with text labels
- FAB - Floating action button
- Icon Element - Icon styling and usage
- Navigation - App bar icon buttons