React SVG: Inline SVG vs img Tag
The right SVG method in React depends on whether you need CSS styling, animation, or just static display.
Comparison Table
Each SVG embedding method has distinct trade-offs.
| Property | Inline SVG (JSX) | <img src='*.svg'> | SVGR Component |
|---|---|---|---|
| CSS styleable | Full (any property) | No | Full via props |
| Cacheable | No (in HTML) | Yes | No (in JS bundle) |
| HTTP request | None | 1 per SVG | None |
| Animation | Full (CSS/JS) | CSS only | Full |
| Server Component | Yes | Yes | Client only (SVGR) |
When to Use Each Method
The choice maps to your specific requirements.
- Inline SVG: icons you need to recolor, animate, or interact with in JS
- <img>: static logos and illustrations where styling isn't needed — simplest, cached
- SVGR component: design system icons where TypeScript props and color control are needed
- Next.js app: inline SVG in Server Components is zero-config and performant
- Large icon sets: SVG sprite with <use> — one cached file, no bundle impact
Frequently Asked Questions
Should I use inline SVG or img in Next.js?
For icons needing color control: inline SVG in a Server Component. For static logos: <Image> from next/image. For a typed icon system: SVGR with a client component wrapper.
Does the img tag support SVG dark mode?
External SVG in img tags can support dark mode if CSS media queries are inside the SVG file.
How do I make an SVG icon change color on hover in React?
Use inline SVG with fill='currentColor' on paths. In CSS: .icon:hover { color: blue; } — the SVG inherits the text color via currentColor.
Is SVGR worth the setup complexity?
For design systems with 20+ icons that need TypeScript color/size props: yes. For 1–5 icons: inline SVG is simpler.
Will inline SVG slow down React rendering?
Minimally for typical SVG sizes. For very large SVG (complex illustrations), externalize as img for caching benefit.
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