Source: https://docs.expo.dev/guides/icons

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Archive Expo Snack Discord and Forums Newsletter

Expo Vector Icons

Edit page

Copy page

Learn how to use various types of icons in your Expo app, including react native vector icons, custom icon fonts, icon images, and icon buttons.

Edit page

Copy page

Not every app needs to use emojis for icons. You can use a popular icon set through an icon font such as FontAwesome, Glyphicons, or Ionicons, or choose PNGs from The Noun Project . This guide explains various ways to use icons in your Expo app.

@expo/vector-icons

The @expo/vector-icons library is installed by default on the template project using npx create-expo-app and is part of the expo package. It is built on top of react-native-vector-icons and uses a similar API. It includes popular icon sets you can browse at icons.expo.fyi .

The component loads the Ionicons font and renders a checkmark icon in the following example:

Vector icons

Copy

Open in Snack

import { View, StyleSheet } from 'react-native'; import Ionicons from '@expo/vector-icons/Ionicons'; export default function App() { return ( <View style={styles.container}> <Ionicons name="checkmark-circle" size={32} color="green" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

As with any custom font in Expo, you can preload icon fonts before rendering your app. The font object is available as a static property on the font component. So, in the case above, it is Ionicons.font, which evaluates to {ionicons: require('path/to/ionicons.ttf')}.

Custom icon fonts

To use a custom icon font, first import it into your project. Only after the font has loaded, can you create an Icon set. Learn more about loading custom fonts .

@expo/vector-icons exposes three methods to help you create an icon set:

`createIconSet`

The createIconSet method returns a custom font based on the glyphMap where the key is the icon name and the value is either a UTF-8 character or its character code.

In the example below, the glyphMap object is defined and then passed as the first argument to the createIconSet method. The second argument fontFamily is the name of the font (not the filename). Optionally, you can pass the third argument for Android support, which is the custom font file name.

createIconSet example

Copy

import createIconSet from '@expo/vector-icons/createIconSet'; const glyphMap = { 'icon-name': 1234, test: '∆' }; const CustomIcon = createIconSet(glyphMap, 'fontFamily', 'custom-icon-font.ttf'); export default function CustomIconExample() { return <CustomIcon name="icon-name" size={32} color="red" />; }

`createIconSetFromIcoMoon`

The createIconSetFromIcoMoon method is used to create a custom font based on an IcoMoon config file. You have to save the selection.json and .ttf in your project, preferably in the assets directory, and then load the font using either useFonts hook or Font.loadAsync method from expo-font.

See the example below that uses the useFonts hook to load the font:

Icomoon Icons

Copy

Open in Snack

import React from 'react'; import { View, StyleSheet } from 'react-native'; import { useFonts } from 'expo-font'; import createIconSetFromIcoMoon from '@expo/vector-icons/createIconSetFromIcoMoon'; const Icon = createIconSetFromIcoMoon( require('./assets/icomoon/selection.json'), 'IcoMoon', 'icomoon.ttf' ); export default function App() { const [fontsLoaded] = useFonts({ IcoMoon: require('./assets/icomoon/icomoon.ttf'), }); if (!fontsLoaded) { return null; } return ( <View style={styles.container}> <Icon name="pacman" size={50} color="red" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

`createIconSetFromFontello`

The createIconSetFromFontello method is used to create a custom font based on a Fontello config file. You have to save the config.json and .ttf somewhere convenient in your project, preferably in the assets directory, and then load the font using either useFonts hook or Font.loadAsync method from expo-font.

It follows a similar configuration as createIconSetFromIcoMoon as shown in the example:

Fontello Icons

Copy

// Import the createIconSetFromFontello method import createIconSetFromFontello from '@expo/vector-icons/createIconSetFromFontello'; // Import the config file import fontelloConfig from './config.json'; // Both the font name and files exported from Fontello are most likely called "fontello". // Ensure this is the `fontname.ttf` and not the file path. const Icon = createIconSetFromFontello(fontelloConfig, 'fontello', 'fontello.ttf');

Button component

You can create an Icon Button using the Font.Button syntax where the Font is the icon set that you import from @expo/vector-icons.

In the example below, a login button uses the FontAwesome icon set. Notice that the FontAwesome.Button component accepts props to handle action when a button is pressed and can wrap the text of the button.

Icon Button Component

Copy

Open in Snack

import React from 'react'; import { View, StyleSheet } from 'react-native'; import FontAwesome from '@expo/vector-icons/FontAwesome'; export default function App() { const loginWithFacebook = () => { console.log('Button pressed'); }; return ( <View style={styles.container}> <FontAwesome.Button name="facebook" backgroundColor="#3b5998" onPress={loginWithFacebook}> Login with Facebook </FontAwesome.Button> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });

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 |