# React Native Vector Icons — Customizable Icon Toolkit for Mobile Apps

> A comprehensive icon library for React Native offering thousands of customizable vector icons from popular icon sets like FontAwesome, MaterialIcons, and Ionicons, with full styling support.

## Install

Save as a script file and run:

# React Native Vector Icons — Customizable Icon Toolkit for Mobile Apps

## Quick Use
```bash
npm install react-native-vector-icons
npx pod-install
```
```jsx
import Icon from 'react-native-vector-icons/MaterialIcons';
<Icon name="home" size={30} color="#4F8EF7" />
```

## Introduction
React Native Vector Icons provides a single, consistent API for rendering thousands of vector icons across iOS and Android. It bundles popular icon sets and supports custom icon fonts, making it the go-to icon solution for React Native projects.

## What React Native Vector Icons Does
- Bundles 20+ popular icon sets including FontAwesome, MaterialIcons, Ionicons, and Feather
- Renders crisp, scalable vector icons at any size and color
- Supports custom icon fonts via the createIconSet API
- Provides icon buttons with built-in touchable behavior
- Works with React Native's styling system for full customization

## Architecture Overview
The library wraps native text rendering on both platforms to display icon glyphs from bundled font files. Each icon set is a separate module that maps icon names to Unicode code points. On iOS it uses CoreText, and on Android it loads TTF fonts via the asset system, ensuring icons render as sharp vector glyphs rather than bitmap images.

## Self-Hosting & Configuration
- Install via npm or yarn and link native dependencies with pod-install or autolinking
- Add font references to Info.plist on iOS for each icon set you use
- Android picks up fonts automatically from the assets directory
- Use the getImageSource method to generate icon images for use in navigation headers or tab bars
- Configure bundled icon sets in react-native.config.js to include only what you need

## Key Features
- Covers thousands of icons across 20+ bundled font families
- Lightweight since only referenced icon sets are included in the final bundle
- Icon buttons with built-in press handling and accessibility labels
- Toolbar and tab bar integration for React Navigation
- createIconSet and createIconSetFromFontello for bringing your own icon fonts

## Comparison with Similar Tools
- **Expo Vector Icons** — wraps this library with Expo-specific setup; use the raw package for bare React Native
- **react-native-svg** — renders arbitrary SVG files; Vector Icons is faster for standard icon glyphs
- **Lucide React Native** — offers a modern SVG icon set but with fewer total icons
- **Phosphor Icons** — clean design language but a smaller selection than bundled sets here
- **Custom SVG sprites** — maximum control but requires manual SVG management per icon

## FAQ
**Q: How do I use only one icon set to reduce bundle size?**
A: Import directly from the specific set, e.g., react-native-vector-icons/Feather, and remove unused fonts from your iOS plist or Android assets.

**Q: Can I use custom SVG icons with this library?**
A: Not directly. Convert your SVGs to a custom font using IcoMoon or Fontello, then load it with createIconSetFromIcoMoon or createIconSetFromFontello.

**Q: Does it work with Expo?**
A: Yes. Expo bundles a compatible version as @expo/vector-icons that works without manual native linking.

**Q: How do I use icons in navigation headers?**
A: Call Icon.getImageSource(name, size, color) which returns a promise resolving to an image source usable in navigation options.

## Sources
- https://github.com/oblador/react-native-vector-icons
- https://oblador.github.io/react-native-vector-icons/

---
Source: https://tokrepo.com/en/workflows/asset-4acd29b9
Author: Script Depot