How to use “Hero Icons” with Next.js 13.3

If you’re looking to add some sleek and stylish icons to your Next.js 13.3 project, look no further than “Hero Icons”. This popular icon library is a great way to add some visual flair to your web applications, and integrating it with Next.js is a breeze.

Step 1: Install “Hero Icons”

The first step is to install “Hero Icons” using npm. In your terminal, navigate to your Next.js project and run the following command:

npm install @heroicons/react

Step 2: Import and Use the Icons

Once “Hero Icons” is installed, you can import and use the icons in your Next.js components. For example, if you want to use the “AcademicCap” icon, you can import it at the top of your component file like so:


import { AcademicCapIcon } from '@heroicons/react/solid'


Then, you can use the “AcademicCap” icon in your JSX like this:


<AcademicCapIcon className="h-6 w-6 text-indigo-600" />


Replace “h-6”, “w-6”, and “text-indigo-600” with the desired styling for your icon.

Step 3: Enjoy Your Stylish Icons

That’s all there is to it! With “Hero Icons” installed and integrated with Next.js, you can now enjoy using a wide variety of stylish icons in your web application. Whether you need simple arrows, user avatars, or complex symbols, “Hero Icons” has you covered.

So go ahead and add some visual flair to your Next.js 13.3 project with “Hero Icons” – your users will thank you for it!