How to use FontAwesome in Next.js?

Before we jump to the steps to add FontAwesome to Next.js screens, let’s first know what FontAwesome is.

FontAwesome is an icon library and toolkit that provides a range of free solid, social, and outline icons. It comes in handy when building websites for personal use.
It has a list of scalable vectors that are highly customizable.

Adding Font Awesome to Next.js

1. Run the following command in the terminal:

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

2. Create and edit the _app.js file

3. Add the following piece of code to the file:

import "@fortawesome/fontawesome-svg-core/styles.css"
import { config } from "@fortawesome/fontawesome-svg-core"; 
config.autoAddCss = false;

4. Now you can directly import the icons you want to use in your component and use them.

Happy Coding!