Iconography

Keyboard

Icon has no keyboard interaction of its own. When used in a button, it follows the button's behavior.

Semantics

Use decorative for icons that repeat nearby text or only add decoration. For icons that convey information, set decorative={false} and provide label.

Checklist

  • Use decorative to hide decorative icons from the accessibility tree.
  • For icons that convey information, set decorative={false} and provide label.
  • Inside a button, use the button label to describe the action and avoid repeating it through the icon.

For contrast, zoom and screen reader checks, see the common accessibility checklist.