Navigate:
All Reposreact-native-vector-icons
~$REACTN0.0%

React Native Vector Icons: Customizable icon library

Vector icon fonts rendered as native React Native components.

LIVE RANKINGS • 06:50 AM • STEADY
OVERALL
#225
36
MOBILE & DESKTOP
#9
5
30 DAY RANKING TREND
ovr#225
·Mobil#9
STARS
17.8K
FORKS
2.1K
DOWNLOADS
435.6K
7D STARS
+5
7D FORKS
0
See Repo:
Share:

Learn more about react-native-vector-icons

React Native Vector Icons is a cross-platform icon library that renders vector-based icon fonts as native React Native components. The library bundles popular icon font collections and converts their glyphs into scalable native views that can be styled through standard React Native props for size, color, and other visual properties. It provides a component-based interface where icon names are mapped to their corresponding glyphs in the underlying font files, with the rendering engine translating these into platform-specific vector graphics on both iOS and Android. The implementation supports dynamic styling and theming by accepting standard style props, enabling icons to inherit colors and dimensions without requiring pre-generated image assets at multiple resolutions.


1

Multiple Icon Sets

Bundles 8 actively maintained icon families plus legacy sets, totaling over 15,000 icons across different design systems. Supports FontAwesome, Material Design, Ionicons, and others through a unified API without switching libraries.

2

Granular Package Installation

Each icon set ships as a separate npm package, allowing developers to install only required fonts. Reduces bundle size by excluding unused icon families from the final application build.

3

PNG Export Capability

Renders icons as static PNG image sources in addition to vector components. Enables compatibility with contexts where vector rendering fails or performance requires rasterized assets.


import { FontAwesome5 } from "@react-native-vector-icons/fontawesome5";

<FontAwesome5 name="comments" size={30} color="#900" />; // Defaults to regular

<FontAwesome5 name="comments" size={30} color="#900" iconType="solid" />

<FontAwesome5 name="comments" size={30} color="#900" iconType="light" />

v12.4.0

FontAwesome upgraded to v7 with a new package structure; review icon imports and dependencies for breaking changes.

  • Upgrade FontAwesome to version 7, which introduces a new package structure that may affect existing icon references.
  • Release notes do not specify breaking changes or migration steps; test icon imports after upgrading.
v12.4.0

Upgrades FontAwesome to version 7 with a new package structure; review icon imports for any structural changes.

  • Upgrade FontAwesome to version 7, which introduces a new package structure that may affect icon imports.
  • Update @react-native-vector-icons/common to 12.4.0 as a dependency; release notes do not specify breaking changes.
v12.4.0

Upgrades FontAwesome to version 7 with a new package structure; no breaking changes specified in release notes.

  • Upgrade FontAwesome icons to version 7, which introduces a new package structure for icon imports.
  • Update @react-native-vector-icons/common dependency to 12.4.0 alongside this release.


[ EXPLORE MORE ]

Related Repositories

Discover similar tools and frameworks used by developers