Skip to content
SvgJsx
Language: English

How to Use SVG Icons in React

There are five common ways to put SVG icons in a React app. This guide compares them on performance, styling and accessibility, and shows when each one is the right choice.

Quick presets:
Drop .svg files here orFiles are read locally with FileReader and are never uploaded.
Options
Export:
import type { SVGProps } from "react";

const HeartIcon = ({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) => (
  <svg viewBox="0 0 24 24" className="icon icon-heart" width={size} height={size} {...props}>
    <g id="Layer_1" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "currentColor" }} />
    </g>
  </svg>
);

export default HeartIcon;

Preview

Preview of the converted SVG
Original SVG
706B
Optimized SVG
548B(-22%)
Component
692B

1. Inline SVG components

Converting each icon into a component (the approach this site automates) gives you full control: icons inherit color through currentColor, accept props such as size and className, and can be animated with CSS or a motion library. Bundlers tree-shake unused components, so you only ship the icons you import.

The trade-off is that the markup becomes part of your JavaScript bundle. For a few dozen small icons that is negligible; for hundreds of complex illustrations it is not.

2. Image tags and CSS backgrounds

<img src="/logo.svg" alt="Company"> is the simplest option and the browser can cache the file. However, the SVG is isolated from your CSS, so you cannot change its color on hover or in dark mode. Use it for logos and illustrations that never change.

3. SVGR and build-time loaders

SVGR (via @svgr/webpack or vite-plugin-svgr) converts .svg imports into components at build time. It is convenient for large icon folders but adds build configuration and can behave differently across bundlers and Turbopack. Converting once with this tool produces the same kind of component as committed source code.

4. SVG sprites and 5. icon libraries

A sprite sheet places many <symbol> elements in one file and references them with <use href="#icon">. It keeps HTML small but complicates server-side rendering. Icon libraries such as Lucide, Heroicons or Phosphor ship pre-built components and are ideal when their style matches your design.

Whichever method you choose, follow these accessibility rules:

  • Decorative icons next to text get aria-hidden="true".
  • Standalone icons, such as an icon-only button, need an accessible name via aria-label on the button or a <title> inside the SVG.
  • Keep a viewBox and size icons in em or rem so they scale with the user's font size.
  • Ensure a contrast ratio of at least 3:1 for meaningful icons (WCAG 1.4.11).

Frequently asked questions

What is the best way to use SVG icons in React?

For UI icons, inline components with currentColor and a size prop are the most flexible. Use <img> for static artwork and an icon library when its style fits your design.

Do inline SVG icons hurt performance?

Rarely. A typical 24×24 icon is 300–600 bytes after optimisation. Problems only appear with hundreds of complex icons rendered at once, where a sprite or <img> is better.

Should I use SVGR or convert icons manually?

SVGR suits large, frequently changing icon sets with a stable build pipeline. Pre-converted components need no configuration and work the same in every bundler.

How do I make SVG icons accessible?

Hide decorative icons with aria-hidden="true" and give meaningful ones an accessible name with aria-label or a <title>. Never rely on an icon alone to convey critical information.

How do I size SVG icons with Tailwind?

Remove the fixed width and height, keep the viewBox and apply classes such as size-5 or h-4 w-4. Alternatively, enable the size prop and pass a number.