Using react-native-vector-icons in React Native

react-native-vector-icons is a library that lets you integrate a variety of icons into your React Native app, improving design and user experience. It supports popular icon sets like FontAwesome, Material Icons, and Ionicons. Explore available icons here. Step 1: Install the Library Install via npm or Yarn: npm install react-native-vector-icons or yarn add react-native-vector-icons Available Icon Sets Icon libraries available include: 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 here. Step 2: Configure Fonts Android Setup In android/app/build.gradle, add the fonts: react { project.ext.vectoricons = [ iconFontNames: ['MaterialCommunityIcons.ttf', 'FontAwesome.ttf', 'AntDesign.ttf'] ] apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" } iOS Setup In Info.plist, add the fonts: UIAppFonts MaterialCommunityIcons.ttf FontAwesome.ttf AntDesign.ttf Also, in react-native.config.js, disable iOS auto-linking: module.exports = { 'react-native-vector-icons': { platforms: { ios: null, }, }, }; Run the command: npx react-native-asset Step 3: Use Icons in Your Components Import and use icons like this: import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; const MyComponent = () => ( ); You can replace MaterialCommunityIcons with other icon sets as needed. Conclusion By integrating react-native-vector-icons, you can enhance your app with a wide range of high-quality icons. The setup process is simple and involves configuring a few files for Android and iOS.

May 4, 2025 - 16:23

Using react-native-vector-icons in React Native

react-native-vector-icons is a library that lets you integrate a variety of icons into your React Native app, improving design and user experience. It supports popular icon sets like FontAwesome, Material Icons, and Ionicons. Explore available icons here.

Step 1: Install the Library

Install via npm or Yarn:

npm install react-native-vector-icons

yarn add react-native-vector-icons

Available Icon Sets

Icon libraries available include:

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 here.

Step 2: Configure Fonts

Android Setup

In android/app/build.gradle, add the fonts:

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

iOS Setup

In Info.plist, add the fonts:

UIAppFonts

    MaterialCommunityIcons.ttf
    FontAwesome.ttf
    AntDesign.ttf

Also, in react-native.config.js, disable iOS auto-linking:

module.exports = {
  'react-native-vector-icons': {
    platforms: {
      ios: null,
    },
  },
};

Run the command:

npx react-native-asset

Step 3: Use Icons in Your Components

Import and use icons like this:

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

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

You can replace MaterialCommunityIcons with other icon sets as needed.

Conclusion

By integrating react-native-vector-icons, you can enhance your app with a wide range of high-quality icons. The setup process is simple and involves configuring a few files for Android and iOS.