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