---
modificationDate: July 29, 2026
title: Expo Vector Icons
description: 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.
---

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/guides/icons/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/guides/icons/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Guides > More > Assorted
Pages in this section:
- [Authentication with OAuth or OpenID providers](https://docs.expo.dev/guides/authentication.md)
- [Using Hermes](https://docs.expo.dev/guides/using-hermes.md)
- [iOS Developer Mode](https://docs.expo.dev/guides/ios-developer-mode.md)
- [Expo Vector Icons](https://docs.expo.dev/guides/icons.md) (this page)
- [Localization](https://docs.expo.dev/guides/localization.md)
- [Using Bun](https://docs.expo.dev/guides/using-bun.md)
- [Edit rich text](https://docs.expo.dev/guides/editing-richtext.md)
- [App store assets](https://docs.expo.dev/guides/store-assets.md)
- [Local-first](https://docs.expo.dev/guides/local-first.md)
- [Keyboard handling](https://docs.expo.dev/guides/keyboard-handling.md)
- [Controlled components](https://docs.expo.dev/guides/controlled-components.md)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL.

# Expo Vector Icons

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.

You can use popular icon sets through icon fonts such as FontAwesome, Glyphicons, or Ionicons, or choose PNGs from [The Noun Project](https://thenounproject.com/). This guide explains various ways to use icons in your Expo app.

## `@expo/vector-icons`

> `@expo/vector-icons` will be deprecated and is not recommended. [Learn more about migrating to `@react-native-vector-icons`](https://expo.dev/blog/moving-away-from-expo-vector-icons).

The `@expo/vector-icons` library is built on top of [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) and uses a similar API. It includes popular icon sets you can browse at [icons.expo.fyi](https://icons.expo.fyi).

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

```jsx
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](/develop/user-interface/fonts.md#use-a-local-font-file) 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](/develop/user-interface/fonts.md#handle-expovector-icons-initial-load).

`@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.

```jsx
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](https://icomoon.io/) 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`.

> **IcoMoon app versions:** The [new IcoMoon app](https://icomoon.io/new-app) exports a different JSON format than the [old IcoMoon app](https://icomoon.io/app). The current `createIconSetFromIcoMoon` function only supports the old app's output. See the [Pull Request on GitHub](https://github.com/expo/vector-icons/pull/356), which adds support for the new format. This support will work once released in `@expo/vector-icons`.

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

```jsx
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'),
  });

  // See the "Waiting for fonts to load" section at /develop/user-interface/fonts/#wait-for-fonts-to-load for more information on how to display a splash screen when fonts are loaded.
  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](https://fontello.com/) 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:

```js
// 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.

```jsx
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`](https://reactnative.dev/docs/text), [`TouchableHighlight`](https://reactnative.dev/docs/touchablehighlight), or [`TouchableWithoutFeedback`](https://reactnative.dev/docs/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 behavior._ | `{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_ |