How to Add React Native Vector Icons Into Your Next Project

react-native-vector-icons is a powerful library that lets you incorporate a variety of icons into your React Native app, boosting the design and user experience. These icons include navigation bars, buttons, logos and other UI elements. You can select icons from popular sets like FontAwesome, Material Icons, Ionicons and many more.

Here’s how to integrate it into your next React Native project.

3 Steps to Add React Native Vector Icons

1. Install the Library

To install react-native-vector-icons, use npm or Yarn:

npm install react-native-vector-icons

Or

yarn add react-native-vector-icons

Available Icon Sets

With react-native-vector-icons, you have access to many icon libraries, including:

• AntDesign (298 icons)
• Entypo (411 icons)
• EvilIcons (70 icons)
• Feather (286 icons)
• FontAwesome 5 (1,598 free icons)
• Ionicons (1,338 icons)
• MaterialIcons (2,189 icons)
• MaterialCommunityIcons (6,596 icons)

Explore other sets in the icon gallery.

More on ReactCreate React App and TypeScript: A Quick How-To

2. Configure Fonts

Android Setup

In android/app/build.gradle, specify the fonts to include in React:

react {
...
project.ext.vectoricons = [
      iconFontNames: ['MaterialCommunityIcons.ttf', 'FontAwesome.ttf', 'AntDesign.ttf'] // Add other font files as needed
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
...
}

iOS Setup

In Info.plist, add the fonts under UIAppFonts:

<key>UIAppFonts</key>
<array>
    <string>MaterialCommunityIcons.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>AntDesign.ttf</string>
</array>

Additionally, configure react-native.config.js to prevent automatic linking on iOS and add custom assets:

// react-native.config.js
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null, // Disable auto-linking for iOS to avoid font duplication issues
      },
    },
  },
  // assets: ['./src/assets/fonts/'], // Custom font path
};

Finally, run it in your terminal:

npx react-native-asset

More on ReactReact Infinite Scroll: A Guide

3. Use Icons in Your Components

Now, you can import and use icons in your app:

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

const MyComponent = () => (
  <Icon name="home" size={30} color="#900" />
);

Replace MaterialCommunityIcons with any other icon set as per your requirements.

Integrating react-native-vector-icons provides you with a vast range of icon options, enhancing your app’s look and feel. With minimal setup in build.gradle, Info.plist, and react-native.config.js, you’re ready to incorporate high-quality icons into your React Native project.

Frequently Asked Questions