Button - Icon

Use icon buttons to:

• Perform common, easily recognised actions when space is minimal
• Display actions in toolbars, headers, or compact interfaces
• Trigger modals, menus, or dialogs where the action is clear from context
• Nested inside components where there are more actions that the space allows

Do not use icon buttons when:

• The action is not immediately clear from the icon alone — use a button with a text label instead
• Space allows for a text label — icon buttons should only be used when space is limited
• The icon is unfamiliar or could be misinterpreted — add a text label for clarity
• Multiple icon buttons appear together without clear differentiation

Size guidelines

Default size (44px × 44px)

Use the default size for most icon buttons. This size meets WCAG 2.2 Level AA touch target requirements (minimum 44px × 44px) and provides adequate space for interaction.

Small size (24px × 24px)

The small size should be used only as a last resort. This size falls below WCAG 2.2 touch target requirements and creates accessibility challenges.

When using small icon buttons, you must ensure sufficient white space or non-clickable elements nearby to increase the touch target area effectively. Small icon buttons are primarily used for tooltip triggers, though tooltips should be used sparingly.

Best practice note

WCAG 2.2 Success Criterion 2.5.8 (Target Size - Minimum) requires interactive elements to have a minimum touch target size of 24px × 24px.

While the small variant meets this absolute minimum, the default 44px size is strongly recommended for better usability and to meet Level AA compliance (https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum).

Icon selection

Icons should be selected from the icon suite. Choose icons that clearly represent the action they perform. Use familiar, widely recognised icons for common actions.