How to use React icons in Next.js

Icons are a big part of most websites/applications. So let’s take a look at how we can use React icons in a Next.js project.

React icons is one of the most popular icon libraries for React-based projects. It utilizes ES6 imports meaning we only load the icons we use!

Loading React icons in Next.js permalink

We first have to add the package to our project by running the following command in your project folder to get started.

npm i react-icons

Then we can get started by importing the icons. Head over to the React icons website and find the icon you would like to use (use the left-hand search).

Then on the component we want to use the icon, we can import it like so:

import { BsGrid3X3GapFill } from 'react-icons/bs';

<button>
  <BsGrid3X3GapFill />
</button>;

Let’s put that to use and modify the grid/list view toggle we just created.

Loading multiple React icons in Next.js permalink

We’ll need two icons: a grid and a list icon. I’ve chosen both from the same icon set (bootstrap).

Let’s load both icons:

import { BsGrid3X3GapFill, BsList } from 'react-icons/bs';

And then, instead of the plain text we had, let’s change that into containing our icons.

<div className='flex justify-end p-5'>
  <button
    className='px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700'
    onClick={() => setToggleViewMode(!toggleViewMode)}
  >
    {toggleViewMode ? <BsGrid3X3GapFill /> : <BsList />}
  </button>
</div>

And that’s it. We now have our React icons set up in a Next.js application.

You can find the complete code example on GitHub.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter