How to use Font Awesome 5 with Next.js

Last updated on September 16, 2020 The Plumber Loading... 4 comments

The example below shows you how to use Font Awesome 5 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 the page/_app.js file (create one if it doesn’t exist):

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

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

export default App;

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

/node_modules/@fortawesome/free-solid-svg-icons/index.d.ts

3. Now you can use Font Awesome icons in pages or components like this:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // Import the FontAwesomeIcon component
import { faSearch } from "@fortawesome/free-solid-svg-icons"; // import the icons you need

const Home = (props) => {
  return (
    <div>
      <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
    </div>
  );
};

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 🙂

Subscribe
Notify of
guest
4 Comments
Inline Feedbacks
View all comments
Lakmal
Lakmal
1 month ago

Thanks. This was a great help!

Tyir
Tyir
3 months ago

It is possible to install the regular package too with :

npm install @fortawesome/fontawesomesvgcore @fortawesome/freeregularsvgicons @fortawesome/reactfontawesome

Bill
Bill
4 months ago

Thank you! This was driving me crazy. I kept getting ginormous icons. Nothing in their documentation said I had to load the CSS file separately.

A Goodman
Admin
A Goodman
4 months ago
Reply to  Bill

Happy coding

Related Articles