Subscribe

How to use React icons in Next.js

✍️

How to load icons in a React Next.js application

5 Oct, 2021 · 2 min read

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

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

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!

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Next portfolio - Filter by category

30 Nov, 2022 · 5 min read

Next portfolio - Filter by category

A glance at Turbopack

17 Nov, 2022 · 3 min read

A glance at Turbopack

Join 1990 devs and subscribe to my newsletter