How to add font-awesome 5 icons to your React-Native project

It is great weather time in the UK at the moment so I thought i would do another tutorial, this time i will be showing you how to incorporate font-awesome icons into your React-Native project. Here we go!

So first thing is to open your terminal or command prompt and navigate to the folder in which your project to be, then enter

Once you have created this project there are various packages you will need install to be able to font awesome icons, enter the below on your terminal within your project to install those packages.

The fontawesome-svg-core’ package mixes JavaScript with SVG

Once you have ran all of these commands we need to complete the setup of installing these pod packages on iOS so enter the below

If you wish to company/brand icons such as Amazon or Apple’s in your react-native app then you can install the below ( I will be showing an example of this in my tutorial later so if you want to follow my tutorial exactly you should install this package too :) )

In addition, if you want include the regular icons of font awesome you can install the below (this gives you access to things like address-card, acorn, angry, apple-alt and badge-sheriff)

Furthermore, if you are subscribed to the pro version of font-awesome (which you are a very lucky person if you are!) install the below packages

If you install any of those additional packages remember to run the below again to link the iOS dependencies.

If you have already ran your react-native project and have the simulator open please close the simulator and terminal as sometimes react-native will not work if you have just installed dependencies and new functionality such as fonts and requires a complete restart.

Now when you have restarted the application removed whatever react-native presets your “app” const variable to be and replace it with the below

In addition, replace “styles” stylesheet with the below

Your app should now look incredibly amazing like the below

To use the fonts is incredibly easy thanks to the packages developed, all we need to do is import the “FontAwesomeIcon” from the “react-native-fontawesome” package in the App.js file using the code below, this will act as a container for the icon which we set as a prop within the “FontAwesomeIcon” component.

For this tutorial i will be importing icons from the “free-solid-svg-icons” and “free-brands-svg-icons” package.

The next step is to import the icon from the relevant package.

Below are the 3 icons I will be importing from the “free-solid-svg-icons” package in the App.js file

Below are the 3 icons I will be importing from the “free-brands-svg-icons” package in the App.js file

Furthermore, before using these on the screen I will create a view container for the first 3 from the solid svg package and set a couple style attributes to make the icons appear nicer.

I have set a “flexDirection” of row which will show the content inside horizontally instead of vertically and “justifyContent” set to “space-evenly” will space out the 3 icons with equal space in between.

Above is a basic example of how to use a “FontAwesomeIcon”, see that we use the “icon” prop to refer to a font-awesome icon we imported from the “free-solid-svg-icons” package. We can also set the colour and size as well as a few more props of the icon such as style, transform and masking, however, that is out of scope for this tutorial. Think of the “size” prop as the font-size attribute used. We will now use the “FontAwesomeIcon” 2 more times so now our view container code will look like the below.

Output of the font-awesome code from the svg-icons package

I will now do the exact same for the “brand” package

If we just write that code you will see that icons show but are black, if you want to add colour to the icons just use the colour prop. I have added some colour to the brands icons below.

So now the app looks like the following.

And there you have it, I know this was a very basic tutorial but it was meant to be just that, as I think most people will just want to really find out how to use font-awesome in react-native and maybe not do so much customising, however, every circumstance is different.

So we just need to install the necessary packages (remember to do “pod install” too when inside the ios folder)

Restart the simulator and terminal

Import the “FontAwesomeIcon” component from “react-native-fontawesome”

Import the icon from the package it is contained

Then set any additional props you’d like

Thank you for reading, I hope you learned something from this tutorial and found it informative! If not tell me why and I will try to improve for the future, as always a share or clap is appreciated ;)

Feel free to check out my blog — https://cowboycode.co.uk/

Take care!

Software Developer in the UK. With a keen passion for React Native & C#. Blog — https://cowboycode.co.uk/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store