How to use React Icons in Next.js ?

Icons make the website beautiful and interactive. Icons are an important part of a website's user interfaces, which are used in expressing objects, actions, and ideas. They are used to communicate the core idea and intent of a product or action and express the object visually. Here, we will learn to use React icons in Next JS applications.

Prerequisites:

• NodeJS
• NPM
• NextJS

Approach to use React Icons in Next.js

• Firstly, Install the react-icon package using the npm command.
• This Next.js app imports the "FaBeer" icon from the "react-icons/fa" library.
• Within the "Home" component, it displays a title "Using React Icons in NextJS" alongside the "FaBeer" icon.
• Use Custom CSS for extra styling to the webpage.

Steps to Create the Next.js Application

Step 1: Create a Next application using the following command.

npx create-next-app@latest react-icon-nextapp

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd react-icon-nextapp

Step 3: Install react icons in the folder

npm install react-icons --save

Project Structure:

The updated dependencies in package.json file will look like:

    "dependencies": {
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.2.0"
  },

Example 1: The below example shows how to use react icons in a simple page.

.style_main{
    background-color: black;
    color: white;
    text-align: center;
    height: 100vh;
}

// Filename - page.js

import { FaBeer } from 'react-icons/fa';
import "./style.css";
export default function Home() {
    return (
        <main className="style_main">
            <h1>GeeksForGeeks NextJS Concepts</h1>
            <h3><b>Using React Icons in NextJS</b></h3>
            <FaBeer /><br />
        </main>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project

npm run dev

Output:

Example 2: The below example shows how to use react icons in a simple page with different font sizes to various react-icons.

.style_main{
    background-color: black;
    color: white;
    text-align: center;
    height: 100vh;
}

// Filename - page.js

import { FcCallTransfer, FcBarChart } from 'react-icons/fc';
import { Bs8CircleFill, BsAlarmFill } from "react-icons/bs";

export default function Home() {
    return (
        <main className=" style_main">

            <h1>GeeksForGeeks NextJS Concepts</h1>
            <h3><b>Using React Icons in NextJS</b></h3>
            <FcCallTransfer fontSize={20} /><br />
            <FcBarChart fontSize={30} /><br />
            <BsAlarmFill fontSize={40} /> <br />
            <Bs8CircleFill fontSize={45} />
        </main>
    );
}

Output:

Example: The below example showsuse React icons in Next.js with additional style using CSS in your "style.css".

.myIconClass{
    color: green;
    background-color: yellow;
 }
 .style_main{
    background-color: black;
    color: white;
    text-align: center;
    height: 100vh;
}

import "./style.css";

import { FcCallTransfer, FcBarChart } from 'react-icons/fc';
import { Bs8CircleFill, BsAlarmFill } from "react-icons/bs";

export default function Home() {
    return (
        <main className="style_main">

            <h1>GeeksForGeeks NextJS Concepts</h1>
            <h3><b>Using React Icons in NextJS</b></h3>
            <FcCallTransfer fontSize={20} /><br />
            <FcBarChart fontSize={30} /><br />
            <BsAlarmFill fontSize={40} /> <br />
            <Bs8CircleFill fontSize={45} className="myIconClass" />
        </main>
    );
}

Output: