Updated April 1, 2023
Introduction to React Native Vector Icons
React Native vector icons are most popular icons of NPM GitHub library. It has more than 3,000 collections of vector icons and these icons are free to use. They are great logos, buttons and Navigation or tab bars. These vector icons are very easy to integrate style and extend in to one’s project. Vector icons are attractive in a particular presentation that makes it more presentable. In comparison to plain texts, vector icons convey more information. One can change icon color, icon size and multiple styling is also supported. Icons are completely customisable. These vector icons can be seen easily anywhere.
Some icons are displayed in the below image.
Syntax of importing React Native Icon Component:
<Icon name="rocket"
size={25}
color="#f51637" />Syntax of importing Button Component:
<Icon.Button
name="welcome to facebook"
backgroundColor="#7d13e8"
onPress={this.loginWithFacebook}>
Login with Facebook
</Icon.Button>List of React Native Vector Icons
Given below is the list:
|
Icon Category |
Developer | Number of Icons |
| AntDesign | AntFinanc | 297 icons |
| Entypo | Daniel Bruce | 411 icons |
| Evillcons | Alexander Madyankin and Roman Shamin | 70 icons |
| Feather | Cole Bemis and Contributors | 279 icons |
| FontAwesome5 | Fonticons Inc. | 5082 (pro icons) & 1500 (free icons) |
| FontAwesome | Dave Gandy | 675 icons |
| Fontisto | Kenan | 615 icons |
| Foundation | ZURB Inc. | 283 icons |
| Ionicons | Ben Sperry | 696 icons |
| Materiallcons | Google Inc. | 932 icons |
| MaterialCommunityIcons | MaterialDesignIcons.com | 3695 icons |
| Octicons | Github Inc. | 184 icons |
| Zocial | Sam Collins | 100 icons |
| SimpleLineIcons | Sabbir and Contributors | 189 icons |
Examples of React Native Vector Icons
Given below are the examples:
Example #1
Code:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android:
'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> { render() {
const phone_icon = (
<Icon name="phone" size={50} color="#86fc72" onPress={()=>{Alert.alert("Want to make Call?")}} />
);
const chrome_icon = (
<Icon name="chrome" size={50} color="#ffff5e" onPress={()=>{Alert.alert("Want to open browser?")}} />
);
const music_icon = (
<Icon name="music" size={50} color="#fa69cc" onPress={()=>{Alert.alert("Want to play music?")}} />
);
return (
<View style={styles.MainContainer}>
<TouchableOpacity>
{phone_icon}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 9}}>
{chrome_icon}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 9}}>
{music_icon}
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({ MainContainer: {
flex: 1,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#baa4b3', padding: 25
}
});Output:
It shows simple vector icons in mobile application.
Example #2
Vector Icons Inside Buttons.
Code:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android:
'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> { render() {
const facebook_button = (
<Icon.Button name="facebook" backgroundColor="#3358de" size={19} onPress={()=>{Alert.alert("You are directed to our Facebook Page")}}>
</Icon.Button>
);
const instagram_button = (
<Icon.Button name="instagram" backgroundColor="#d839f7" size={19} onPress={()=>{Alert.alert("You are directed to our Instagram Page")}}>
</Icon.Button>
);
const twitter_button = (
<Icon.Button name="twitter" backgroundColor="#35cefc" size={19} onPress={()=>{Alert.alert("You are directed to our Twiter Page")}}>
</Icon.Button>
);
return (
<View style={styles.MainContainer}>
<TouchableOpacity>
{facebook_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 9}}>
{instagram_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 9}}>
{twitter_button}
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({ MainContainer: {
flex: 1,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#d8ff8f', padding: 25
}
});Output:
It shows different icons inside different buttons. It shows different windows displayed when these icons are pressed from top to bottom.
Example #3
Icons inside Buttons with Text.
Code:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android:
'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> { render() {
const uparrow_icon = (
<Icon name="arrow-up" size={50} color="#373647"
onPress={()=>{Alert.alert("Want to take ride upward")}} />
);
const facebook_button = (
<Icon.Button name="facebook" backgroundColor="#964ed9" size={21} onPress={()=>{Alert.alert("You have clicked Facebook button")}}>
<Text style={{fontFamily: 'Bold', fontSize: 16, color: '#f6f5f7'}}>Login with your Facebook ID</Text>
</Icon.Button>
);
const twitter_button = (
<Icon.Button name="twitter" backgroundColor="#2dc6d6" size={21} onPress={()=>{Alert.alert("You have clicked Twiter button")}}>
<Text style={{fontFamily: 'Bold', fontSize: 16, color: '#f6f5f7'}}>Follow Us on Twitter</Text>
</Icon.Button>
);
const instagram_button = (
<Icon.Button name="instagram" backgroundColor="#f23de0" size={21} onPress={()=>{Alert.alert("You have clicked Instagram button")}}>
<Text style={{fontFamily: 'Bold', fontSize: 16, color: '#f6f5f7'}}>Follow Us on Instagram</Text>
</Icon.Button>
);
const downarrow_icon = (
<Icon name="arrow-down" size={50} color="#373647" onPress={()=>{Alert.alert("Want to take ride downward")}} />
);
return (
<View style={styles.MainContainer}>
<TouchableOpacity>
{uparrow_icon}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 9}}>
{facebook_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 9}}>
{twitter_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 9}}>
{instagram_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 9}}>
{downarrow_icon}
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({ MainContainer: {
flex: 1,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffea73', padding: 25
}
});Output:
It shows different vector icons in side as well as outside button with text. It shows different windows displayed when these icons are pressed.
Conclusion
In our daily life we came across wide variety of vector icons and they can be easily seen on web pages and in mobile applications. On the basis of above discussion, we got to know about various types of icons. It offers wide variety of vector icons because of which icons are widely used. The vector icons in it have different categories and the icons in these categories are developed by different developers. The vector icons in it can be implemented very easily and very efficiently.
Recommended Articles
This is a guide to React Native Vector Icons. Here we discuss the introduction to React Native Vector along with list of icons with examples. You may also have a look at the following articles to learn more –
