How to use React Icons in Next.js ?

Last Updated : 13 May, 2024

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:

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.

CSS

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

JavaScript

// 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.

CSS

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

JavaScript

// 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:

using react icons in next js

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

CSS

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

JavaScript

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>     ); }