Icon Box

Utility wrapper that gives an Icon a background, border, and radius

Accessibility

Roles, States and Labels

  • Provide an accessible name when the icon conveys meaning (e.g., aria-label on the button that contains it).
  • If purely decorative, hide from AT (aria-hidden="true") and don’t include in accessible names.
  • Icon-only controls must have a visible tooltip/help or an accessible label for screen readers.