Using React Icons with the NextJs 13 app folder

DanielJanuary 16, 2023

We have seen in a previous article how to use the Font Awesome icons in NextJs.

A reader emailed me and asked how to use React Icons as an alternative to Font Awesome. Did not even know about this icon set so went and played with it a bit.

It turns out React Icons are pretty easy to use and are quite a nice icon source. Let's see!

Installing React Icons in a NextJs app

The first step will be to install the icon library. A simple install is all that we need:

npm i react-icons

Using React Icons in NextJs

After the installation is done we just need to import the icons and use them:

// app/page.js
import { FaBeer } from 'react-icons/fa';

export default function Page() {
  return <>
    <h3> Ready for a good <FaBeer />? </h3>
  </>
}

Below you have the output of this code:

You can head out to the official site and browse the full list of icons.

Just note that each icon is placed in a given set. So, be sure to import the correct set:

import { BiCycling, BiBeer } from 'react-icons/bi';
import { FaYoutube } from 'react-icons/fa';

Specifying extra properties for your React Icons

Besides the default output of an icon component we can set some extra properties to customize them:

<FaYoutube size="2em" color="red" />

The full list of currently supported properties:

• color
• size (default 1em)
• className
• style (will overwrite size and color)
• attr
• title

You can even use a React Context so that you can set up the general settings for the icons:

import { IconContext } from "react-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
    <FaFolder />
</IconContext.Provider>;

Check out the full documentation here.