How to Add Icons in React Native Expo

By Rashid •  Updated on: February 22nd, 2023 • 

Adding icons to your react native expo app can significantly enhance the user experience and make the app more visually appealing. In this blog post, let’s learn how to add icons to react native expo with react native vector icons.

The @expo/vector-icons library is part of the expo package and you don’t need further installation. This library is made on react native vector icons.

It includes the following set of icons.

You can browse the icons from this directory and use them according to your needs.

For example, if you want to use an icon from the ionicons bundle then you can use it as given below.

import Ionicons from '@expo/vector-icons/Ionicons';
<Ionicons name="md-checkmark-circle" size={40} color="green" />

See the complete code given below.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Ionicons name="md-checkmark-circle" size={40} color="green" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

You will get the following output.

react native expo icon

That’s how you add icons to react native expo easily.

Rashid

Keep Reading