How to Add Icons in React Native Expo
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.
- AntDesign by AntFinance (298 icons)
- Entypo by Daniel Bruce (v1.0.1 411 icons)
- EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
- Feather by Cole Bemis & Contributors (v4.28.0, 286 icons)
- FontAwesome by Dave Gandy (v4.7.0, 675 icons)
- FontAwesome 5 by Fonticons, Inc. (v5.15.3, 1598 (free) 7848 (pro) icons)
- Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)
- Foundation by ZURB, Inc. (v3.0, 283 icons)
- Ionicons by Ionic (v5.0.1, 1227 icons)
- MaterialIcons by Google, Inc. (v4.0.0, 1517 icons)
- MaterialCommunityIcons by MaterialDesignIcons.com (v6.5.95, 6596 icons)
- Octicons by Github, Inc. (v16.3.1, 250 icons)
- Zocial by Sam Collins (v1.4.0, 100 icons)
- SimpleLineIcons by Sabbir & Contributors (v2.5.5, 189 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.
That’s how you add icons to react native expo easily.
