Elevate your React Native applications with the power of customizable vector icons. Ideal for embellishing buttons, logos, and navigation or tab bars, these icons seamlessly integrate into your projects. Their versatility makes extension and styling effortless.
For the integration of .svg
files natively, you can explore react-native-vector-image
.
[!TIP] If you are still using the old single package
react-native-vector-icons
please visit https://github.com/oblador/react-native-vector-icons/tree/legacy
- Sponsorship
- Available Icon Sets
- Installation
- Icon Component
- Usage as PNG Image/Source Object
- Multi-Style Fonts
- Custom Fonts
- Animation
- Usage Examples
- Generating Your Own Icon Package
- Changelog
- License
Should you find this library beneficial, kindly contemplate the option of sponsoring.
RNVI comes with the following supported icons. You can search NPM for third party icons.
-
AntDesign
from Ant Group (v4.4.2 with 449 icons) -
Feather
created by Cole Bemis & Contributors (v4.29.2 featuring 287 icons) -
FontAwesome 6
designed by Fonticons, Inc. (v6.6.0 featuring 2050 free and 30213 pro icons) -
Foundation
by ZURB, Inc. (v3.0 with 283 icons) -
Ionicons
crafted by Ionic (v7.4.0 containing 1356 icons) -
MaterialDesignIcons
from MaterialDesignIcons.com (v7.4.47 including 7448 icons) -
Octicons
designed by Github, Inc. (v19.11.0 with 331 icons)
-
Entypo
by Daniel Bruce (v1.0.1 with 411 icons) -
EvilIcons
designed by Alexander Madyankin & Roman Shamin (v1.10.1 with 70 icons) -
FontAwesome
by Fonticons, Inc. (v4.7.0 containing 785 icons) -
FontAwesome 5
from Fonticons, Inc. (v5.15.4 offering 1611 free and 7869 pro icons) -
Fontisto
created by Kenan Gündoğan (v3.0.4 featuring 617 icons) -
MaterialIcons
by Google, Inc. (v4.0.0 featuring 2234 icons) -
SimpleLineIcons
crafted by Sabbir & Contributors (v2.5.5 with 189 icons) -
Zocial
by Sam Collins (v1.1.1 with 100 icons)
See MIGRATION.md if you are migrating from react-native-vector-icons
- Install the common package
npm install --save @react-native-vector-icons/common
- Install the packages for the icons you want use
npm install --save @react-native-vector-icons/fontawesome6 @react-native-vector-icons/evilicons
- Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.
- If you are using one of the following fonts refer to their guides for further instructions
Nothing else needed.
To use the bundled icons on iOS, follow these steps:
- Edit
Info.plist
and add a property called Fonts provided by application (or UIAppFonts if Xcode autocomplete is not working):
List of all available fonts to copy & paste in Info.plist
```xml UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf FontAwesome6_Brands.ttf FontAwesome6_Regular.ttf FontAwesome6_Solid.ttf Fontisto.ttf Foundation.ttf Ionicons.ttf MaterialDesignIcons.ttf MaterialIcons.ttf Octicons.ttf SimpleLineIcons.ttf Zocial.ttf ```Alternatively you can use the included script to update it for you.
npm run rnvi-update-plist packages.json ios/AppName/Info.plist
- Update your pods
cd ios && pod update
This needs more work, see details in #1624
TBA: It should just work???
To port a react-native mobile app to web using react-native-web
you just need to ensure the fonts are known on the web-app side.
You will need add the font-family for each font you use to your css
You can debug missing font-families by looking in the Developer console in your web browser when debugging your web app.
NOTE: if you're using webpack or similar you may need to configure webpack to handle loading of ttf fonts, using url-loader or file-loader. See Web Setup for more details.
In your App.css
or similar add the font-family specifications:
@font-face {
src: url(path/to/fonts/Ionicons.ttf);
font-family: "Ionicons";
}
@font-face {
src: url(path/to/fonts/FontAwesome.ttf);
font-family: "FontAwesome";
}
@font-face {
src: url(path/to/fonts/FontAwesome5_Brands.ttf);
font-family: "FontAwesome5_Brands";
font-weight: 400; /* Regular weight */
font-style: normal;
}
@font-face {
src: url(path/to/fonts/FontAwesome5_Regular.ttf);
font-family: "FontAwesome5_Regular";
font-weight: 400; /* Regular weight */
font-style: normal;
}
@font-face {
src: url(path/to/fonts/FontAwesome5_Solid.ttf);
font-family: "FontAwesome5_Solid";
font-weight: 900; /* Bold weight for solid */
font-style: normal;
}
@font-face {
src: url(path/to/fonts/MaterialIcons.ttf);
font-family: "MaterialIcons";
}
@font-face {
src: url(path/to/fonts/Feather.ttf);
font-family: "Feather";
}
@font-face {
src: url(path/to/fonts/MaterialCommunityIcons.ttf);
font-family: "MaterialCommunityIcons";
}
/* TODO: Add other icons fonts here */
FIXME: Can we improve on this?
To integrate the library with your web project using webpack, follow these steps:
-
In your webpack configuration file, add a section to handle TTF files using
url-loader
orfile-loader
:{ test: /\.ttf$/, loader: "url-loader", // or directly file-loader include: path.resolve(__dirname, "node_modules/react-native-vector-icons"), }
-
In your JavaScript entry point, consume the font files and inject the necessary style tag:
```js import Icon from '@react-native-vector-icons/fontAwesome'; // Generate the required CSS import iconFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf'; const iconFontStyles = `@font-face { src: url(${iconFont}); font-family: FontAwesome; }`; // Create a stylesheet const style = document.createElement('style'); style.type = 'text/css'; // Append the iconFontStyles to the stylesheet if (style.styleSheet) { style.styleSheet.cssText = iconFontStyles; } else { style.appendChild(document.createTextNode(iconFontStyles)); } // Inject the stylesheet into the document head document.head.appendChild(style); ```
By following these steps, you will seamlessly integrate the vector icons library into your web project using webpack, enabling you to effortlessly use the icons within your web application.
You can either use one of the bundled icons above or roll your own custom font.
import Icon from '@react-native-vector-icons/fontawesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;
Any Text property and the following:
Prop | Description | Default |
---|---|---|
size |
Size of the icon, can also be passed as fontSize in the style object. |
12 |
name |
What icon to show, see Icon Explorer app or one of the links above. | None |
color |
Color of the icon. | Inherited |
Prop | Description |
---|---|
getImageSource |
Returns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const source = await Icon.getImageSource(name, size, color)
|
getImageSourceSync |
Same as getImageSource but synchronous. Usage: const source = Icon.getImageSourceSync(name, size, color)
|
Since Icon
builds on top of the Text
component, most style properties will work as expected, you might find it useful to play around with these:
backgroundColor
borderWidth
borderColor
borderRadius
padding
margin
color
fontSize
By combining some of these you can create for example :
Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name
, size
and color
as described above.
const source = Icon.getImageSourceSync('user', 20, 'red');
return <Image source={source} />;
);
Alternatively you may use the async method Icon.getImageSource
.
Keep in mind that Icon.getImageSourceSync
is blocking and might incur performance penalties. Subsequent calls will use cache however.
Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard Icon
component:
import Icon from '@react-native-vector-icons/fontawesome5';
const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to solid
const myIcon2 = <Icon name="comments" size={30} color="#900" iconType="solid" />;
const myIcon3 = <Icon name="comments" size={30} color="#900" iconType="light" />; // Only in FA5 Pro
All static methods from Icon
is supported by multi-styled fonts.
Prop | Description |
---|---|
getImageSource |
Returns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const source = await Icon.getImageSource(name, size, color)
|
getImageSourceSync |
Same as getImageSource but synchronous. Usage: const source = Icon.getImageSourceSync(name, size, color)
|
The best approach is to use our icon generator to create your own icon package.
See [CREATE_FONT_PACKAGE.md] to learn how to create your own font packages.
You can also use createIconSet(glyphMap, fontFamily[, fontFile])
directly in your project. This
returns your own custom font based on the glyphMap
where the key is the icon
name and the value is either a UTF-8 character or it's character code.
fontFamily
is the name of the postscript font NOT the filename. Open the font in
Font Book.app or similar to learn the name. Optionally pass the third
fontFile
argument for android support, it should be the custom font file
name.
import { createIconSet } from '@react-native-vector-icons/common';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');
You should place the font ttf file into rnvi-fonts
. You can customise this location by adding the following snippet to your package.json
{
"reactNativeVectorIcons": {
"fontDir": "src/assets/fonts"
}
}
React Native comes with an amazing animation library called
Animated
. To use it with an
icon, simply create an animated component with this line: const AnimatedIcon = Animated.createAnimatedComponent(Icon)
. You can also use the higher level
animation library
react-native-animatable.
Try the IconExplorer
project in Examples/IconExplorer
folder, there you can also search for any icon.
import Icon from '@react-native-vector-icons/ionicons';
function ExampleView(props) {
return <Icon name="ios-person" size={30} color="#4F8EF7" />;
}
import { Text } from 'react-native';
import Icon from '@react-native-vector-icons/ionicons';
function ExampleView(props) {
return (
<Text>
Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum
</Text>
);
}
This project is licenced under the MIT License.
Any bundled fonts are copyright to their respective authors and mostly under MIT or SIL OFL.