Using Font Awesome with Nextjs and Tailwind

If you use Nextjs and TailwindCSS, you can easily integrate Font Awesome into your projects. This method will install the needed fonts direction into your project bundle so is very fast. This is not the only method, but is clean and fast and works well for me. Works for both Pages and App Router.

Here's how you do it:

This assumes you already have a nextjs project created.

Within your project directory:

Install font awesome:

npm i --save @/fortawesome/fontawesome-svg-core

Install Icons (Free or Pro)

Install free icons

npm i --save @/fortawesome/free-solid-svg-icons
npm i --save @/fortawesome/free-regular-svg-icons
npm i --save @/fortawesome/free-brands-svg-icons

configure access for pro icons (optional if you don't have a pro account)

Set Up npm Token for a Specific Project

This per-project setup lets you configure each project individually, which can be good for teams and CI/CD.

You'll need to create a .npmrc file in the root of your project (or wherever your package.json file lives) and put this in it:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=########-####-####-####-############

or if using .env variables:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FA_AUTH_TOKEN}

Set a temporary env variable in terminal to install fonts

export FA_AUTH_TOKEN=########-####-####-####-############

install pro icons

npm i --save u/fortawesome/pro-solid-svg-icons
npm i --save u/fortawesome/pro-regular-svg-icons
npm i --save u/fortawesome/pro-light-svg-icons
npm i --save u/fortawesome/pro-thin-svg-icons
npm i --save u/fortawesome/pro-duotone-svg-icons

Install fa react component

npm i --save @/fortawesome/react-fontawesome@latest

Add the following to the bottom of your import list in _app.js (pages) or your root layout.jsx (app router)

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

Now add some icons to your components and pages:

Install all icons

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro'

// <-- import styles to be used
<FontAwesomeIcon className=' text-white' icon={solid('user-secret')} />
<FontAwesomeIcon className=' text-black'  icon={regular('coffee')} />
<FontAwesomeIcon className=' text-blue' icon={brands('instagram')} />

OR

Install just the icons you want to use (recommended)

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import {faSun, faMoon} from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faSun} size="xl" />
<FontAwesomeIcon icon={faMoon} size="xl" />

Use variable as icon (in client components)

import React, { useState } from "react";

const \[faDarkLight, setFaDarkLight\] = useState(faMoon)

setFaDarkLight(faSun)

<FontAwesomeIcon icon={faDarkLight} size="xl" />