react-native-vector-icons

react-native-vector-icons is the original, single-package icon library for React Native, providing a createIconSet factory that turns any icon font’s glyphmap into a ready-to-use <Icon name="..." size={} color={} /> React component. Version 10.x bundles fourteen popular icon families — AntDesign, Entypo, EvilIcons, Feather, FontAwesome (4/5/6), Fontisto, Foundation, Ionicons, MaterialIcons, MaterialCommunityIcons, Octicons, SimpleLineIcons, and Zocial — each pre-generated as a font file plus JSON glyphmap, alongside helpers for building custom icon sets from Fontello or IcoMoon exports.

The library also exposes an Icon.Button component for icon-plus-label buttons and a getImageSource API (backed by a TurboModule-compatible native module) that rasterizes any glyph into a PNG image source, useful for contexts like tab bar icons that require an image rather than a font glyph. The package is explicitly in maintenance mode: its own code and README mark it deprecated in favor of the newer @react-native-vector-icons/* per-family packages published from the same repository’s monorepo, but it remains widely installed (650k+ weekly downloads) by existing apps that haven’t yet migrated.

What You Get

• 14 bundled icon families - AntDesign, Entypo, EvilIcons, Feather, FontAwesome 4/5/6, Fontisto, Foundation, Ionicons, MaterialIcons, MaterialCommunityIcons, Octicons, SimpleLineIcons, and Zocial ship pre-generated as font files plus glyphmaps.
• A single createIconSet factory - the same function powers every bundled family and any custom font, so the component API only has to be learned once.
• Icon.Button component - a ready-made icon-plus-label button that mirrors native touchable styling conventions.
• Custom icon set generators - createIconSetFromFontello and createIconSetFromIcoMoon turn your own exported icon-font kits into the same component API.
• Image-source export via getImageSource - rasterizes any glyph to a PNG source through a TurboModule-backed native call, for contexts like tab bar icons that need an image rather than a font glyph.

Common Use Cases

• Tab bar and navigation icons - apps render Icon components directly as tabBarIcon/headerLeft elements, or via getImageSource where an image object is required instead of a font glyph.
• Rapid prototyping with stock icon sets - teams pull from FontAwesome, Ionicons, or MaterialCommunityIcons without designing or exporting custom icon fonts.
• Maintaining a legacy RN app on the single-package install - projects already on 10.x keep using react-native-vector-icons directly while newer projects move to the per-family @react-native-vector-icons/* packages.
• Building a custom icon font component - design teams export their own icon kit from Fontello or IcoMoon and wire it up with createIconSetFromFontello/createIconSetFromIcoMoon for a consistent component API.

Under The Hood

Architecture The package is a flat, non-monorepo layout (v10.3.0, superseded by a monorepo structure for v11+) built around a single factory function, createIconSet (lib/create-icon-set.js), that generates a React PureComponent subclass per icon font, mapping icon names to Unicode code points via a JSON glyphmap and rendering them through React Native’s Text primitive with a platform-specific font-family resolution (Platform.select across iOS/Android/Windows/web). Each of the fourteen bundled family modules (AntDesign.js, Entypo.js, FontAwesome.js, etc.) is a one-line call into that factory with its own glyphmap and font file; create-multi-style-icon-set.js composes multiple createIconSet results for fonts with distinct weight variants (FontAwesome 5/6). Native platform code lives entirely outside the JS layer — an Objective-C++ manager for iOS/macOS and a Gradle-driven Android module — wired through a codegen’d TurboModule spec that exposes image-rasterization calls used only for the PNG/image-source use case, not for on-screen rendering itself.

Tech Stack Runtime dependencies are minimal: prop-types and yargs. The build toolchain relies on Babel 7 (@babel/cli, @babel/core, metro-react-native-babel-preset) to compile the flat JS sources into a published dist/ directory, alongside upstream icon-font sources (font-awesome, ionicons, fontisto, evil-icons, simple-line-icons, @primer/octicons, @mdi/font) that are consumed only at build time by shell scripts to regenerate glyphmaps and font files, never shipped as runtime dependencies. Linting runs through ESLint with the airbnb config plus Prettier. Native packaging uses CocoaPods (targeting iOS 12+/tvOS 9+/visionOS 1+) and Gradle on Android, with a codegenConfig block declaring the new-architecture TurboModule spec.

Code Quality No dedicated test suite covers the library itself — the only *.test.js file in the repository belongs to a separate icon-explorer web app (directory/), not to index.js or the lib/ modules that make up the published package. ESLint is configured, but the npm test script is effectively just that lint pass, not a test run. Type information comes from an unmaintained index.js.flow file plus runtime PropTypes rather than TypeScript. Error handling is minimal — a single explicit throw when native linking is missing. File and component naming is consistent throughout.

API Design The library’s core ergonomic strength is that one createIconSet(glyphMap, fontFamily, fontFile) factory produces a ready-to-use <Icon name="..." size={} color={} /> component, and that same factory is reused unchanged across all fourteen bundled families and any custom font, so the entire public surface is learnable from a single mental model instead of fourteen different ones. getImageSource additionally lets any icon be materialized as a static image for contexts that can’t render a font glyph directly, a convenience not always present in comparable libraries. The trade-off is explicit in the code itself: createIconSet carries a @deprecated JSDoc pointing users at the newer per-family package model, and consumers must still hand-manage native linking (Info.plist UIAppFonts entries, Android fonts.gradle) rather than relying on autolinking or an Expo config plugin.