react-native-vector-icons

The @amazon-devices/react-native-vector-icons library provides support on Vega for react-native-vector-icons. The library provides customizable vector icons ideal for embellishing buttons, logos, and navigation or tab bars that seamlessly integrate into your projects. Their versatility makes extension and styling effortless.

This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library is deployed as an autolinking library, which your app links to at runtime. The library is guaranteed to be compatible only with the version of React Native for Vega for which it's built.

When you uplevel your app's version of React Native for Vega, consider the best practice of upleveling its library dependencies.

For more information about this library and its API, see the README.md in the GitHub repo.

Installation

1. Add this JavaScript library dependency in the package.json file:

   Copy code Copied to clipboard.

   "dependencies": {
      ...
      "@amazon-devices/react-native-vector-icons": "~2.0.0"
   }
   

2. Reinstall the dependencies using the npm install command.

3. Add your font files to <app_package_root>/assets/fonts.

Upgrading

Upgrade the font files linked to your projects when you upgrade this package. If the automatic linking works for you, running it again should update the fonts. Otherwise, follow the steps outlined in the installation section.

Examples

IconExplorer

Try the IconExplorer project in packages/icon-explorer in the GitHub react-native-vector-icons repo. There you can also search for any icon.

Basic Example

A basic example of returning an icon:

Copy code Copied to clipboard.

import Icon from '@amazon-devices/react-native-vector-icons/Ionicons';

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

TabBar

The following example shows how to implement a TabBar.

An example taken from react-navigation:

Copy code Copied to clipboard.

import { createBottomTabNavigator } from '@amazon-devices/react-navigation/bottom-tabs';
import MaterialCommunityIcons from '@amazon-devices/react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        activeTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

API support

Icon Component

Either use one of the icons that comes with the library (the following example uses the icon from FontAwesome.js) or create your own custom font.

Copy code Copied to clipboard.

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

Properties

Use any Text property and the following props:

Static Methods

Styling

Icon builds on top of the Text component, therefore most style properties work as expected.

Try these properties:

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

By combining some of these props, you can create these icons:

Icon.Button Component

A convenience component for creating buttons with an icon on the left side.

Copy code Copied to clipboard.

import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Login with Facebook
    </Text>
  </Icon.Button>
);

Properties

You can use Text, TouchableHighlight, or the TouchableWithoutFeedback property, as well as the following properties.

Usage as PNG image/source object

Use with other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name, size, and color as described previously.

Copy code Copied to clipboard.

Icon.getImageSource('user', 20, 'red').then(source =>
  this.setState({ userIcon: source })
);

Alternatively, you can use the synchronous method Icon.getImageSourceSync to avoid rendering glitches. Keep in mind that this method is blocking and might incur performance penalties. Subsequent calls use the cache.

Multistyle fonts

The react-native-vector-icons library supports multistyle fonts like FontAwesome 5. The usage is similar to the standard Icon component:

Copy code Copied to clipboard.

import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome5';

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

Static methods

All static methods from Icon are supported by multistyled fonts.

If no style argument is passed, or if it's not valid, the methods default to a predefined fallback.

Components

Icon.Button is supported. The usage is just like Icon:

Copy code Copied to clipboard.

import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome5';
const myButton = (
  <Icon.Button name="facebook" onPress={this.loginWithFacebook} solid>
    Login with Facebook
  </Icon.Button>
);

Custom Fonts

createIconSet(glyphMap, fontFamily[, fontFile])

Returns your own custom font based on the glyphMap. The key is the icon name and the value is either a UTF-8 character or its character code. The name of the font is fontFamily, however this is not the name of the filename. Open the font in Font Book.app or similar to learn the name.

Copy code Copied to clipboard.

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

createIconSetFromFontello(config[, fontFamily[, fontFile]])

You can create a custom font based on a fontello config file. Don't forget to import the font as described previously and place the config.json somewhere convenient in your project.

Copy code Copied to clipboard.

import { createIconSetFromFontello } from '@amazon-devices/react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);

createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

Copy code Copied to clipboard.

import { createIconSetFromIcoMoon } from '@amazon-devices/react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'LineAwesome',
  'line-awesome.ttf'
);

Make sure you're using the Download option in IcoMoon and the .json file that's included in the .zip you downloaded. Import the .ttf font file into your project, following the previous instructions.

createMultiStyleIconSet(styles [, options])

Copy code Copied to clipboard.

import { createMultiStyleIconSet } from '@amazon-devices/react-native-vector-icons';

/*
 * This is just example code, you are free to
 * design your glyphmap and styles to your liking
 */

import glyphmap from './glyphmap.json';
/*
 * glyphmap = {
 *   "style1": [
 *     "hello",
 *     "world"
 *   ],
 *   "style2": [
 *     "foo",
 *     "bar"
 *   ]
 * }
 */

const glyphKeys = Object.keys(glyphmap); /* ["style1", "style2"] */
const options = {
  defaultStyle: 'style1',
  glyphValidator: (name, style) => glyphKeys.indexOf(name) !== -1,
  fallbackFamily: (name) => {
    for (let i = 0; i < glyphKeys.length; i++) {
      const style = glyphKeys[i];
      if (glyphmap[style].indexOf(name) !== -1) {
        return style;
      }
    }

    /* Always return some family */
    return glyphKeys[0];
  }
};

/*
 * The styles object consists of keys, which are
 * used as the styles later, and objects which are
 * used as style objects for the font. The style
 * should have unique characteristics for each font
 * in order to ensure that the right one is
 * chosen. FontAwesome 5 uses font weight since
 * 5.7.0, in order to differentiate the styles, but
 * other properties (like fontFamily) can be used.
 * It's just a standard RN style object.
 */
const styles = {
  style1: {
    fontWeight: '700'
  },
  style2: {
    fontWeight: '100'
  }
};

const Icon = createMultiStyleIconSet(styles, options);

/* Uses default style (style1) */
<Icon name={'hello'} />
<Icon name={'world'} style1 />
/* Default style is style1 but this will fall back to style2 */
<Icon name={'foo'} />
/* This will also fall back to style2 */
<Icon name={'foo'} style1 />
/* Regular use of style2 */
<Icon name={'bar'} style2 />

Animation

React Native comes with an animation library called Animated. To use it with an icon, create an animated component with this code: const AnimatedIcon = Animated.createAnimatedComponent(Icon).

Supported versions

Last updated: Sep 30, 2025