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

1. Create and edit _app.js file
2. Add the following piece of code in the file:

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

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

Happy Coding!

Follow us on Instagram