SVG in React: Complete Developer Guide
From inline SVG to component systems — the right SVG patterns for every React use case.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: Import SVG as React Component (SVGR)
Create React App and Vite include SVGR by default. Import SVG files directly as components.
- import { ReactComponent as Logo } from './logo.svg'; // CRA
- import Logo from './logo.svg?react'; // Vite
- <Logo width={200} className='logo' />
- SVG's internal elements are accessible via CSS and props
- Best for: icons and logos that need CSS styling or animation
Method 2: Import SVG as URL (Asset)
import logoUrl from './logo.svg'; — imports the SVG file URL, used as src for an <img> tag.
- import logoUrl from './logo.svg';
- <img src={logoUrl} alt='Logo' width={200} height={80} />
- SVG is cached separately, no inline HTML bloat
- No CSS access to internal paths
- Best for: static images and photos that don't need styling
Method 3: Inline SVG JSX
Paste SVG XML directly in JSX. SVG attributes are camelCase in React (viewBox not viewbox, className not class).
- <svg viewBox='0 0 24 24' aria-hidden='true'><path d='...' fill='currentColor'/></svg>
- Common gotchas: class → className, stroke-width → strokeWidth, clip-path → clipPath
- Use fill='currentColor' to inherit CSS color for easy theming
- Best for: animated SVGs and icons in component libraries
Method 4: SVG Sprite with <use>
Load one sprite file containing all icons. Reference individual icons with <use>.
- Include sprite in app root: <svg style={{display:'none'}}><use>... (from sprite.svg)</use></svg>
- Or reference externally: <svg><use href='/sprite.svg#icon-name'/></svg>
- External sprites require CORS headers if cross-domain
- Best for large icon sets — one cache miss, instant reuse
Frequently Asked Questions
Should I use SVGR or inline SVG in React?
SVGR (SVG as component) is best for icon systems — it's DRY and allows prop-based customization. Inline SVG is better for unique, one-off animated graphics.
How do I change SVG icon color dynamically in React?
Set fill='currentColor' in the SVG. Control the color via CSS or inline style on the parent: <span style={{color: 'red'}}><Icon /></span>
How do I optimize SVG imports in a React build?
SVGO is typically run by SVGR during the build. For manual optimization, run SVGO on your SVG files before importing. Also ensure unused SVG components are tree-shaken (don't import from an index that imports everything).
Can I animate SVGR components with Framer Motion?
Yes. Wrap SVGR components with motion: <motion.svg> or apply Framer Motion to specific paths using motion(path).
How do I add SVG icons with Next.js?
Use @svgr/webpack (add to next.config.js webpack config). Then import SVGs as React components. Or use next/image for static SVG assets that don't need CSS styling.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free