ImageToSVG

How to Use SVG in React — Import Methods Compared

React supports SVG in multiple ways: as an <img> src, as an imported component via SVGR, or directly inline in JSX. Here's when to use each approach.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

Three Ways to Use SVG in React

Choose the approach that matches your use case — simple display, CSS styling, or interactive SVG manipulation.

  • <img src> approach: fastest to implement, no CSS path styling
  • SVGR import: import Logo from './logo.svg' — renders as React component
  • Inline SVG: paste SVG code directly in JSX — full CSS/JS control
  • Next.js: use @svgr/webpack or next-svgr package for component imports

SVGR — Best for Scalable SVG Component Libraries

SVGR (SVG to React) transforms SVG files into React components. Install @svgr/webpack or use CRA's built-in support.

  • CRA (Create React App): SVGR is built in — import Logo from './logo.svg'
  • Vite: install vite-plugin-svgr, add to vite.config.ts plugins
  • Next.js: install @svgr/webpack, configure in next.config.js
  • Usage: <Logo width={24} height={24} className='icon' />
  • Benefit: SVG paths are in DOM, fully styleable with CSS

Frequently Asked Questions

What is the best way to import SVG in React?

SVGR for icons and reusable components (lets you pass props like size and color). <img src> for decorative images that don't need CSS control. Inline SVG for complex animated or interactive graphics.

How do I change SVG icon color in React with CSS?

Use fill='currentColor' in the SVG paths. Then control color with CSS: .icon { color: blue; }. The SVG inherits the currentColor value from its parent's CSS color property.

Can I use imagetosvg.com SVG files in React?

Yes — download the SVG, import via SVGR, and use as a React component. Or copy the SVG code inline into JSX. Both methods work with standard SVG output.

How do I make a dynamic SVG icon in React that changes color on hover?

Import SVG with SVGR, set fill='currentColor' in all paths, then: <SvgIcon className='icon' /> and .icon:hover { color: #ff0000; } in CSS.

Related guides

Free converterConvert any image to SVG instantlyPNG to SVG guideStep-by-step conversion walkthroughSVG vs PNGWhich format should you use?SVG for CricutCricut-ready SVG workflow

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG