How to Use Icons in Next.js

Mastering SVGs in Next.js 14+

Next.js provides a powerful environment for modern web apps, but managing assets like icons can sometimes be tricky. Let us explore the optimal ways to use icons in the App Router.

Using SVG Files in the Public Directory

You can place your `.svg` files in the `public` directory and reference them using the standard HTML `<img>` tag or Next.js `<Image>` component. However, this prevents you from easily changing their color with CSS.

Using SVGR

To import SVGs as React components, you can install `@svgr/webpack` and update your `next.config.js`. This enables you to import SVGs identically to standard React apps.

The Best Approach: Icon Components

Our favorite method is converting raw SVG paths into reusable Next.js Server Components. Because SVGs are just XML, returning them from a lightweight Server Component results in zero client-side JavaScript!