The Ultimate Guide to Using SVG Icons in Next.js & React

When building modern web applications with React and Next.js, icons are essential for creating an intuitive and visually appealing user interface. But what is the best way to handle icons? Should you use an icon font, raw SVG files, or an icon component library?

In this comprehensive guide, we'll dive deep into why SVG (Scalable Vector Graphics) is the gold standard for React applications. We will cover how to import them, style them dynamically, and optimize them for Next.js to ensure lightning-fast performance and perfect accessibility.

---

Why SVG Over Icon Fonts or PNGs?

Before we look at the code, let's understand why SVGs have completely taken over the frontend ecosystem, leaving icon fonts (like the old FontAwesome web fonts) and raster images (PNGs, JPGs) in the dust.

By using SVGs, you guarantee that your application remains lightweight and your icons look crisp on every device.

---

Method 1: Raw SVG as React Components (The Best Approach)

The absolute best way to use SVGs in React is to treat them as React components. This allows you to pass props (like className, style, width, height) directly to the SVG element.

Getting the SVG Code

First, you need an SVG. Instead of downloading heavy design files, you can use the

to instantly search over 150+ open-source collections. Simply find an icon, click it, and copy the React code.

Creating the Component

Create a reusable component for your icon. Here is an example of a simple "Home" icon:

import React from 'react';

export function HomeIcon({ className = "w-6 h-6", ...props }: React.SVGProps<SVGSVGElement>) {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 24 24" 
      fill="none" 
      stroke="currentColor" 
      strokeWidth="2" 
      strokeLinecap="round" 
      strokeLinejoin="round" 
      className={className}
      {...props}
    >
      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
      <polyline points="9 22 9 12 15 12 15 22" />
    </svg>
  );
}

Why This Works Beautifully

1. stroke="currentColor": This is the magic bullet. By setting the stroke (or fill) to currentColor, the SVG will automatically inherit the text color of its parent element. If you wrap this icon in a <div className="text-blue-500">, the icon becomes blue.
2. Prop Spreading (...props): This allows you to attach event listeners (onClick), accessibility tags (aria-hidden="true"), or custom Tailwind classes directly when using the component.

Usage in Next.js

import { HomeIcon } from '@/components/icons/HomeIcon';

export default function Sidebar() {
  return (
    <button className="flex items-center gap-2 text-slate-600 hover:text-blue-600 transition-colors">
      <HomeIcon className="w-5 h-5" />
      <span>Dashboard</span>
    </button>
  );
}

---

Method 2: Using SVGR in Next.js

If your designers hand you a folder of .svg files and you don't want to manually convert them all into React components, you can automate the process using SVGR.

SVGR is a webpack loader that takes raw .svg files and automatically transforms them into React components during the build process.

Step 1: Install SVGR

npm install @svgr/webpack --save-dev

Step 2: Configure Next.js

Update your next.config.js or next.config.mjs file to support SVG imports:

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

module.exports = nextConfig;

Step 3: Use the SVG

Now, you can import the SVG file directly as a React component:

import Logo from '@/assets/logo.svg';

export default function Header() {
  return (
    <header>
      <Logo className="w-32 h-auto text-primary" />
    </header>
  );
}

Note: While SVGR is highly convenient, explicitly writing your SVG components (Method 1) gives you slightly better TypeScript autocomplete and reduces webpack complexity.

---

Method 3: Using Next.js `` Component

Sometimes, an SVG is incredibly complex—like an illustration with hundreds of paths, gradients, and filters. In these cases, treating it as a React component can bloat your DOM and slow down rendering.

For complex SVG illustrations, it is better to treat them as standard images using the Next.js next/image component.

import Image from 'next/image';
import complexIllustration from '@/assets/illustration.svg';

export default function Hero() {
  return (
    <div>
      <Image 
        src={complexIllustration} 
        alt="A complex vector illustration showing data flow"
        width={500}
        height={400}
        priority
      />
    </div>
  );
}

Pros and Cons of `` for SVGs

• Pro: Keeps your DOM clean and prevents React from having to parse thousands of nodes.
• Pro: Next.js can cache the asset efficiently.
• Con: You cannot change the colors using CSS currentColor. The SVG is completely static, just like a PNG.

---

Accessibility Best Practices for Icons

A beautiful icon is useless if a visually impaired user relies on a screen reader that cannot understand it. Always follow these rules:

1. Decorative Icons

If an icon is purely visual and accompanied by text (e.g., an envelope icon next to the word "Email"), hide the icon from screen readers to prevent redundant announcements.

<EnvelopeIcon aria-hidden="true" />
<span>Email Us</span>

2. Standalone Interactive Icons

If an icon is a button without text (like a hamburger menu or a close "X" button), you must provide context. Use an aria-label or visually hidden text.

<button aria-label="Close menu">
  <CloseIcon aria-hidden="true" />
</button>

---

Conclusion

Mastering SVG icons in React and Next.js revolves around flexibility and performance. For UI elements (menus, chevrons, user avatars), inline React components utilizing currentColor provide the ultimate developer experience. For large, static graphics, the next/image component keeps your application running smoothly.

If you are looking for the perfect icons for your next project, explore the FluxToolkit Free Icon Library. You can search across 150+ open-source collections, customize colors and sizing in real-time, and copy the production-ready React code instantly.

---