SVG in Next.js: Import, Optimize, and Render
Next.js requires configuration for SVG component imports — here's the complete setup for production-quality SVG in Next.js App Router.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Importing SVG in Next.js
Next.js doesn't include SVGR by default — choose your approach.
- Static URL: import logoUrl from './logo.svg' → use with <img src={logoUrl}>
- Component (SVGR): configure in next.config.js (see below)
- Inline: paste SVG code directly into JSX (no config needed)
- public/ folder: put SVG in /public, reference as <img src='/logo.svg'> — served as static file
Configuring SVGR in Next.js
Add SVGR to next.config.js for SVG-as-component imports.
- npm install --save-dev @svgr/webpack
- next.config.js: webpack: (config) => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'] }); return config; }
- Then: import Logo from './logo.svg' → renders inline SVG as <Logo />
- Pass props: <Logo className='h-6 w-6' fill='currentColor' />
- Alt: use next-svgr package for a simpler configuration
next/image with SVG
Next.js 13+ next/image accepts SVG with some caveats.
- <Image src='/logo.svg' width={200} height={50} alt='Logo'>: works for SVG in /public
- SVG with unspecified dimensions: add width and height props always
- SVG from external URL: add domain to next.config.js images.domains
- Optimization: next/image doesn't optimize SVG — serves original file
- For inline-styled SVG: use SVGR component import instead of next/image
Frequently Asked Questions
What's the best way to import SVG in Next.js?
For simple display: put in /public and use <img> or next/image. For styled/animated icons: configure SVGR in next.config.js and import as React components.
Does Next.js optimize SVG files?
Not automatically. next/image skips optimization for SVG. Run SVGO manually on your SVG files, or set up a build script to optimize SVGs before deployment.
How do I use SVG favicons in Next.js App Router?
Create app/icon.svg — Next.js App Router automatically generates favicon metadata from this file. For browser SVG favicon support, also add <link rel='icon' type='image/svg+xml' href='/icon.svg'> to your layout.
Can I use SVG in Next.js Server Components?
Yes — inline SVG in Server Components renders on the server. SVGR-imported SVG components are also compatible with Server Components (they render as static HTML).
How do I add an SVG background pattern in Next.js with Tailwind?
Place the SVG in /public, then in CSS: background-image: url('/pattern.svg'). Or use Tailwind's arbitrary value: className='bg-[url(/pattern.svg)]'.
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