Using SVG in React

Introduction

React does not require a special SVG format. The important decision is how the browser should load and control the asset. The same logo can be referenced as an image file, written inline in JSX, or transformed into a reusable component. Each approach changes caching, styling, accessibility, and bundle behavior.

Choose the simplest integration that satisfies the product requirement. Converting every SVG into a component adds code and maintenance without automatically improving performance.

Choose an integration method

Static file example

Use a normal image when the asset is content but does not need internal styling.

<img
  src="/brand/logo.svg"
  width={160}
  height={48}
  alt="Acme"
/>

The explicit dimensions reserve layout space. A meaningful logo receives alternative text; a decorative flourish should use alt="" instead.

Component example

A component is useful when color or accessible naming changes by context.

type SearchIconProps = {
  title?: string;
  size?: number;
};

export function SearchIcon({ title, size = 20 }: SearchIconProps) {
  const labelled = Boolean(title);

  return (
    <svg
      viewBox="0 0 24 24"
      width={size}
      height={size}
      role={labelled ? 'img' : undefined}
      aria-label={title}
      aria-hidden={labelled ? undefined : true}
      fill="none"
      stroke="currentColor"
    >
      <circle cx="11" cy="11" r="7" />
      <path d="m16 16 5 5" />
    </svg>
  );
}

currentColor lets the icon follow surrounding text color. The component also distinguishes a named image from a decorative icon rather than assigning the same accessibility behavior everywhere.

Prepare SVG before importing it

Exported files often contain editor metadata, generated IDs, fixed dimensions, comments, and redundant groups. Optimization can reduce that noise, but it must not remove a required viewBox, accessible title, mask, gradient, or ID reference.

Inspect the final markup before treating it as application code. SVG supports links, embedded content, event attributes, and other behavior that should not enter a trusted component pipeline without review.

1. 1
   Decide whether the graphic is meaningful or decorative.
2. 2
   Choose file, inline, component, or sprite delivery based on required control.
3. 3
   Optimize the source while preserving `viewBox` and referenced IDs.
4. 4
   Convert attribute names for JSX only when the build pipeline does not do it.
5. 5
   Add a title or hide the graphic according to its context.
6. 6
   Test sizing, color, focus behavior, server rendering, and hydration.
7. 7
   Compare bundle or document cost before converting a whole icon set.

Common mistakes

Turning every SVG into JSX

Large illustrations repeated across routes can add substantial markup to JavaScript bundles or server-rendered HTML. A cacheable image file is often more efficient.

Removing the viewBox

Without viewBox, responsive scaling can break or depend on fixed dimensions. Preserve it unless you have deliberately rebuilt the coordinate system.

Reusing duplicate IDs

Inlining the same SVG multiple times can duplicate gradient, mask, or clip-path IDs. Prefix IDs during transformation or keep the asset external.

Adding a title to decorative icons

An icon next to a visible button label usually does not need a second accessible name. Hide decorative SVG from assistive technology to avoid repeated announcements.

Importing unknown SVG as trusted code

Do not paste unreviewed SVG from users or third parties directly into JSX. Sanitize or reject it before it reaches the component source.

Best practices

• -Prefer files for static assets and components for graphics that need control.
• -Keep the viewBox and test non-square containers.
• -Use currentColor for single-color interface icons.
• -Define whether each icon is meaningful or decorative at the call site.
• -Prefix reusable IDs when inline instances can repeat.
• -Optimize a copy and retain the original design source.
• -Measure bundle and HTML impact across the complete icon set.

FAQ

Do I need SVGR to use SVG in React?

No. React can render inline SVG directly, and browsers can load SVG through normal image elements. A transformer such as SVGR is useful when a project wants generated components and a consistent conversion pipeline.

Is inline SVG faster than an image file?

Not universally. Inline SVG avoids a separate request but cannot be cached as an independent file and increases document or bundle size. Measure the actual reuse pattern.

Can CSS style an SVG loaded with an image element?

CSS can size and position the image element, but it cannot normally target internal paths in an external SVG loaded through <img>.

What should happen to width and height?

Keep a viewBox for scaling and provide explicit rendered dimensions through attributes or CSS. This preserves aspect ratio while reserving layout space.

The React DOM documentation explains JSX attribute conventions, while the WAI image tutorial provides context-based accessibility guidance.