Accessible SVG Icons: aria-label and role

Most SVG icon accessibility bugs are easy to fix once you separate decorative icons from meaningful icons.

Quick rules

Decorative icon: add aria-hidden="true" and no label.
Icon-only button: keep icon hidden and label the button.
Meaningful standalone icon: add accessible name with aria-label.
Do not rely on color/icon shape alone for critical meaning.¹

Decorative icons

<p>
  <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16">...</svg>
  Settings
</p>

Icon-only buttons

<button type="button" aria-label="Search">
  <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20">...</svg>
</button>

Best default

Label the control, not the icon. Screen readers should announce the action, not the graphic.

Standalone meaningful icons

<svg
  role="img"
  aria-label="Success"
  viewBox="0 0 24 24"
  width="20"
  height="20"
>
  <path d="..." />
</svg>

React pattern

type IconProps = {
  title?: string;
  decorative?: boolean;
};

export function StatusIcon({ title = 'Status', decorative = false }: IconProps) {
  if (decorative) {
    return <svg aria-hidden="true" viewBox="0 0 24 24">{/* ... */}</svg>;
  }

  return (
    <svg role="img" aria-label={title} viewBox="0 0 24 24">
      {/* ... */}
    </svg>
  );
}