Install Expo Vector Icons

A comprehensive guide to installing and using vector icons from the `@expo/vector-icons` library in your React Native Expo projects.

exporeact-nativeiconsvector-iconsui-componentinstallation

Installation

Step 1: Install the package

Install the @expo/vector-icons package using your preferred package manager:

npx expo install @expo/vector-icons

or

yarn add @expo/vector-icons

Step 2: Use an Icon in Your Component

You can now import and use various icon sets provided by the library. For example, to use Ionicons:

MyComponent.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons'; // Import a specific icon set

export default function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, Icon!</Text>
      <Ionicons name="home" size={32} color="blue" />
      <Ionicons name="search-outline" size={24} color="green" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    marginBottom: 10,
  },
});

Step 3: Explore More Icons

The @expo/vector-icons library bundles several popular icon sets. You can find a complete list of available icons and their names in the official Expo documentation:

Browse all available icons in Expo Docs