Component (RN)
React Native Component Status
Status
Component checklist
Published
Figma (RN)
Figma Component Status
Published
Code (Web)
HTML/CSS Code
Published
Figma (Web)
Figma Component Status
Published
Key Points
- Icon buttons display only an icon without visible text labels
- Two sizes are available: default (44px × 44px) and small (24px × 24px)
- Two variants are available: primary and secondary
- Icon buttons can be placed on base and inverted surfaces
- All icon buttons must have descriptive accessible labels for screen readers
- The small size (24px × 24px) should be used as a last resort and must have surrounding white space to increase the touch target area effectively
Use an icon button when space is limited, and the icon's meaning is clear and widely understood.
Icon buttons are appropriate for common actions like close, menu, search, and edit.
Icon buttons on the base and inverted surfaces