Hello There π
In this article, we will learn how to implement Font Awesome icons library in a React project.
Introduction
Font Awesome is a popular icon library that provides scalable vector icons that can be customized with CSS. It is commonly used in web design and is easily recognizable by its iconic font and CSS styling. The library includes a wide variety of icons, including social media icons, user interface icons, and brand icons.
If you are new to react and donβt know how to integrate font awesome in react, or you are finding it hard to set up the font-awesome icons library in react and how to use it in react, this article is for you.
Prerequisites
To complete this tutorial, you will need the following:
- A basic understanding of React before starting this tutorial.
- Node.js installed locally. You can do so here; Install Node.js.
We will achieve our aim of this article by doing the following.
- Setting up our react project.
- Installing font awesome's SVG core package.
- Installing font awesome's icon packages (We'll be using the Free icons).
- Installing the font awesome react component.
- Importing icons into each component.
- Importing icons globally.
Setting up our react project
First, open your Visual Studio code's terminal or device's terminal and type the following command: npx create-react-app font-awesome-react
Doing this will create a react app named font-awesome-react
and all the react packages needed for the project will be installed.
Next, we will navigate into the font-awesome-react
folder by typing cd font-awesome-react
into the terminal.
To start our project, we will type npm start
. This will start the project on the development server.
Next, we will open the App.js
file in the src folder, remove the original React element rendered there and replace it with anyΒ other element of your choice.
Installing font awesome's SVG core package
We will need to install the core package, which includes all the utilities, to make the icons work.
npm i --save @fortawesome/fontawesome-svg-core
Installing font awesome's icon packages
Next, we will install the icon packages in different styles: solid, regular, light, thin, and duotone.
Not all icons are free, so you can install the icon packages for the free icons or the pro icons.
Free Icons
These are the styles available for the 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
Pro Icons
You must have a valid Pro Package Token and an active Pro Plan subscription to configure Pro access for your project if you intend to use the Pro packages, which offer additional icons and styles.
These are the styles available for the pro icons.
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
Installing the font awesome react component
Now we will install the Font Awesome React component.
npm i --save @fortawesome/react-fontawesome@latest
After installing all the necessary packages above, we will navigate to our package.json
file to see everything we have installed.
Importing icons into each component
For the purpose of this article, we will be creating a new page: IconPage.js
, which we will then import into our App.js
.
import IconPage from './IconPage'
import './App.css';
function App() {
return (
<div className="App">
<IconPage />
</div>
);
}
export default App;
We would import some icons into the IconPage.js
file.
To do this, we have to import FontAwesomeIcon
into the file.
Then, we can add any free icon we need to the project by importing the icon from the package we installed earlier. e.g:
import { faPenNib } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPenNib } from '@fortawesome/free-solid-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
const IconPage = () => {
return (
<div>
<h3>How to use font-awesome in react</h3>
<FontAwesomeIcon icon={faPenNib} />
<FontAwesomeIcon icon={faEnvelope} />
</div>
)
}
export default IconPage
This is the output we get.
If you have so many icons to use in a single file, instead of importing them individually with multiple lines of code
import { faPenNib } from '@fortawesome/free-solid-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
You can import them together in a single line.
import { faPenNib, faEnvelope } from '@fortawesome/free-solid-svg-icons'
...or you can import them globally, which we will discuss below.
Importing icons globally
To import icons globally, we will navigate to the App.js
file. We will then import a library
from the SVG core package we installed.
import { library } from '@fortawesome/fontawesome-svg-core'
Remember, we talk about the icons having different styles. We would be importing every icon style.
First, we have to know how these styles are represented.
- Solid Style -
fas
- Regular Style -
far
- Light Style -
fal
- Duotone Style -
fad
- Brand Style -
fab
So we will be importing each style with what they are represented with.
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
We imported just these three because they are the only styles available for the free icon.
We will add all the imported styles to our library by adding this code below export default App;
in the App.js
file.
library.add(fab, fas, far)
This is how the App.js
file will be now.
// import the library
import { library } from '@fortawesome/fontawesome-svg-core'
// import your icons
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import IconPage from './IconPage'
import './App.css';
function App() {
return (
<div className="App">
<IconPage />
</div>
);
}
export default App;
library.add(fab, fas, far)
Doing these, we have added Font Awesome Icons globally.
Now, let's see how to use the icons in the new file we will create. IconPageGlobal.js
.
In the IconPageGlobal.js
created, we will only import FontAwesomeIcon
by typing:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
To use the icons:
<FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
<FontAwesomeIcon icon="fa-regular fa-eye" />
This is the IconPageGlobal.js
file now.
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const IconPageGlobal = () => {
return (
<div>
<h3>How to use font-awesome Globally in react</h3>
<FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
<FontAwesomeIcon icon="fa-regular fa-eye" />
</div>
)
}
export default IconPageGlobal;
Conclusion
Importing icons globally is not recommended because it can make your package larger by including icons you won't be using. It is advised to import Font Awesome icons one at a time so that your final package sizes are as little as possible because you will only import the icons that you actually need.
To access the codes on this articles check this repository
Please leave a comment below to ask me anything! Iβm always happy to talk and help.
Kindly Connect with me on Twitter and on Linkedin
Thanks for Reading!!! π
Top comments (10)
Thanks
Awesome Thank You.
I just created the account to say "Thank You for this article". I was trying to do so by following the official documentation of FontAwesome, but it was not working.
This is great! thank you for sharing!
This is interesting, Thank you!
Thanks!, its clearer in here
Great !! Thankyou for this Article . I just Wanted to know how can i find other Icons like a Right Arrow
https://fontawesome.com/icons/arrow-right?f=classic&s=solid
This is the icon code:
Worked for me! Thanks for explaining efficiently.
Super helpful article, thank you!