DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on • Edited on

Integrating React Native Vector Icons in Your Project

react-native-vector-icons is a powerful library that lets you incorporate a variety of icons into your React Native app, boosting design and user experience. You can select icons from popular sets like FontAwesome, Material Icons, Ionicons, and many more. Explore available icons here.


Step 1: Install the Library

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

npm install react-native-vector-icons
Enter fullscreen mode Exit fullscreen mode

or

yarn add react-native-vector-icons
Enter fullscreen mode Exit fullscreen mode

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.


Step 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"
...
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
};
Enter fullscreen mode Exit fullscreen mode

Step 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" />
);
Enter fullscreen mode Exit fullscreen mode

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


Conclusion

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.

Top comments (0)