logo

Install Fontawesome with NextJS

A simple tutorial on how to install and use fontawesome into a NextJS project.

Install all of the dependencies

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

Initialize the fontawesome library

  1. Add the following imports into you _app.js file:
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCoffee)
  1. You can now use the component anywhere in the project this way:
<FontAwesomeIcon icon={['fab', 'twitter']} />
<FontAwesomeIcon icon="coffee" />