Using Font Awesome Icons in React Native

Last updated on June 3, 2020 A Goodman Loading... Post a comment

This tutorial will show you how to use Font Awesome icons in a React Native app.

Adding Font Awesome to your React Native project

Install the required packages:

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

Link your native dependencies by running:

npx react-native link


Import the FontAweasomeIcon component:

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

Import the icons you need:

import {
// some icons
} from '@fortawesome/free-solid-svg-icons';

To see the full list of available icons, go to:



// App.js

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {faEye, faSearch, faBars, faSmile} from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <View style={styles.screen}>
      <Text>Some Text</Text>
      <FontAwesomeIcon icon={faEye} size={50} style={{color: 'red'}} />
      <FontAwesomeIcon icon={faSearch} size={50} style={{color: 'blue'}} />
      <FontAwesomeIcon icon={faBars} size={50} style={{color: 'black'}} />
      <FontAwesomeIcon icon={faSmile} size={50} style={{color: 'yellow'}} />

export default App;

/// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',


I hope this short article will help you a a little bit. Happy coding and have a nice day 🙂

Notify of
Inline Feedbacks
View all comments

Related Articles