# Using Font Awesome 5 🏳️ in React

The [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/using-with/react) went all out with new version 5 adding a wide variety of SVG icons and providing users with new features🤩.

If you’ve worked with Font Awesome in the past, something like `fa-profile` might look familiar. Font Awesome introduced icon styles like `fas` for Font Awesome solid, `fal` for Font Awesome Light, etc. This adds a great deal of flexibility for UI/UX design.

![image](https://cdn.hashnode.com/res/hashnode/image/upload/v1688718748399/68d47958-e1d3-4e50-af10-1a774f77cb8f.png align="left")

Moreover, there are Font Awesome packages (like the one we're going to use!) for *React*, Angular, and Vue 😮.

## Installation

To get started, we’re going to install `react-fontawesome` along with their libraries.

```plaintext
// 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 we're introducing just contain the free version 🆓. If you’re looking to utilize new pro icons and styles, look at their* [*site*](https://fontawesome.com/how-to-use/on-the-web/using-with/react) *for additional installation and setup directions.*

![image](https://cdn.hashnode.com/res/hashnode/image/upload/v1688718750045/6f27e4e6-e2c2-4d80-887d-4b6b3d12a7a4.png align="left")

## Implementation

Let's move forward to implement these beautiful icons 👌 throughout our app.

*There are numerous approaches to utilize these symbols however we will going to focus on building a library to effortlessly get to all symbols.*

The following code to add icons to the library can be done at a root level of our application i.e `App.js`. We’ll start by importing the required files and calling `fontawesome-svg-core`’s `library.add` to pull our icons.

```javascript
//App.js

import { library } from "@fortawesome/fontawesome-svg-core";
import { faCheckSquare, faMugHot } from "@fortawesome/free-solid-svg-icons";

library.add( faCheckSquare, faMugHot);

//...
```

> All icons can be found in [Font Awesome’s icon library](https://fontawesome.com/icons?d=gallery&m=free).

We have successfully added the icons we need. Now it's time to implement it in our component 👍. Imagine that we have a component called `Icon.js`. Since they are already been added to our library in `App.js` we just need to import this:

```javascript
// Icon.js

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

export const Drink = () => (
    <div className="App">
      <div>
       <FontAwesomeIcon icon="check-square" />
       Drink: <FontAwesomeIcon icon="mug-hot" />
      </div>
    </div>
)
```

By adding `faCheckSquare` and `faMugHot` to the library, we can refer to them throughout the app using their icon string names `check-square` and `mug-hot` (in lowercase letters).

![image](https://cdn.hashnode.com/res/hashnode/image/upload/v1688718751453/636eeb8f-6abc-42f2-a5f5-c0b33e14f6c7.png align="left")

Wait 🤔, I think our icons and text are a little squished and, might I venture to say, boring, so let’s add a space between the icon and the text and change the icon’s color and size :

```javascript
<FontAwesomeIcon icon="check-square" />{' '}
Drink: <FontAwesomeIcon icon="mug-hot" color="pink" size="2x" />
```

As you can see, the *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` and so on 😃. There are quite a few more props that can be passed-in. Notably, the `rotation` and `pulse` boolean props will have the icon rotate on itself.

![image](https://cdn.hashnode.com/res/hashnode/image/upload/v1688718753594/5d43eede-b672-40bb-ab66-6df78fe6cd21.png align="left")

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

## Conclusion

That's all. Hurray🎉, you did it. The process is pretty straight-forward but you can easily implement this in your app. Do give it a try, you will definitely love it 😍.

Thanks for Reading! Have a great day :)

Find me on Twitter [@Adyasha8105](https://twitter.com/Adyasha8105)👀. This post is also posted on my [blog](https://www.adyablogs.tech/blogs/Using-Font-Awesome-5-in-React) page.