Elevate your React Native applications with the power of customizable vector icons. Ideal for embellishing buttons, logos, and navigation or tab bars, these icons seamlessly integrate into your projects. Their versatility makes extension and styling effortless.

For the integration of .svg files natively, you can explore react-native-vector-image.

• Sponsorship
• Available Icon Sets
• Installation
  • iOS Setup
  • macOS Setup
  • Windows Setup
  • React-native-web Setup
  • Web Setup
• Icon Component
• Usage as PNG Image/Source Object
• Multi-Style Fonts
• Custom Fonts
• Animation
• Usage Examples
• Generating Your Own Icon Package
• Changelog
• License

Should you find this library beneficial, kindly contemplate the option of sponsoring.

Explore all icons.

RNVI comes with the following supported icons. You can search NPM for third party icons.

• AntDesign from Ant Group (v4.4.2 with 449 icons)
• Feather created by Cole Bemis & Contributors (v4.29.2 featuring 287 icons)
• FontAwesome 6 designed by Fonticons, Inc. (v6.5.2 featuring 2045 free and 30199 pro icons)
• Foundation by ZURB, Inc. (v3.0 with 283 icons)
• Ionicons crafted by Ionic (v7.4.0 containing 1356 icons)
• MaterialDesignIcons from MaterialDesignIcons.com (v7.4.47 including 7448 icons)
• Octicons designed by Github, Inc. (v19.9.0 with 321 icons)

• Entypo by Daniel Bruce (v1.0.1 with 411 icons)
• EvilIcons designed by Alexander Madyankin & Roman Shamin (v1.10.1 with 70 icons)
• FontAwesome by Fonticons, Inc. (v4.7.0 containing 785 icons)
• FontAwesome 5 from Fonticons, Inc. (v5.15.4 offering 1611 free and 7869 pro icons)
• Fontisto created by Kenan Gündoğan (v3.0.4 featuring 617 icons)
• MaterialIcons by Google, Inc. (v4.0.0 featuring 2234 icons)
• SimpleLineIcons crafted by Sabbir & Contributors (v2.5.5 with 189 icons)
• Zocial by Sam Collins (v1.1.1 with 100 icons)

See MIGRATION.md if you are migrating from react-native-vector-icons

1. Install the common package

   npm install --save @react-native-vector-icons/common

2. Install the packages for the icons you want use

   npm install --save @react-native-vector-icons/fontawesome6 @react-native-vector-icons/evilicons

3. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions.
4. If you are using one of the following fonts refer to their guides for further instructions

• FontAwesome 5
• FontAwesome 5 Pro
• FontAwesome 6
• FontAwesome 6 Pro
• Fontello
• Icomoon

Nothing else needed.

To use the bundled icons on iOS, follow these steps:

1. Update your pods

cd ios && pod update

This needs more work, see details in #1624

TBA: It should just work???

To port a react-native mobile app to web using react-native-web you just need to ensure the fonts are known on the web-app side.

You will need add the font-family for each font you use to your css

You can debug missing font-families by looking in the Developer console in your web browser when debugging your web app.

NOTE: if you're using webpack or similar you may need to configure webpack to handle loading of ttf fonts, using url-loader or file-loader. See Web Setup for more details.

In your App.css or similar add the font-family specifications:

@font-face {
  src: url(path/to/fonts/Ionicons.ttf);
  font-family: "Ionicons";
}

@font-face {
  src: url(path/to/fonts/FontAwesome.ttf);
  font-family: "FontAwesome";
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Brands.ttf);
  font-family: "FontAwesome5_Brands";
  font-weight: 400; /* Regular weight */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Regular.ttf);
  font-family: "FontAwesome5_Regular";
  font-weight: 400; /* Regular weight */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Solid.ttf);
  font-family: "FontAwesome5_Solid";
  font-weight: 900; /* Bold weight for solid */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/MaterialIcons.ttf);
  font-family: "MaterialIcons";
}

@font-face {
  src: url(path/to/fonts/Feather.ttf);
  font-family: "Feather";
}

@font-face {
  src: url(path/to/fonts/MaterialCommunityIcons.ttf);
  font-family: "MaterialCommunityIcons";
}

/* TODO: Add other icons fonts here */

FIXME: Can we improve on this?

To integrate the library with your web project using webpack, follow these steps:

1. In your webpack configuration file, add a section to handle TTF files using url-loader or file-loader:

   {
     test: /\.ttf$/,
     loader: "url-loader", // or directly file-loader
     include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
   }

2. In your JavaScript entry point, consume the font files and inject the necessary style tag:

   ```js
     import Icon from '@react-native-vector-icons/fontAwesome';
   
     // Generate the required CSS
     import iconFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
     const iconFontStyles = `@font-face {
       src: url(${iconFont});
       font-family: FontAwesome;
     }`;
   
     // Create a stylesheet
     const style = document.createElement('style');
     style.type = 'text/css';
   
     // Append the iconFontStyles to the stylesheet
     if (style.styleSheet) {
       style.styleSheet.cssText = iconFontStyles;
     } else {
       style.appendChild(document.createTextNode(iconFontStyles));
     }
   
     // Inject the stylesheet into the document head
     document.head.appendChild(style);
     ```
   

   By following these steps, you will seamlessly integrate the vector icons library into your web project using webpack, enabling you to effortlessly use the icons within your web application.

You can either use one of the bundled icons above or roll your own custom font.

import Icon from '@react-native-vector-icons/fontawesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;

Any Text property and the following:

Since Icon builds on top of the Text component, most style properties will work as expected, you might find it useful to play around with these:

• backgroundColor
• borderWidth
• borderColor
• borderRadius
• padding
• margin
• color
• fontSize

By combining some of these you can create for example :

Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name, size and color as described above.

const source = Icon.getImageSourceSync('user', 20, 'red');
return <Image source={source} />;
);

Alternatively you may use the async method Icon.getImageSource.

Keep in mind that Icon.getImageSourceSync is blocking and might incur performance penalties. Subsequent calls will use cache however.

Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard Icon component:

import Icon from '@react-native-vector-icons/fontawesome5';

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to solid
const myIcon2 = <Icon name="comments" size={30} color="#900" iconType="solid" />;
const myIcon3 = <Icon name="comments" size={30} color="#900" iconType="light" />; // Only in FA5 Pro

All static methods from Icon is supported by multi-styled fonts.

The best approach is to use our icon generator to create your own icon package.

See [CREATE_FONT_PACKAGE.md] to learn how to create your own font packages.

You can also use createIconSet(glyphMap, fontFamily[, fontFile]) directly in your project. This returns your own custom font based on the glyphMap where the key is the icon name and the value is either a UTF-8 character or it's character code. fontFamily is the name of the postscript font NOT the filename. Open the font in Font Book.app or similar to learn the name. Optionally pass the third fontFile argument for android support, it should be the custom font file name.

import { createIconSet } from '@react-native-vector-icons/common';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');

You should place the font ttf file into rnvi-fonts. You can customise this location by adding the following snippet to your package.json

{
  "reactNativeVectorIcons": {
    "fontDir": "src/assets/fonts"
  }
}

React Native comes with an amazing animation library called Animated. To use it with an icon, simply create an animated component with this line: const AnimatedIcon = Animated.createAnimatedComponent(Icon). You can also use the higher level animation library react-native-animatable.

Try the IconExplorer project in Examples/IconExplorer folder, there you can also search for any icon.

import Icon from '@react-native-vector-icons/ionicons';

function ExampleView(props) {
  return <Icon name="ios-person" size={30} color="#4F8EF7" />;
}

import { Text } from 'react-native';
import Icon from '@react-native-vector-icons/ionicons';

function ExampleView(props) {
  return (
    <Text>
      Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum
    </Text>
  );
}

This project is licenced under the MIT License.

Any bundled fonts are copyright to their respective authors and mostly under MIT or SIL OFL.