Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

Using React Icons with the NextJs 13 app folder

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:

screenshot with arrows pointing to React Icons in a NextJs app

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.

Home Screencasts Best of Newsletter Search X