In React Native, we can make icons using react-native-vector-icon library that enables developers to incorporate vector icons into their applications easily. It offers a flexible and customizable solution for enhancing the visual appeal and user experience of mobile apps.
By using scalable vector graphics, these icons can be rendered at any size without losing quality, making them ideal for various screen resolutions and device types.
We'll need to install a few packages using npm, so make sure that your React Native application is built before we proceed.
You can see here how to create a React Native application.
Now make sure you go inside the newly built project 'newProject' in this case and download the dependencies by running the following commands.
cd newProjectnpm install react-native-vector-icons --save
The react-native-vector-icons package provides a wide selection of icons for different purposes, improving the design and user experience. With over 3,000 free vector icons to choose from, it's easy to integrate them into projects, such as logos, buttons, and navigation bars. These customizable icons enhance the visual appeal of applications, making them more attractive and user-friendly.
react-native-vector-iconsWe will see a basic example of using FontAwesome icons in a React Native application. We can render both a button icon and a normal icon as well.
Icon componentYou can use Icon component to create Icons. We can display a simple rocket icon as an example with a size of 30 pixels and red color.
import Icon from 'react-native-vector-icons/FontAwesome';<Icon name="rocket"size={30}color="#900" />
Icon.Button componentSimilarly, we can create button icons using react-native-vector-icons. The code imports the FontAwesome icon library from react-native-vector-icons. It then renders a button component with the "welcome to facebook" icon, a blue background, and a placeholder onPress function, displaying the text "Login with Facebook."
import Icon from 'react-native-vector-icons/FontAwesome';<Icon.Buttonname="welcome to facebook"backgroundColor="#3b5998"onPress={}>Login with Facebook</Icon.Button>
Learn how react-native-vector-icons assists in displaying vector icons in your application. Press 'w' to view it in a web format.
{
"name": "awesomeproject",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@expo/webpack-config": "^18.0.1",
"expo": "~48.0.18",
"expo-status-bar": "~1.4.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.8",
"react-native-svg": "^13.10.0",
"react-native-svg-uri": "^1.2.3",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"react-native-svg-transformer": "^1.0.0"
},
"private": true
}
Lines 13–19: Holds multiple Icon components. Each Icon component displays a different icon with a specific name, such as "camera," "star," "rocket," "heart," and "cloud." They all have a size of 30 and a color of "#900".
Lines 20–27: There is an Icon.Button component with the name "facebook." This button has a background color of "#3b5998" and an onPress event that triggers an alert message saying "Login with Facebook" when pressed.
Free Resources