Home

Awesome

Vector Icons for React Native

npm npm

React Native Vector Icons

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.

[!TIP] If you are still using the old single package react-native-vector-icons please visit https://github.com/oblador/react-native-vector-icons/tree/10.x

Table of Contents

Sponsorship

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

Available Icon Sets

Explore all icons.

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

Actively maintained

No longer maintained upstream

Migration

See MIGRATION.md if you are migrating from react-native-vector-icons to the package-per-icon-set approach.

Installation

  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/evil-icons
  3. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.
  4. If you are using one of the following fonts refer to their guides for further instructions

Setup

Please refer to the guide for Expo, React Native or Web for further instructions.

Icon Component

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" />;

Props

Any Text props and the following:

PropDescriptionDefault
sizeSize of the icon, can also be passed as fontSize in the style object.12
nameWhat icon to show, see Icon Explorer app or one of the links above.None
colorColor of the icon.Inherited

Static Methods

PropDescription
getImageSourceReturns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const source = await Icon.getImageSource(name, size, color)
getImageSourceSyncSame as getImageSource but synchronous. Usage: const source = Icon.getImageSourceSync(name, size, color)

Styling

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:

By combining some of these you can create for example :

type star

Usage as PNG Image/Source Object

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.

Multi-Style Fonts

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

Static methods

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

PropDescription
getImageSourceReturns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const source = await Icon.getImageSource(name, size, color)
getImageSourceSyncSame as getImageSource but synchronous. Usage: const source = Icon.getImageSourceSync(name, size, color)

Custom 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() 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. postScriptName is the name of the postscript font. Open the font in https://fontdrop.info/, Font Book.app or similar to learn the name. Also pass the fontFileName argument for Android support.

import { createIconSet } from '@react-native-vector-icons/common';
const glyphMap = { 'icon-name': 1234, test: '∆' };

// use createIconSet() with object parameter
// or use positional parameters for compatibility with version <= 10: `createIconSet(glyphMap, fontFamily[, fontFile])`
const Icon = createIconSet(glyphMap, {
   postScriptName: 'FontName',
   fontFileName: 'font-name.ttf',
   fontSource: require('../fonts/font-name.ttf') // optional, for dynamic loading. Can also be a local file uri.
})

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"
  }
}

Animation

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.

Dynamic icon font loading

At the moment, dynamic loading is supported on native platforms (not on web) only if you use Expo. In the future, it should become available for all React Native projects via React Native core.

Fonts can be available in an app statically (since build time) or loaded dynamically at runtime. The latter can be useful e.g. for apps that use over-the-air updates and want to load new fonts with an update, or when you need to use a font from a remote location.

Dynamic loading in react-native-vector-icons is currently limited to those fonts that are bundled within the provided packages: it doesn't support Pro fonts (such as FontAwesome 5 Pro). However, loading of custom fonts is not difficult to implement: see any of the free font packages for reference.

By default, dynamic loading is enabled if supported by the version of Expo that you're using. It doesn't change the way you work with the package: If rendering an icon requires a font that is not known to the app, it will be loaded automatically and icon will render as expected.

@react-native-vector-icons/common exports several functions which you can use to control dynamic loading:

Usage Examples

Icon Explorer

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

Screenshot of IconExplorer

Basic Example

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

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

Inline Icons

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>
  );
}

Changelog

License

This project is licenced under the MIT License.

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