Accessibility

Icons are decorative by default: aria-hidden="true" and focusable="false".

Name an icon

When the icon is the only thing carrying meaning, give it a title. It gets role="img", an aria-label and a <title>.

<CalendarIcon title="Due date" />

Icon-only buttons

Label the button, not the icon.

<button aria-label="Close">
  <XIcon />
</button>