ReactNative Vector Icon Usage For Android

ReactNative provide us third party library react-native-vector-icons by using which  we can use built_in icons for different platforms(android,windows,ios).


For installing react-native-vector-icons in android:

Run:  npm install react-native-vector-icons –save


  • Edit android/settings.gradle to look like this (without the +): = 'MyApp'
    include ':app'
    + include ':react-native-vector-icons'
    + project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
  • Edit android/app/build.gradle (note: app folder) to look like this:
    apply plugin: ''
    android {
    dependencies {
      compile fileTree(dir: 'libs', include: ['*.jar'])
      compile ""
      compile "com.facebook.react:react-native:+"  // From node_modules
    + compile project(':react-native-vector-icons')
  • Edit your (deep in android/app/src/main/java/…) to look like this (note two places to edit):
    package com.myapp;
    + import com.oblador.vectoricons.VectorIconsPackage;
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
          new MainReactPackage()
    +   , new VectorIconsPackage()

Option: With Gradle (recommended)

This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following at the bottom:

  • Use this if you want to copy all the fonts.
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"


  • Use this if you want to copy only some of the fonts.
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Leave a Reply