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

Usage

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:

your_project/node_modules/@fortawesome/free-solid-svg-icons/index.d.ts

Example:

// 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'}} />
    </View>
  );
}

export default App;

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

Screenshot:

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles