Using Expo Vector Icons

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

This article assumes a basic Expo project already exists. For setup instructions, see creating an Expo project on Windows or Mac.

What are Expo Vector Icons? 🔗

Expo Vector Icons is Expo's icon library.

Normally, using SVG files requires downloading separate icon files and installing react-native-svg, but this library lets you use the icons you want without additional setup.

Browse the available icons here: expo.fyi↗.

Installing Expo Vector Icons 🔗

Expo Vector Icons is installed by default when you create a project with npx create-expo-app.

If it is missing, install it using the following command.

npm i @expo/vector-icons

Using Expo Vector Icons 🔗

First, search for an icon at expo.fyi↗.

Clicking an icon shows two pieces of code.

The first is an import, import { 아이콘 패키지 } from '@expo/vector-icons';, and the second is the component, <아이콘 컴포넌트 />.

Copy both into the project to display the icon.

Here is example code and its result.

/app/index.tsx

import AntDesign from '@expo/vector-icons/AntDesign';
import { SafeAreaView } from 'react-native-safe-area-context';
 
const App = () => {
  return (
    <SafeAreaView
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
    >
      <AntDesign name="checkcircle" size={24} color="black" />
    </SafeAreaView>
  );
};
 
export default App;

The button component 🔗

@expo/vector-icons provides a special Icon.Button component that combines an icon and text.

Here is an example and its result.

/app/index.tsx

import AntDesign from '@expo/vector-icons/AntDesign';
import { SafeAreaView } from 'react-native-safe-area-context';
 
const App = () => {
  return (
    <SafeAreaView
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
    >
      <AntDesign.Button
        name="checkcircle"
        size={24}
        color="white"
        backgroundColor={'green'}
        onPress={() => console.log('Button Pressed')}
      >
        Press Me
      </AntDesign.Button>
    </SafeAreaView>
  );
};
 
export default App;

Detailed props 🔗

Prop	Description	Type	Default
name	Icon name	string	X
size	Icon size	number	20
color	Icon color	string	white
backgroundColor	Button background color	string	#007AFF
onPress	Function called when pressed	() => void	null
borderRadius	Button corner radius	number	5
iconStyle	Icon style	StyleProp	{marginRight: 10}

Conclusion 🔗

Expo includes many commonly used icon collections, making them convenient to use immediately without extra configuration.

I expect to use the Button component often because it is simple to use without writing lots of CSS and styles.

Further questions 🔗

What other icon libraries are available?
The custom icon fonts↗ feature also lets you use custom fonts for icons. When might that be useful?

References 🔗

Using Expo Vector Icons | PromleeBlog