How to simply use Font Awesome 6 in React
Tags: javascript, beginners, react, webdev
Published: 2022-05-23 05:10:21

If you have heard about [Font Awesome](https://fontawesome.com/docs/web/use-with/react/), you know how helpful it is for web developers. In case you have not, Font Awesome is a place where you can find great icons for your projects. 
With the new version 6 released, we have access to many more icons than in previous versions. 

Font Awesome has five types of icons available. 
fas for Font Awesome solid, fal for Font Awesome Light, and others for Thin, Regular, and Duotone. These add a great deal of flexibility to UI/UX design. 
However, the Light, Thin, and Duotone are available for pro members only.

It is available for multiple frameworks like HTML, React, Angular, and Vue 💪🏻.

### Installation
Let us get started with installing the libraries required for react-fontawesome to work.

```
// If you are using npm:
$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

// or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
```

> The packages here are for the free version. If you’re looking to utilize new pro icons and styles, look at their [site](https://fontawesome.com/docs/web/use-with/react/) for additional installation and setup directions.


![FontAwesome Icons Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhu2hfo9dn3shytdgfll.png)

### Implementation
With that done, we can start implementing these icons throughout our app.
There are different ways you can use the icons. Here, we will see the way that is usually used and is effortless to the greatest extent.
We import the fontawesome-svg-core module into our root level of the application, i.e., App.js, and use the _**library.add**_ method to add them to the app.

```javascript
//App.js
import { library } from "@fortawesome/fontawesome-svg-core";
import { faMoon, faRocket } from "@fortawesome/free-solid-svg-icons";

library.add(faMoon, faRocket);
…
```

> All icons can be found in [Font Awesome’s icon library](https://fontawesome.com/icons).

That completes the implementation of the icons in the application.
Let us create a component called Component.js. Since the icons are already added to our library in App.js, we just need to import this:

```javascript
// Component.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Component = () => {
  return (
    <div className="App">
      To the Moon:
      <FontAwesomeIcon icon="moon" />
      <FontAwesomeIcon icon="rocket" />
    </div>
  );
};
```

By adding **faMoon** and **faRocket** to the library, we can refer to them throughout the app using their icon string names _**moon**_ and _**rocket**_ (in lowercase letters). If there are two parts like **faTruckMonster** then it would be _**truck-monster**_. Just pay attention to the names displayed on the icon cards on the website.


![Default state of icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kdbij6ec8b2xayacoe1.png)

So initially, the icons will be in their default form, squished and small.

```javascript
<FontAwesomeIcon icon="moon" color="silver" size="3x" />
<FontAwesomeIcon icon="rocket" color="rebeccapurple" size="2x" />
```

FontAwesomeIcon component can take a few different props to change the icon style. Here we used the color and size props. The size prop expects a string value like xs, lg, 2x, 3x, etc.

There are quite a few more props that can also be passed. Notably, the rotation and pulse boolean props will have the icon rotate on itself.

We can add custom CSS to them in the _**.css**_ file. Since the icons are SVG we can change the font size and color properties to something to our liking.


![Icons after adding CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e29k888j97is9rqt3rp.png)

> Note: Don't use the CDN link of FontAwesome in your index.html file. It will decrease the performance of your site.

You are now able to use icons in any app that you want. So, build projects and have fun with them.

Thanks for Reading!