react-native-vector-icons
is a powerful library that lets you incorporate a variety of icons into your React Native app, boosting design and user experience. You can select icons from popular sets like FontAwesome, Material Icons, Ionicons, and many more. Explore available icons here.
Step 1: Install the Library
To install react-native-vector-icons
, use npm or Yarn:
npm install react-native-vector-icons
or
yarn add react-native-vector-icons
Available Icon Sets
With react-native-vector-icons
, you have access to many icon libraries, including:
- AntDesign (298 icons)
- Entypo (411 icons)
- EvilIcons (70 icons)
- Feather (286 icons)
- FontAwesome 5 (1,598 free icons)
- Ionicons (1,338 icons)
- MaterialIcons (2,189 icons)
- MaterialCommunityIcons (6,596 icons)
Explore other sets in the icon gallery.
Step 2: Configure Fonts
Android Setup
In android/app/build.gradle
, specify the fonts to include in react
:
react {
...
project.ext.vectoricons = [
iconFontNames: ['MaterialCommunityIcons.ttf', 'FontAwesome.ttf', 'AntDesign.ttf'] // Add other font files as needed
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
...
}
iOS Setup
In Info.plist
, add the fonts under UIAppFonts
:
<key>UIAppFonts</key>
<array>
<string>MaterialCommunityIcons.ttf</string>
<string>FontAwesome.ttf</string>
<string>AntDesign.ttf</string>
</array>
Additionally, configure react-native.config.js
to prevent automatic linking on iOS and add custom assets:
// react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
dependencies: {
'react-native-vector-icons': {
platforms: {
ios: null, // Disable auto-linking for iOS to avoid font duplication issues
},
},
},
// assets: ['./src/assets/fonts/'], // Custom font path
};
Step 3: Use Icons in Your Components
Now, you can import and use icons in your app:
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
const MyComponent = () => (
<Icon name="home" size={30} color="#900" />
);
Replace MaterialCommunityIcons
with any other icon set as per your requirements.
Conclusion
Integrating react-native-vector-icons
provides you with a vast range of icon options, enhancing your app’s look and feel. With minimal setup in build.gradle
, Info.plist
, and react-native.config.js
, you’re ready to incorporate high-quality icons into your React Native project.
Top comments (0)