How to use Font Awesome with Next.js

Last updated on January 26, 2022 Napoleon Loading... 9 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;
// kindacode.com

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:

// index.js

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

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

const Home = (props) => {
  return (
    <div>
      <FontAwesomeIcon
        icon={faSearch}
        style={{ fontSize: 100, color: "blue" }}
      />

      <FontAwesomeIcon
        icon={faAmbulance}
        style={{ fontSize: 100, color: "orange" }}
      />

      <FontAwesomeIcon
        icon={faAnchor}
        style={{ fontSize: 100, color: "green" }}
      />
    </div>
  );
};

export default Home;
// Kindacode.com

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.

Further reading:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
9 Comments
Inline Feedbacks
View all comments
emu
emu
21 days ago

love you

A Goodman
Admin
A Goodman
21 days ago
Reply to  emu

love you too

So love
So love
2 months ago

It awesome. Thank you

Mohammad asif safri
Mohammad asif safri
4 months ago

that is greet. but how can import social media icon like facebook and so on ?.
the socila media icons start with the “fab”

Tomi Močnik
Tomi Močnik
27 days ago

Install @fortawesome/free-brands-svg-icons and than you can import it as

import { faFacebook } from "@fortawesome/free-brands-svg-icons";

the rest is the same.

Lakmal
Lakmal
10 months ago

Thanks. This was a great help!

Tyir
Tyir
1 year ago

It is possible to install the regular package too with :

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

Bill
Bill
1 year 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
1 year ago
Reply to  Bill

Happy coding

Related Articles