React Native Polyicon

The Zero-Config Icon Font Generator for React Native

Turn your SVGs into a sleek, type-safe icon font in seconds.

Why React Native Polyicon?

| Feature | Description | | :--- | :--- | | Zero Config | Works out of the box with sensible defaults. Get started instantly. | | Blazing Fast | Font-based icons are vector-scalable, lightweight, and render quickly. | | Designer Friendly | Simply drop in any standard SVG export. No manual path editing. | | Offline First | The tool runs locally. No external services (like Fontello website) required. | | Type-Safe | Generates a TypeScript component with full type definitions and autocomplete. | | RN Compatible | Works seamlessly with react-native-vector-icons and the Fontello format. |

Quick Start Guide

1. Install

npm install -D react-native-polyicon

Also ensure you have the peer dependency:

npm install react-native-vector-icons

2. Initialize Project

npx react-native-polyicon init

Result: Creates a react-native-polyicon.yaml config file, the assets/icons/svg/ source directory, and output directories.

3. Add SVGs & Generate

Place your SVG files into assets/icons/svg/ and run:

npx react-native-polyicon generate

Output:

• Font file: src/assets/fonts/app-icons.ttf
• Fontello config: src/icons/config.json
• Icon component: src/icons/Icon.tsx

That's it! The generate command automatically:

• Installs react-native-vector-icons if missing
• Creates/updates react-native.config.js with the font path
• Runs npx react-native-asset to link fonts

To skip auto-linking, use --no-link.

4. Use Icons

import { Icon } from './src/icons/Icon';

// Basic usage (SVG file was named "home.svg")
<Icon name="icon-home" size={24} color="#000" />

// With custom styles
<Icon name="icon-search" size={32} color="#6B7280" style={{ marginRight: 8 }} />

Configuration (react-native-polyicon.yaml)

Customize output paths and names to fit your project structure.

| Field | Description | Default | | :--- | :--- | :--- | | name | Font family name registered with the system. | AppIcons | | component_name | Generated React Native component name. | PascalCase of name + Icon | | css_prefix | Prefix for icon names (Fontello convention). | icon- | | output.font_file | Relative path for the generated .ttf font file. | src/assets/fonts/app-icons.ttf | | output.config_file | Relative path for the Fontello-compatible config JSON. | src/icons/config.json | | output.component_file | Relative path for the React Native Icon component. | src/icons/Icon.tsx | | input.svg_dir | Directory containing the source SVG files. | assets/icons/svg |

name: AppIcons
component_name: AppIcon
css_prefix: "icon-"
output:
  font_file: src/assets/fonts/app-icons.ttf
  config_file: src/icons/config.json
  component_file: src/icons/Icon.tsx
input:
  svg_dir: assets/icons/svg

How It Works

Your SVG Files (assets/icons/svg/*.svg)
        |
        v
[react-native-polyicon generate]
        |
        +---> 1. Load & validate SVGs
        +---> 2. Generate TTF font (svgicons2svgfont + svg2ttf)
        +---> 3. Generate Fontello config.json (compatible with react-native-vector-icons)
        +---> 4. Generate React Native Icon component (TypeScript/JavaScript)
        |
        v
Ready to use in your React Native app!

This replaces the manual Fontello website workflow:

• Before: Design SVGs -> Upload to fontello.com -> Download bundle -> Extract files -> Configure manually
• After: Design SVGs -> Run npx react-native-polyicon generate -> Done

Generated Files

Font File (.ttf)

A TrueType font containing all your icons as glyphs. Each SVG becomes a glyph mapped to a Unicode codepoint in the Private Use Area (U+E800+).

Fontello Config (config.json)

A standard Fontello configuration file compatible with react-native-vector-icons' createIconSetFromFontello(). Contains icon names, Unicode mappings, and SVG path data.

Icon Component (.tsx / .js)

A ready-to-use React Native component wrapping react-native-vector-icons. Includes:

• TypeScript types with all icon names as a union type
• Android 13+ (SDK 33) height fix (same fix used in production apps)
• Exported iconNames array for dynamic icon pickers
• JSDoc documentation with usage examples

Advanced Options

| Option | Command | Description | | :--- | :--- | :--- | | Skip Auto-Link | npx react-native-polyicon generate --no-link | Skip dependency install, config update, and font linking. | | Skip Install Only | npx react-native-polyicon generate --no-install | Still link config/fonts but don't install react-native-vector-icons. | | Recursive Scanning | npx react-native-polyicon generate --recursive | Include SVG files from subfolders. | | Verbose Mode | npx react-native-polyicon generate --verbose | Detailed logging for debugging. | | Custom Config | npx react-native-polyicon generate --config path/to/config.yaml | Use a custom config file. | | Force Init | npx react-native-polyicon init --force | Overwrite existing configuration. |

Migrating from Fontello

If you're currently using the Fontello website manually:

1. Export your SVGs from your design tool (Figma, Sketch, etc.)
2. Place them in assets/icons/svg/
3. Run npx react-native-polyicon generate
4. Replace your old config.json import with the new generated one
5. Update your Icon component import to use the generated component

The generated config.json is fully compatible with the Fontello format, so createIconSetFromFontello works identically.

Programmatic API

You can also use the package programmatically:

import { generate, loadConfig } from 'react-native-polyicon';

const config = loadConfig('./react-native-polyicon.yaml');
await generate({
  config,
  projectDir: process.cwd(),
  verbose: true,
  recursive: false,
});

Contributing

We welcome your ideas, bug reports, and code contributions!

Made with love for the React Native community.