Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

Fontawesome 5 in Reactjs & Gatsbyjs Project

June 02, 2020 #Reactjs, #Gatsbyjs, #Fontawesome

How to use Fontawesome 5 in your Reactjs and Gatsbyjs project? Why I can’t find Facebook, Twitter, Instagram and other brand icons in the Reactjs Fontawesome?

Let’s begin.

How To Install Fontawesome In Reactjs & Gatsbyjs Project?

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

Note: You might think the spelling is wrong. It’s not, these are the official Fontawesome’s npm packages. Check out the Fontawesome npm doc here.

How To Use Fontawesome In Reactjs & Gatsbyjs Project?

Visit Fontawesome Search Gallery. If you click the link, I already apply the free icon filter. In case, the filter is not applied.

Click the free filter as shown below:-

search fontawesome icon

Find the icon you want by keyword - home, coffee, sun, moon, twitter, arrow and so on. Please note that whichever icon name you find in Fontawesome, you have to convert it to camelCase.

Fontawesome search result - arrow up

  1. fa-arrow-up -> faArrowUp
  2. fa-social-panel -> faSocialPanel
  3. fa-book-open -> faBookOpen
  4. and so on

Then you could use the icon in a component by:-

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faArrowUp } from "@fortawesome/free-solid-svg-icons"
const YourComponent () => {
return (
<>
<FontAwesomeIcon icon={faArrowUp} />
</>
)
}
export default YourComponent

What if you want to use the same icon in a different component?

Instead of importing the same icon again and again, you could use the Fontawesome library.

How to use it?

Go to App.js

import { library } from "@fortawesome/fontawesome-svg-core"
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons"
library.add(faSun, faMoon)

As simple as that, you can start using the icons in all your component by just:-

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
const YourComponentA = () => (
<div>
<FontAwesomeIcon icon={faSun} />
<FontAwesomeIcon icon={faMoon} />
</div>
)
export default YourComponentA
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
const YourComponentB = () => (
<div>
<FontAwesomeIcon icon={faSun} />
<FontAwesomeIcon icon={faMoon} />
</div>
)
export default YourComponentB

Why Twitter, Facebook, Google and other brand icons are missing in React’s Fontawesome?

When you try import twitter icon

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTwitter } from "@fortawesome/free-solid-svg-icons"
const YourComponent = () => {
return <FontAwesomeIcon icon={faTwitter} />
}
export default YourComponent

The Twitter icon is not displaying.

Why?

It’s because brand icons have it own npm package.

npm i @fortawesome/free-brands-svg-icons
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
// import { faTwitter } from "@fortawesome/free-solid-svg-icons"
import { faTwitter } from "@fortawesome/free-brands-svg-icons"
const YourComponent = () => {
return <FontAwesomeIcon icon={faTwitter} />
}
export default YourComponent

Save your file now and check your component.

The Twitter icon shows up.

Find an error, feel free to reach me out:-


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me