How to Use SVG in Next.js App Router
App Router's Server Component model changes a few assumptions about SVG handling — here's the current, correct approach.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Server Components and Static SVG
Inline SVG markup renders perfectly fine in Server Components with zero client-side JavaScript cost — the ideal default for any decorative or non-interactive icon. Next.js's `next/image` component doesn't optimize SVGs the way it does raster formats, so plain `<img>` or inline markup remains the right approach for vector graphics.
- Inline SVG in Server Components ships with zero client JS
- next/image doesn't apply raster optimization to SVG files
- Plain <img> tags or inline markup are both valid for SVG assets
Component Imports and Client Interactivity
SVGR-style imports (`@svgr/webpack` via `next.config.js` customization) still work in App Router for converting SVGs into components, but only mark a component `"use client"` if the icon genuinely needs interactivity (onClick handlers, dynamic state) — unnecessary client boundaries add JS the Server Component model is designed to avoid.
- SVGR imports still work with custom Webpack config in Next.js
- Reserve "use client" for icons with genuine interactive behavior
- Static icons should stay Server Components by default
Frequently Asked Questions
Do I need next/image for SVG logos in App Router?
No — next/image is built for raster image optimization (responsive sizing, format conversion) which doesn't apply to SVG. A plain <img> tag or inline SVG markup is the correct, simpler choice.
Why would an icon component need "use client"?
Only if it uses React hooks, event handlers, or browser-only APIs — a purely decorative icon rendering static markup has no need for a Client Component boundary and should stay server-rendered.
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