Import SVGs in Next.js Apps

Why Use SVGs in Next.js Applications

SVG (Scalable Vector Graphics) have become the cornerstone of modern web development, offering crisp visuals at any scale while maintaining small file sizes. In Next.js applications, choosing the right SVG import method directly impacts your application's performance, maintainability, and developer experience.

SVGs offer compelling advantages over raster images like PNG or JPEG. They are resolution-independent, meaning they look sharp on high-DPI displays, retina screens, and at any zoom level without pixelation. A complex icon that might require a 20KB PNG file can often compress to just 2-3KB as an SVG, directly translating to faster page load times and improved Core Web Vitals scores.

The Performance Advantage

When optimized properly, SVGs contribute to faster web applications in several ways. First, their text-based format compresses exceptionally well with gzip or Brotli compression, often achieving 70-90% compression ratios. Second, SVGs can be inlined directly into the HTML document, eliminating additional HTTP requests. Third, because SVGs are vector-based, a single SVG file can serve all viewport sizes without needing multiple resolution variants.

For Next.js applications specifically, the framework's built-in optimization features extend to SVGs when using the next/image component or SVGR transformation. These optimizations include automatic format conversion, lazy loading, and proper caching headers, all of which contribute to better Lighthouse scores and improved SEO rankings.

The XML-based nature of SVGs also enables powerful capabilities that raster images cannot match--you can manipulate SVG properties through CSS, change colors dynamically, and create animated interactive UI elements.

Four Methods to Import SVGs in Next.js

Method 1: Inline SVG

The most straightforward approach to using SVGs in Next.js is embedding them directly as inline SVG elements within your React components. This method requires no special configuration and works immediately in any Next.js project.

export default function InlineSvgExample() {
 return (
 <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg">
 <svg
 className="w-5 h-5"
 fill="currentColor"
 viewBox="0 0 24 24"
 aria-hidden="true"
 >
 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
 </svg>
 <span>Add to Cart</span>
 </button>
 );
}

When to use: Small icons used once or twice, prototypes, simple components.

Method 2: Public Folder with next/image

Place SVG files in your Next.js public directory and load them using the built-in next/image component. This method provides automatic optimization and is best suited for static SVGs.

import Image from 'next/image';
import logo from '../public/logo.svg';

export default function Header() {
 return (
 <header className="flex items-center justify-between p-4">
 <Image
 src={logo}
 alt="Company Logo"
 width={120}
 height={40}
 priority
 />
 <nav>{/* navigation */}</nav>
 </header>
 );
}

When to use: Static assets like logos, hero images, no dynamic styling needed.

Method 3: SVG as React Component (SVGR)

Transform SVGs into React components using SVGR, enabling full CSS styling, prop-based customization, and component-level optimization.

/** @type {import('next').NextConfig} */
const nextConfig = {
 webpack(config) {
 config.module.rules.push({
 test: /\.svg$/,
 use: ['@svgr/webpack'],
 });
 return config;
 },
};

module.exports = nextConfig;

import GithubIcon from '@/components/icons/GithubIcon.svg';

export function SocialLinks() {
 return (
 <div className="flex gap-4">
 <GithubIcon className="w-6 h-6 text-gray-700 hover:text-gray-900 transition-colors" />
 </div>
 );
}

When to use: Reusable icons, design systems, dynamic styling, TypeScript projects.

Method 4: Standard HTML img Tag

The simplest approach uses the standard HTML <img> tag to reference SVG files from the public directory or external URLs.

export default function SimpleImage() {
 return (
 <div className="p-4">
 <img
 src="/icons/arrow-right.svg"
 alt="Arrow pointing right"
 width={24}
 height={24}
 loading="lazy"
 />
 </div>
 );
}

When to use: External SVGs, maximum compatibility, simple implementations.

Setting Up SVGR in Next.js

To use SVGR, configure your build system to transform .svg files into React components. Install the SVGR webpack loader:

npm install -D @svgr/webpack

Webpack configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
 webpack(config) {
 config.module.rules.push({
 test: /\.svg$/,
 use: ['@svgr/webpack'],
 });
 return config;
 },
};

module.exports = nextConfig;

Turbopack configuration (Next.js 15+):

/** @type {import('next').NextConfig} */
const nextConfig = {
 turbopack: {
 rules: {
 '*.svg': {
 loaders: ['@svgr/webpack'],
 as: '*.js',
 },
 },
 },
};

module.exports = nextConfig;

Styling SVG Components

Import SVGs as React components and style them using CSS or Tailwind:

import GithubIcon from '@/components/icons/GithubIcon.svg';

<GithubIcon className="w-6 h-6 text-gray-700 hover:text-gray-900 transition-colors" />

Performance Optimization Strategies

Reducing SVG File Size

Optimize SVGs with SVGO before adding to your project. Key optimizations include:

• Removing XML declarations and comments
• Converting coordinates to integers
• Removing unused namespaces
• Collapsing groups and transforming paths
• Removing unnecessary title/desc elements

For projects built with our custom software development services, centralizing SVG assets in a dedicated icon system reduces duplication and improves maintainability across your application.

Code-Splitting and Lazy Loading

When importing SVGs as React components, Next.js automatically code-splits each SVG into a separate chunk:

import dynamic from 'next/dynamic';

const DynamicIcon = dynamic(
 () => import('@/components/icons/FeatureIcon.svg'),
 { loading: () => <span className="w-6 h-6 bg-gray-200" /> }
);

Caching and CDN Delivery

Next.js generates hashed filenames for imported assets, enabling long-term caching. For production deployments, serve SVGs through a CDN to reduce latency for users geographically distant from your origin server.

Combining this with our cloud infrastructure services ensures optimal delivery performance for your visual assets worldwide. For teams looking to automate visual asset workflows, our AI automation services can help streamline SVG processing and optimization at scale.

Additionally, following proper image size guidelines ensures your visual assets are properly optimized across your entire application.

Best Practices Summary

Organization and Structure

• Store SVGs in a dedicated directory (/assets/icons, /components/icons)
• Use consistent naming conventions (PascalCase for components)
• Export individual icons from an index file for easy imports
• Consider using an icon library for larger projects with many icons

Following these organization patterns is essential for maintaining scalable codebases, whether you're building a design system from scratch or enhancing an existing application through our frontend development services. When keeping your website content up to date, understanding how to update a website properly ensures your visual assets remain current and optimized.

Performance

• Optimize SVGs with SVGO before adding to your project to reduce file size
• Use next/image for static SVGs requiring automatic optimization
• Code-split SVG components for larger icon sets to improve initial load
• Lazy load below-the-fold SVGs to reduce initial bundle size

Accessibility

• Always include aria-hidden="true" for decorative SVGs
• Provide meaningful alt text or aria-label for interactive SVGs
• Ensure sufficient color contrast for SVG icons used as controls
• Test SVGs with screen readers to verify accessibility

Maintenance

• Centralize SVG assets to avoid duplication across components
• Document icon usage and naming conventions for team consistency
• Use TypeScript for type safety with SVG props
• Review SVGs for unnecessary complexity before adding to the project

Sources

1. LogRocket: How to import SVGs into your Next.js apps - Comprehensive coverage of four import methods with code examples
2. DEV Community: How to Import SVG Files in a Next.js Project (2025) - Practical implementation guide for various SVG import approaches
3. Next.js Documentation: Configuring webpack loaders - Official Next.js guidance on SVG loader configuration
4. SVGR Documentation - Official documentation for SVG to React component transformation