React Native Vector Icons
Icon fonts for React Native apps, with per-icon-set packages and full styling.
- Stars
- 17.9k
- Forks
- 2.1k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 18 days ago
- Type
- Library
What it is
This is a set of libraries that lets React Native apps show vector icons, such as buttons, tab bar items, and logos, drawn from popular icon sets. You install only the icon sets you need as separate packages, then use an Icon component that works like a text element, so size, color, and standard style properties apply. It can also turn icons into bitmap images for components that need an image source.
- Show a rocket or star icon in a button with a chosen color and size
- Add icons to navigation or tab bars
- Generate a PNG image source from an icon for a component that needs a bitmap
- Create a custom icon package from your own font using the included generator
Great for
- React Native developers who need common UI icons in buttons, navigation, or tab bars
- Teams that want to pick only the icon sets they use, installed as separate packages
- Projects that need to style icons with color, size, borders, or padding like text
- Developers who want to build their own icon font package with the provided generator
Not ideal for
- Projects that need native SVG file support: the README points to react-native-vector-image for that
- Teams relying on icon sets the README marks as no longer maintained upstream, since updates may stop
- Beginners with no React Native experience, since setup differs for iOS, Android, Windows, Expo, and web
How to get it
- 1
Install with a package manager
You'll need: Node.js · React Native project
Install icon set packages
npm install @react-native-vector-icons/fontawesome-free-solid @react-native-vector-icons/lucide - 2
Run it
- Install the icon set packages you want with npm.
- Follow the setup guide for Expo, React Native, or Web in the docs folder.
- Import an icon set, for example FontAwesomeFreeSolid, from its package.
- Render it with a name prop, such as name="rocket", and set size and color.
- 3
Get the most out of it
- Use the static import path (for example .../static) to embed the font at build time instead of loading it at runtime
- Use getImageSource or getImageSourceSync to turn icons into bitmap sources for components that need images, noting the sync method can block
- Set a custom font directory with the fontDir property in package.json for fonts you provide, such as FontAwesome Pro
- Use the Icon Explorer app or the project's documentation site to search icon names
Downloads
Strengths
- Supports many established icon sets, including Lucide, Ionicons, and Material Design Icons, listed with versions and icon counts
- Icons behave like text, so standard style properties work as expected
- Packages are split per icon set, so apps only include what they install
Trade-offs
- Setup involves platform-specific steps, and the README sends users to separate guides for Expo, React Native, and Web
- Several icon sets are listed as no longer maintained upstream
- Some features, such as image sources, depend on Expo or an extra package
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-native-vector-icons (this) | 17.9k | Library | intermediate | 18 days ago | React Native developers who need common UI icons in buttons, navigation, or tab bars |
| react-native-elements | 25.9k | Library | intermediate | 6 months ago | React Native developers who want ready-made UI components |
| tamagui | 14.3k | Library | intermediate | 5 days ago | Teams building the same app for web and native with React |
| storybook | 91.4k | Dev tool | intermediate | 4 days ago | Frontend teams building a shared component library or design system |
| tabler-icons | 22.5k | App | beginner | 8 days ago | Web developers who need a consistent set of icons for buttons, menus, and dashboards |
| Detox | 12.1k | Library | intermediate | 4 days ago | Teams building React Native apps for Android and iOS who want automated end-to-end tests |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.