1. Icon Monks
2. Guides
3. Next.js

How to use icons in Next.js

Install @icon-monks/react and import icons by name. From version 0.4.3 the icons work as React Server Components, so you can use them in App Router pages and layouts. They render to plain SVG in the server HTML with no client JavaScript, and only the icons you import are bundled.

Steps

1. Install the package. Run npm install @icon-monks/react (or the pnpm, yarn or bun equivalent) in your Next.js project.
2. Import an icon. Import icons by name, for example import { House } from '@icon-monks/react', in any page, layout or component.
3. Render it. Use it like any component: <House size={24} />. Set weight, size and color with props.
4. Label meaningful icons. Add aria-label to icons that carry meaning on their own and aria-hidden="true" to icons next to text.

Server Components and the App Router

// app/page.tsx (a Server Component)
import { House, Gear } from '@icon-monks/react';

export default function Page() {
  return (
    <nav>
      <a href="/"><House aria-hidden="true" /> Home</a>
      <a href="/settings"><Gear aria-hidden="true" /> Settings</a>
    </nav>
  );
}

From version 0.4.3 the icons need no 'use client': a Server Component renders them straight to SVG in the first HTML and sends no JavaScript for them. On version 0.4.2 and earlier, import them from a file that starts with 'use client' instead.

Set defaults with IconContext

// app/icon-defaults.tsx
'use client';
import { IconContext } from '@icon-monks/react';

export function IconDefaults({ children }) {
  return <IconContext.Provider value={{ size: 20, weight: 'bold' }}>{children}</IconContext.Provider>;
}

// app/layout.tsx: wrap {children} in <IconDefaults>

A context provider has to live in a client component, so put it in its own small file. Server Components cannot read context, so the defaults apply to icons rendered inside client components; pass props to icons in Server Components.

Keep the bundle small

Each icon is its own ES module and the package declares sideEffects: false, so Next.js only bundles the icons you import. Icons used only in Server Components add nothing to the browser bundle; in client components each costs about 1 KB. Deep imports such as @icon-monks/react/icons/House work too.

Pages Router, static export and Vercel

Nothing changes in the Pages Router: import and render icons as usual. Static export (output: 'export') and deploys to Vercel or any Node host work the same way, because the icons render to plain SVG.

Frequently asked questions

More guides

• Icons in Figma
• Color and size
• SVG vs icon font
• Choosing a weight
• Accessible icons
• Tailwind CSS
• Choosing a library

Written by Atiqur Rahaman, Founder & CEO, Design Monks & Dev Monks at Design Monks. About Icon Monks

Last updated 3 November 2026 with version 0.4.3. Release notes