---
title: "Using Unplugin Icons in Next.js: Auto-Import Any Icon"
description: "A step-by-step guide to installing and using Unplugin Icons in Next.js to auto-import SVG icons from any icon set, on demand."
source: "https://www.launchfa.st/blog/nextjs-unplugin-icons"
author: "Rishi Raj Jain"
created_at: 2024-06-09T00:00:00.000Z
updated_at: 2026-07-02T00:00:00.000Z
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
ℹ️ Available today with LaunchFast Starter Kits
In this guide, you will learn how to use [Unplugin Icons](https://github.com/unplugin/unplugin-icons) in a Next.js application. You will go through the process of setting up a new Next.js project, configuring Unplugin Icons, and using them to leverage a huge collection of icons in your application.
## Prerequisites
You'll need the following:
- [Node.js 20](https://nodejs.org/en/blog/announcements/v20-release-announce) or later
## Table Of Contents
- [Create a new Next.js application](#create-a-new-nextjs-application)
- [Integrate Unplugin Icons in your Next.js project](#integrate-unplugin-icons-in-your-nextjs-project)
- [Install the Unplugin Icons dependencies](#install-the-unplugin-icons-dependencies)
- [Include Type Definitions for Unplugin Icons](#include-type-definitions-for-unplugin-icons)
- [Use Unplugin Icons in the index route](#use-unplugin-icons-in-the-index-route)
- [Build and Test your Next.js application locally](#build-and-test-your-nextjs-application-locally)
## Create a new Next.js application
Let’s get started by creating a new Next.js project. Open your terminal and run the following command:
```bash
npx create-next-app@latest my-app
```
When prompted, choose:
- `Yes` when prompted to use TypeScript.
- `No` when prompted to use ESLint.
- `Yes` when prompted to use Tailwind CSS.
- `No` when prompted to use `src/` directory.
- `Yes` when prompted to use App Router.
- `No` when prompted to customize the default import alias (`@/*`).
Once that is done, move into the project directory and start the app in development mode by executing the following command:
```bash
cd my-app
npm run dev
```
The app should be running on [localhost:3000](http://localhost:3000/). Now, let's close the development server to install Unplugin Icons.
## Integrate Unplugin Icons in your Next.js project
### Install the Unplugin Icons dependencies
Execute the commands below to install the necessary packages for using Unplugin Icons in Next.js:
```bash
# unplugin-icons package for Webpack compiler
npm i -D unplugin-icons
# @iconify/json package for the icons collection
npm i -D @iconify/json
# @svgr/core and @svgr/plugin-jsx packages for React compatibility
npm i -D @svgr/core @svgr/plugin-jsx
```
The command installs the following libraries:
- `unplugin-icons`: A package to access thousands of icons as components on-demand universally.
- `@iconify/json`: A big collection of open source vector icons, all validated, cleaned up and converted to the same easy to use format.
- `@svgr/core`: A package to transform SVGs into React components.
- `@svgr/plugin-jsx`: A package to transform SVG into JSX.
Further, perform the following additions in `next.config.mjs` to use the Unplugin Icons integration:
```tsx ins={3,7-15}
// File: next.config.mjs
import unpluginIcons from 'unplugin-icons/webpack'
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack(config) {
config.plugins.push(
unpluginIcons({
compiler: 'jsx',
jsx: 'react',
}),
)
return config
},
}
export default nextConfig
```
### Include Type Definitions for Unplugin Icons
To make sure that you can leverage the type definitions of the Unplugin Icons in Next.js, you would want to globally define such specific Icon imports as React component imports. To do so, update the `tsconfig.json` file with the following code:
```json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"types": ["unplugin-icons/types/react"], // [!code ++] // [!code focus]
"jsx": "preserve",
"incremental": true,
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
```
The code above simply marks each import from `~icons` to be considered as a React component in your Next.js application.
### Use Unplugin Icons in the index route
Finally, import the icon and use it in your Next.js index route with the following code:
```tsx
import ClockIcon from '~icons/mdi/clock'
export default function Home() {
return (
);
}
```
The code above imports an icon as a React component in the index route.
You're all done now!
## Build and Test your Next.js application locally
To test the application, prepare a build and run the preview server using the command below:
```bash
npm run build && npm run start
```
## Conclusion
In this guide, you learned how to use Unplugin Icons in a Next.js application.
Working in another framework? See how to auto-import icons with [Unplugin Icons in SvelteKit](/blog/sveltekit-unplugin-icons) or [Unplugin Icons in Astro with React](/blog/react-astro-unplugin-icons).
If you have any questions or comments, feel free to reach out to me on [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_).