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

react-native init myfontawesomeproject

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.

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

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

cd ios && pod install

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 :) )

npm i --save @fortawesome/free-brands-svg-icons

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)

npm i --save @fortawesome/free-regular-svg-icons

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

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons

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

cd ios && pod install

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

class App extends React.Component{
render(){
return(
<View style={{marginTop:100}}>
<Text style={styles.centerText}>My font awesome project!</Text>
</View>
)
}
}

In addition, replace “styles” stylesheet with the below

const styles = StyleSheet.create({
centerText:{
textAlign:'center'
}
});

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.

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

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

import { faLock,faAirFreshener,faAnchor } from '@fortawesome/free-solid-svg-icons';

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

import {faAdobe,faApple,faMicrosoft} from '@fortawesome/free-brands-svg-icons';

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.

<View style={{ flexDirection: 'row', justifyContent:'space-evenly' }}>
</View>

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.

<FontAwesomeIcon icon={faLock} size={40} color={"blue"} />

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.

<View style={{ flexDirection: 'row', justifyContent:'space-evenly' }}>
<FontAwesomeIcon icon={faLock} size={40} color={"blue"} />
<FontAwesomeIcon icon={faAirFreshener} size={30} color={"red"} />
<FontAwesomeIcon icon={faAnchor} size={50} color={"purple"} />
</View>

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

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

<View style={{ flexDirection: 'row', justifyContent:'space-evenly' }}>
<FontAwesomeIcon icon={faAdobe} size={30} />
<FontAwesomeIcon icon={faApple} size={30} />
<FontAwesomeIcon icon={faMicrosoft} size={50} />
</View>

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.

<View style={{ flexDirection: 'row', justifyContent:'space-evenly' }}>
<FontAwesomeIcon icon={faAdobe} size={30} color={'red'} />
<FontAwesomeIcon icon={faApple} size={30} color={'grey'} />
<FontAwesomeIcon icon={faMicrosoft} size={50} color={'#48dbfb'} />
</View>

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!