How to Use SVG in Next.js — Import, Inline, and Component Methods
Three ways to use SVG files in a Next.js project — each with code examples, trade-offs, and recommendations for App Router projects.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: SVG as a React Component (Best for Icons)
Use @svgr/webpack to import SVG files as React components. This gives you full prop control, CSS styling, and no additional HTTP requests. The most popular method for icon systems.
- npm install @svgr/webpack
- Add to next.config.js: webpack config with @svgr/webpack
- Import: import Logo from './logo.svg'
- Use: <Logo width={24} height={24} fill='currentColor' />
Method 2: SVG via next/image (Best for Static Assets)
For decorative SVGs that don't need CSS control, use next/image with your SVG file. This handles optimization automatically in Next.js 13+.
- import Image from 'next/image'
- <Image src='/logo.svg' alt='Logo' width={200} height={50} />
- Requires width and height props or fill attribute
- SVGs in public/ are served at /filename.svg
Method 3: Inline SVG (Best for Animations)
Paste SVG XML directly into JSX for full CSS and JavaScript access to internal SVG elements. Use when you need hover effects, animations, or dynamic colors.
- Paste SVG XML directly in your component
- Replace class attributes with className
- Use currentColor for dynamic color from parent CSS
- Wrap in <div aria-hidden='true'> if decorative
Frequently Asked Questions
Do I need @svgr/webpack for Next.js SVG imports?
Yes, for importing SVG as React components. Without it, SVG imports return a URL string, not a component.
Can I use SVG as a background-image in Next.js?
Yes — reference /your.svg in CSS background-image. Make sure the SVG is in the public/ folder.
Why does my SVG appear broken in Next.js?
Common causes: wrong import method, missing width/height props on next/image, or SVG has an incorrect xmlns attribute.
How do I change SVG icon color dynamically in Next.js?
Use fill='currentColor' in the SVG and control the color with the parent element's CSS color property.
Related guides
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