Use SVGs in Next.js (Custom Icons Made Easy)

Adding custom icons to your Next.js project isn’t the most intuitive thing, but it’s actually a simple two-step process once you know how. In this guide, I’ll walk you through setting up SVGs so you can use them like regular React components, apply Tailwind classes (or CSS), and style them however you like.

Set Up Your Project

Start with a fresh Next.js app (or use your existing one).
Inside the project, create a folder for SVGs:

/components
   /svgs
      web-development.svg
      index.ts

You can grab SVGs from sites like Heroicons or Phosphor Icons.

Export your icons

Inside components/svgs/index.ts, export your icons:

export { default as WebDevelopment } from "./web-development.svg";

If you add more icons later, export them here as well.

3. Update Next.js config for SVG support

By default, Next.js doesn’t treat SVGs as React components. To fix this, install SVGR:

npm install -D @svgr/webpack

Now, edit next.config.js:

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

module.exports = nextConfig;

Restart your server after making this change:

npm run dev

4. Render your SVG

Now you can import and render SVGs just like React components:

import { WebDevelopment } from "@/components/svgs";

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <WebDevelopment className="w-24 h-24 text-red-500" />
    </div>
  );
}

The text-red-500 class works because we set fill="currentColor" inside the SVG.

5. Styling tips

• Tailwind:

    <WebDevelopment className="w-32 h-32 text-green-500" />
  

• Inline styles (if not using Tailwind):

    <WebDevelopment style={{ fontSize: "100px", color: "blue" }} />
  

Both approaches work since SVGR treats SVGs as React components.

6. Watch out for SVG quirks

Not all SVGs are clean. Some have hardcoded fill="#000000" inside <path> tags, which overrides your colors.
👉 Always:

1. Remove all width, height, and fill attributes from inside <path> tags.

2. Keep only one fill="currentColor" on the root <svg> tag.

This ensures your Tailwind classes or CSS styles apply correctly.

✅ Final Thoughts

Using custom SVGs in Next.js might look tricky at first, but with SVGR it’s a breeze:

1. Clean up the SVG (remove width/height/fills, add currentColor).

2. Export it and render as a React component.

3. Style it freely with Tailwind or CSS.

And that’s it — your icons are now fully customizable and reusable across your project. 🎉