Reicon React Native

2680+ pixel-perfect SVG icons • Outline & Filled weights • React Native component wrapper • Zero dependencies • MIT Licensed

Reicon React Native is the official React Native package for Reicon — a free, open-source SVG icon library with 2680+ handcrafted, grid-aligned icons built for developers and designers. Every component is optimized for tree-shaking and fully TypeScript-ready.

• 🔗 Website & icon browser: reicon.dev
• 📦 Core package: reicon
• ⚛️ React package: reicon-react
• 🎨 Figma plugin: reicon.dev/figma

Install

npm i reicon-react-native react-native-svg
# or
yarn add reicon-react-native react-native-svg
# or
bun add reicon-react-native react-native-svg

Note: This package requires react-native-svg as a peer dependency. Make sure to install it and follow its setup instructions.

Usage

import { Home, ShieldCheck, AltArrowDown } from 'reicon-react-native';

function App() {
  return (
    <View>
      <Home />
      <ShieldCheck size={32} color="#d97757" />
      <AltArrowDown weight="Filled" />
    </View>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 24 | Icon size in pixels | | color | string | #000000 | Primary icon color | | secondaryColor | string | same as color | Secondary color | | weight | IconWeight | Outline | Icon weight / style | | strokeWidth | number | string | — | Override stroke width |

Plus all standard react-native-svg SVG props.

Weights

• Outline — clean outlined style (default)
• Filled — solid filled style

import { Home } from 'reicon-react-native';

<Home />                           {/* Outline (default) */}
<Home weight="Filled" />           {/* Filled */}
<Home weight="Filled" color="red" />

Direct icon import (smallest bundle)

import Home from 'reicon-react-native/icons/Home';

All react-native-svg props are supported

<Home
  size={48}
  color="red"
  style={{ marginRight: 8 }}
  onPress={() => console.log('pressed')}
/>

Tree-shaking — import only what you use

Every icon is a standalone ES module. Metro bundler will tree-shake unused icons automatically.

// ✅ Only Home is included in your bundle
import { Home } from 'reicon-react-native';

Icon Names

Icons use PascalCase, derived from their original kebab-case names:

| Original name | Import | |---------------|--------| | home | Home | | shield-check | ShieldCheck | | alt-arrow-down | AltArrowDown | | shopping-cart | ShoppingCart | | user-circle | UserCircle |

Browse all 2680+ icons at reicon.dev.

TypeScript

Full TypeScript support out of the box:

import { Home, IconProps, IconWeight } from 'reicon-react-native';

const weight: IconWeight = 'Filled';
const props: IconProps = { size: 32, color: '#d97757', weight };

<Home {...props} />

Why Reicon?

| | Reicon | React Native Vector Icons | Lucide RN | |--|--------|---------------------------|-----------| | Icons | 2680+ | 3000+ | 1600+ | | Weights | Outline + Filled | Varies by set | Outline only | | Tree-shakeable | ✅ | ❌ | ✅ | | TypeScript | ✅ | ✅ | ✅ | | Zero dependencies | ✅ (+ react-native-svg) | ✅ | ✅ (+ react-native-svg) | | MIT License | ✅ | ✅ | ✅ |

Related packages

| Package | Description | |---------|-------------| | reicon | Core vanilla JS + CDN | | reicon-react | React components for all 2680+ icons | | reicon-react-native | This package. React Native components for all 2680+ icons | | reicon-vue | Vue 3 components for all 2680+ icons | | reicon-svelte | Svelte components for all 2680+ icons |

Links

• 🌐 Website: reicon.dev
• 📖 Documentation: reicon.dev/usage
• 📦 npm (React Native): npmjs.com/package/reicon-react-native
• 🐙 GitHub: github.com/dqev/reicon
• 🐛 Issues: github.com/dqev/reicon/issues

License

MIT © Dev Chauhan

Free to use in personal and commercial projects.