Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
List Of Vector Icons
3.
Steps To Use Vector Icons In React Native
4.
Vector Icon Component
4.1.
Icon component
4.2.
Icon.Button Component
5.
Installation Of Dependency
6.
Importing IconFiles In Android
7.
Example To Use Vector Icon In React Native
7.1.
Output
8.
Frequently Asked Questions
8.1.
In react-native, what are vector icons?
8.2.
Is it possible to use react icons with react-native?
8.3.
What's the best way to unlink react-native vector icons?
8.4.
Are the react icons in SVG format?
8.5.
How do you make an icon with an input field?
9.
Conclusion
Last Updated: Mar 27, 2024

React Native Vector Icons

Author Mayank Goyal
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

The most popular custom icons in the NPM GitHub collection are React Native Vector Icons. It has a collection of over 3000 icons. All of these icons are completely free to use. The React Native Vector icons allow comprehensive customization, including icon size, color, and styling options. Buttons, logos, and navigation/tab bars benefit from vector icons. Extend, style, and incorporate vector icons into your project with ease. Vector Icons can be used almost anywhere. You may discover a selection of icons in the react-native-vector-icons directory.

Also See, Hooks in React JS

List Of Vector Icons

Here is the list of icons category available in React Native Vector Icons:

  • AntDesign by AntFinance (297 icons)
  • Entypo By Daniel Bruce (411 icons)
  • EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
  • Feather by Cole Bemis & Contributors (v4.21.0, 279 icons)
  • FontAwesome by Dave Gandy (v4.7.0, 675 icons)
  • FontAwesome 5 by Fonticons, Inc. (v5.7.0, 1500 (free) 5082 (pro) icons)
  • Fontisto by Kenan (v3.0.4, 615 icons)
  • Foundation by ZURB, Inc. (v3.0, 283 icons)
  • Ionicons by Ben Sperry (v4.2.4, 696 icons)
  • MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
  • MaterialCommunityIcons by MaterialDesignIcons.com (v3.6.95, 3695 icons)
  • Octicons by Github, Inc. (v8.4.1, 184 icons)
  • Zocial by Sam Collins (v1.0, 100 icons)
  • SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

Also see,  React Native Reanimated

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Steps To Use Vector Icons In React Native

To utilize Vector Icons, follow the steps below:

  1. Do a new project in React Native.
  2. Configure the Dependency (react-native-vector-icons)
  3. CocoaPods should be installed.
  4. Android Importing Icon Files iOS Importing Icon Files
  5. Finally, add the icon component to your project and begin working with it.

Vector Icon Component

We must import the react-native-vector-icons requirement for the Vector Icons, which will give two components:

  • Icon Component
  • Icon.Button Component

Icon component

This Icon component can be used to make icons. In Android and iOS, the prop "name" will render the icon.

Example:<Icon name="rexa" size={30} color="#900" />

Prop Description Default
size The font-size property of the style object can also be used to specify the icon's size. 12
name See the Icon Explorer app or one of the links above to determine which icon to display. None
color The icon's color scheme. Inherited

Icon.Button Component

A tool for making buttons with a left-hand icon.

Prop Description Default
color Styles are applied to the icon only, good for setting margins or a different color. Note: use icon style for margins or expect unstable behavior. white
size Icon size. 20
iconStyle Styles applied only on the icon are useful for establishing margins or changing the color. Note: You can expect erratic behavior if you use iconStyle for margins. {marginRight: 10}
backgroundColor Background color of the button. #007AFF
borderRadius Set the button's border-radius to 0 to disable it. 5
onPress A function called when the button is pressed. None

 

These components will also be used in our example. Now that we've covered the basics let's move on to the example. In this example, we'll make a simple screen with multiple icons and execute it in Android.

Installation Of Dependency

Install the react-native-vector-icons dependency to use the Icon component. The backgroundborder radiusis 

To do so, open a terminal window and navigate to your project.

cd ProjectName

Run the command below.

npm install react-native-vector-icons

All dependencies will be copied into your node module directory using this command. – It's only to change the react-native-vector-icons dependency in your package.json file that you need to save.

Importing IconFiles In Android

To use Vector Icons on Android, we must first import the react-native-vector-icons icons.

  • In android/app/src/main, create an assets/fonts directory.
  • Copy all the font files from node modules/react-native-vector-icons/Fonts into the fonts directory once it's been created.

Example To Use Vector Icon In React Native

// Import React
import React from 'react';
// Import required component
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
// Import vector icons
import Icon from 'react-native-vector-icons/FontAwesome';
const App = () => {
 return (
   <SafeAreaView style={{flex: 1}}>
     <View style={{flex: 1, padding: 16}}>
       <View style={styles.container}>
         <Text style={styles.heading}>
           Example to Use React Native Vector Icons
         </Text>
         <View style={styles.iconContainer}>
          
         </View>
         <View style={{marginTop: 16, marginBottom: 16}}>
           {/* Icon.Button Component */}
           <Icon.Button
             name="facebook"
             backgroundColor="#3b5998"
             onPress={() => alert('Login with Facebook')}>
             Login with Facebook
           </Icon.Button>
         </View>
       </View>
  
     </View>
   </SafeAreaView>
 );
};
const styles = StyleSheet.create({
 container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center',
 },
 heading: {
   fontSize: 20,
   textAlign: 'center',
   marginBottom: 20,
 },

});
export default App;

Output

 

Frequently Asked Questions

In react-native, what are vector icons?

The most popular custom icons in the NPM GitHub collection are React Native Vector Icons. It has a collection of over 3000 icons. All of these icons are completely free to use. The React Native Vector icons allow comprehensive customization, including icon size, color, and styling options.

Is it possible to use react icons with react-native?

You can use the react-native vector icon as an icon. It has a variety of icons that we can use in your project to give it a more native appearance.

What's the best way to unlink react-native vector icons?

You may now unlink this dependency with "react-native unlink," which will be automatically included in your app. Ignore this message and notify the library maintainers if a library isn't compatible with auto-linking.

Are the react icons in SVG format?

Fortunately, with React, we can quickly develop a new SVG component that allows us to place our custom SVG icons anywhere we want.

How do you make an icon with an input field?

Icons are commonly added to webpages using the I and span> tags to add icons inside the input element. The fontawesome URL inside the head tag is required to add any icons to the web pages or in any specified region. Using the fa prefix before the icon's name, the fontawesome icon can be put.

Conclusion

In this article, we learned about Vector icons with the help of an example. This article discussed different topics like a list of vector icons, steps to use vector icons, and their types with the installation process. 

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc; you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!

 

Previous article
React Native Linear Gradient
Next article
Native Modules
Live masterclass