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
- Add the JavaScript library dependency in the package.json file:
"dependencies": { ... "@amazon-devices/react-native-vector-icons": "~2.0.0" }
-
Reinstall the dependencies using the
npm install
command. - 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.
Basic Example
The following shows a basic example of returning an icon:
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
:
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.
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 :
Icon.Button Component
A convenience component for creating buttons with an icon on the left side.
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
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.
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:
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
:
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.
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.
import { createIconSetFromFontello } from '@amazon-devices/react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);
createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])
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])
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