as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

react-native-vector-icons

@amazon-devices/react-native-vector-icons 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 is a system-deployed library and is available to React Native for Vega apps without a separate installation process. It is deployed as an autolinking library which your app links to at runtime. Compatibility is guaranteed only between the library and the version of React Native for Vega for which it is built.

When you up level the version of React Native for Vega with which your app is built, it's a best practice to also uplevel the version of the library on which it is dependent.

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

Installation

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

    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

Upgrading this package often requires the font files linked to your projects to be updated as well. If the automatic linking works for you, running this again should update the fonts. Otherwise you need to 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.

Screenshot of IconExplorer

Basic Example

The following shows a basic example of returning an icon:

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 following example shows how to implement a TabBar.

The folloing example taken from react-navigation:

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

You can either use one of the icons that come with the library (for example, the example below uses the icon from FontAwesome.js), or you can creater own custom font.

Copied to clipboard.


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

Properties

Any Text property and the following:

Prop Description Default
size Size of the icon, can also be passed as fontSize in the style object. 12
name What icon to show, see Icon Explorer app or one of the links above. None
color Color of the icon. Inherited

Static Methods

Prop Description
getFontFamily Returns the font family that is currently used to retrieve icons as text. Usage: const fontFamily = Icon.getFontFamily()
getImageSource Returns 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)
getImageSourceSync Same as getImageSource but synchronous. Usage: const source = Icon.getImageSourceSync(name, size, color)
getRawGlyphMap Returns the raw glyph map of the icon set. Usage: const glyphMap = Icon.getRawGlyphMap()
hasIcon Checks if the name is valid in current icon set. Usage: const isNameValid = Icon.hasIcon(name)

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:

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

By combining some of these you can create for example :

type star

Icon.Button Component

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

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

buttons

Properties

Any Text, TouchableHighlight or TouchableWithoutFeedback property in addition to these:

Prop Description Default
color Text and icon color, use iconStyle or nest a Text component if you need different colors. white
size Icon size. 20
iconStyle Styles applied to the icon only, good for setting margins or a different color. Note: use iconStyle for margins or expect unstable behaviour. {marginRight: 10}
backgroundColor Background color of the button. #007AFF
borderRadius Border radius of the button, set to 0 to disable. 5
onPress A function called when the button is pressed. None

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.

Copied to clipboard.


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

Alternatively you may 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 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:

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 is supported by multi-styled fonts.

Prop Description
getFontFamily Returns the font family that is currently used to retrieve icons as text. Usage: const fontFamily = Icon.getFontFamily(style)
getImageSource Returns 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)
getImageSourceSync Same as getImageSource but synchronous. Usage: const source = Icon.getImageSourceSync(name, size, color)
getRawGlyphMap Returns the raw glyph map of the icon set. Usage: const glyphMap = Icon.getRawGlyphMap(style)
hasIcon Checks if the name is valid in current icon set. Usage: const isNameValid = Icon.hasIcon(name, style)
getStyledIconSet Use this to get a Icon component for a single style. Usage. const StyledIcon = Icon.getStyledIconSet(style)

If no style argument is passed (or if it's invalid) the methods will default to a pre-defineds fallback.

Components

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

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 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 font NOT the filename. Open the font in Font Book.app or similar to learn the name.

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]])

Convenience method to create a custom font based on a fontello config file. Don't forget to import the font as described above and drop the config.json somewhere convenient in your project.

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]])

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 use the .json file that's included in the .zip you've downloaded. You'll also need to import the .ttf font file into your project, following the instructions above.

createMultiStyleIconSet(styles [, options])

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 will be
 * 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 will be
 * chosen. FontAwesome 5 uses font weight since
 * 5.7.0 in order to diffirentiate 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 />

option Description default
defaultStyle The name of the style to be used if no style is supplied during rendering. Object.keys(styles)[0]
fallbackFamily Function for selecting a family if a glyph is not available. The function should accept the name of the glyph as a parameter. Returns the name if the family. (name) => Object.keys(styles)[0]
glyphValidator Function for validating that a glyph is available for a chosen style. It has name and style as parameters, in that order. Returns true if the glyph is valid or false if it's not. (name, style) => true

Animation

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

Supported versions

Package name Amazon NPM library version Vega OS build number Vega SDK version Release notes
@amazon-devices/react-native-vector-icons 2.0.1+9.2.0 OS 1.1 (201010438050) 0.20  

Last updated: Sep 30, 2025