How to use Font Awesome with Next.js

Updated: January 8, 2023 By: Khue 6 comments

Font Awesome is a font and icon toolkit based on CSS and Less. It is used by millions of designers, developers, and content creators. Font Awesome provides over a thousand free icons, and they can be resized and colored to suit your needs.

The example below shows you how to use Font Awesome 6 (the latest version) with Next.js.

1. Create a new Next.js project, then install the required packages:

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

2. Edit your page/_app.js file (create one if it doesn’t exist):

// import Font Awesome CSS
import "@fortawesome/fontawesome-svg-core/styles.css"; 

import { config } from "@fortawesome/fontawesome-svg-core";
// Tell Font Awesome to skip adding the CSS automatically 
// since it's already imported above
config.autoAddCss = false; 

const App = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;

export default App;

Note that you can see all available icons in the following file:


3. Now you can add and style (font size, color, etc.) a Font Awesome icon by using the <FontAwesomeIcon/> component like this:

    style={{ fontSize: 100, color: "orange" }}

Full example:

// pages/index.js

// Import the FontAwesomeIcon component
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// import the icons you need
import {
} from "@fortawesome/free-solid-svg-icons";

const Home = (props) => {
  return (
        style={{ fontSize: 100, color: "blue" }}

        style={{ fontSize: 100, color: "orange" }}

        style={{ fontSize: 100, color: "green" }}

export default Home;

Run your project (restart if it’s already running) and see the result:

That’s it, my friend. From here, you’re pretty good to go and ready to build big things.

Newest Most Voted
Inline Feedbacks
View all comments