Repository files navigation

Elevate your React Native applications with the power of customizable vectoricons. Ideal for embellishing buttons, logos, and navigation or tab bars, theseicons seamlessly integrate into your projects. Their versatility makesextension and styling effortless.

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

• Sponsorship
• Available Icon Sets
• Installation
• Setup
• Icon Component
• Usage as PNG Image/Source Object
• Multi-Style Fonts
• Custom Fonts
• Animation
• Dynamic icon font loading
• Usage Examples
• Changelog
• License

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

Explore all icons.

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

• AntDesign from Ant Group (v4.4.2 with449 icons)
• Feather created by Cole Bemis & Contributors (v4.29.2 featuring287 icons)
• FontAwesome designed by Fonticons, Inc. (v7.1.0 featuring2,806 free and75,767 pro icons)
• Foundation by ZURB, Inc. (v3.0 with283 icons)
• Ionicons crafted by Ionic (v8.0.9 containing1,357 icons)
• MaterialDesignIcons from MaterialDesignIcons.com (v7.4.47 including7448 icons)
• Octicons designed by GitHub, Inc. (v19.19.0 with339 icons)
• Lucide designed by Lucide, (v0.548.0 with1,639 icons)

• Entypo by Daniel Bruce (v1.0.1 with411 icons)
• EvilIcons designed by Alexander Madyankin & Roman Shamin (v1.10.1 with70 icons)
• FontAwesome 4 by Fonticons, Inc. (v4.7.0 containing785 icons)
• FontAwesome 5 from Fonticons, Inc. (v5.15.4 offering1611 free and7869 pro icons)
• FontAwesome 6 designed by Fonticons, Inc. (v6.7.2 featuring2060 free and52663 pro icons)
• Fontisto created by Kenan Gündoğan (v3.0.4 featuring617 icons)
• MaterialIcons by Google, Inc. (v4.0.0 featuring2234 icons)
• SimpleLineIcons crafted by Sabbir & Contributors (v2.5.5 with189 icons)
• Zocial by Sam Collins (v1.1.1 with100 icons)

SeeMIGRATION.md if you are migrating fromreact-native-vector-icons to the package-per-icon-set approach or between major versions.

1. Install the packages for the icons you want to use

   npm install @react-native-vector-icons/fontawesome6 @react-native-vector-icons/evil-icons

2. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.

3. If you are using one of the following fonts, refer to their guides for further instructions

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

Refer to the guide forExpo,React Native orWeb for further instructions.

For fonts like fontawesome6-pro, fontello and icomoon where you provide the fonts the default location for the font files isrnvi-fonts in the same directory as your package.json. This can be customized by setting thefontDir property in yourpackage.json file.

{"reactNativeVectorIcons": {"fontDir":"src/rnvi-fonts"  }}

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

import{FontAwesome}from"@react-native-vector-icons/fontawesome";<FontAwesomename="rocket"size={30}color="#900"/>;

AnyText props and the following:

SinceIcon builds on top of theText component, moststyle 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 :

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

import{FontAwesome5}from"@react-native-vector-icons/fontawesome5";<FontAwesome5name="comments"size={30}color="#900"/>;// Defaults to regular<FontAwesome5name="comments"size={30}color="#900"iconType="solid"/><FontAwesome5name="comments"size={30}color="#900"iconType="light"/>

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

You need to install@react-native-vector-icons/get-image to use this feature.

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

Alternatively you may use the async methodIcon.getImageSource.

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

All static methods fromIcon are supported by multi-styled fonts.

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

SeeCREATE_FONT_PACKAGE.md to learn how to create your own font packages.

You can also usecreateIconSet() directly in your project. Thisreturns your own custom font based on theglyphMap where the key is the iconname and the value is either a UTF-8 character or its character code.postScriptName is the name of the postscript font. Open the font inhttps://fontdrop.info/,Font Book.app or similar to learn the name. Also pass thefontFileName argument for Android support.

import{createIconSet}from"@react-native-vector-icons/common";constglyphMap={"icon-name":1234,test:"∆"};// use createIconSet() with object parameter// or use positional parameters for compatibility with version <= 10: `createIconSet(glyphMap, fontFamily[, fontFile])`constIcon=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.});

If you aren't using dynamic font loading you need to make sure your font is copied into your bundle.

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

Dynamic loading is supported on all platforms if you use Expo (Expo Go or a development client). 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: usecreateIconSet as seen incustom fonts paragraph to obtain a icon font family with dynamic font loading enabled. See any of the free font packages for reference.

By default, dynamic loading is enabled if you run Expo SDK >= 52. 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:

• isDynamicLoadingEnabled: Returns whether dynamic loading is enabled.
• isDynamicLoadingSupported: Returns whether dynamic loading is supported by your runtime (checks that necessary Expo features are present).
• setDynamicLoadingEnabled: Enables or disables dynamic loading.
• setDynamicLoadingErrorCallback: Sets a callback that is called (in the unlikely case) when an error occurs during dynamic loading. An example of when an error might happen is loading a misconfigured OTA update which doesn't include a necessary font file.

Try theIconExplorer project inExamples/IconExplorer folder, there you can also search for any icon.

import{IonIcons}from"@react-native-vector-icons/ionicons";constExampleView=()=>(<IonIconname="ios-person"size={30}color="#4F8EF7"/>);

import{Text}from"react-native";import{IonIcons}from"@react-native-vector-icons/ionicons";constExampleView=(props)=>(<Text>    Lorem<IonIconname="ios-book"color="#4F8EF7"/> Ipsum</Text>);

When running tests withjest you will need to mock out the native code loading to prevent errors.

Injest.config.js add

// Mock out font loadingmoduleNameMapper:{'\\.(ttf)$':'<rootDir>/__mocks__/file-mock.js',}

Create__mocks__/file-mock.js:

module.exports={};

Create__mocks__/@react-native-vector-icons/common.js:

// Mock the entire common library so there are no native module loading errorsmodule.exports={createIconSet:()=>"icon",};

This project is licenced under theMIT License.

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