Using SVG icons in React without losing accessibility

SVG works well in React when the icon is a reusable component rather than duplicated markup scattered across many files. A simple wrapper can expose size, color and an optional title while preserving accessibility. The implementation must reflect how the asset was authored.

A minimal icon component

This example uses a simple magnifying-glass outline. It accepts an optional title. Without a title, it is treated as decorative and should be accompanied by visible control text or a label on the parent control.

function SearchIcon({ size = 20, title, ...props }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}
      fill="none" stroke="currentColor" strokeWidth="2"
      role={title ? 'img' : undefined}
      aria-label={title || undefined}
      aria-hidden={title ? undefined : true}
      focusable="false" {...props}>
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-4-4" />
    </svg>
  );
}

Use it inside an accessible button:

<button type="button" aria-label="Search the library">
  <SearchIcon size={20} />
</button>

The label belongs on the button because the action, not the graphic, is the interactive element.

Converting raw SVG markup

JSX usually uses camel-cased attribute names, such as strokeWidth rather than stroke-width. A downloaded SVG cannot always be pasted into JSX unchanged; check attribute warnings and any embedded styles, gradients or clipping IDs. Preserve the source license and test the converted output against the original.

If you use a build-time SVG-to-component tool, apply the same sanitization and trust rules you would apply to any asset entering the codebase. Do not render untrusted SVG strings through unrestricted HTML injection.

Choose color behavior deliberately

For single-color artwork, currentColor allows the component to follow CSS text color. Multicolor brand icons are different: keep their intended fills and do not force a monochrome wrapper. If a symbol needs an outline and a filled state, use correctly designed variants rather than changing fill on arbitrary open paths.

Keep components manageable

Use a small icon export index rather than loading a whole library into every screen. Check what the bundler actually includes, particularly when importing from a large package. Measure the final bundle after production builds instead of assuming that named imports always remove unused assets.

Read SVG color with CSS and accessible SVG patterns before turning visual assets into shared UI components.