universal-react-native-icons

React Native icon components inspired by the React Vant design language.

All icons are implemented using react-native-svg, making them fully compatible with:

• React Native CLI
• Expo
• TypeScript projects

This library provides brand icons + multi-style icons with a simple and flexible API.

✨ Features

• ⚡ Universal <Icon /> component
• 🎨 Multiple style variants
• 🏷 Brand icons included
• 🌳 Tree-shakable imports
• 📱 React Native + Expo compatible
• 🧠 Full TypeScript support
• 🚀 Lightweight and fast

📦 Installation

pnpm

pnpm add universal-react-native-icons react-native-svg

yarn

yarn add universal-react-native-icons react-native-svg

npm

npm install universal-react-native-icons react-native-svg

Note: react-native-svg is a peer dependency and must be installed.

🚀 Usage

1️⃣ Universal Icon Component

The easiest way to use icons.

import { Icon } from "universal-react-native-icons";

export default function App() {
  return (
    <>
      <Icon name="ArrowLeft" size={24} />

      <Icon name="ArrowLeft" variant="regular" size={28} color="black" />

      <Icon name="Github" size={28} />
    </>
  );
}

2️⃣ Direct Icon Import (Recommended)

Best for tree-shaking and smaller bundle size.

import { ArrowLeft } from "universal-react-native-icons";

export default function App() {
  return <ArrowLeft size={28} color="black" />;
}

3️⃣ Import Icons by Style

import { Solid, Regular, Light, Thin } from "universal-react-native-icons";

export default function App() {
  return (
    <>
      <Solid.ArrowLeft size={24} />

      <Regular.ArrowLeft size={24} />

      <Light.ArrowLeft size={24} />

      <Thin.ArrowLeft size={24} />
    </>
  );
}

4️⃣ Brand Icons

Brand icons are imported directly.

import { Github, Google, Twitter } from "universal-react-native-icons";

export default function App() {
  return (
    <>
      <Github size={28} />

      <Google size={28} />

      <Twitter size={28} />
    </>
  );
}

🎨 Icon Styles

| Style | Description | | ------- | ----------------------- | | solid | Filled icons | | regular | Standard icons | | light | Thin stroke icons | | thin | Ultra thin stroke icons |

Example:

<Icon name="ArrowLeft" variant="solid" />

<Icon name="ArrowLeft" variant="regular" />

<Icon name="ArrowLeft" variant="light" />

<Icon name="ArrowLeft" variant="thin" />

⚙️ Props

Universal Icon Props

| Prop | Type | Default | Description | | ------- | ------------------------------------------- | ------------ | ----------- | | name | string | required | Icon name | | variant | "solid" \| "regular" \| "light" \| "thin" | solid | Icon style | | size | number | 24 | Icon size | | color | string | currentColor | Icon color |

Example:

<Icon name="User" variant="regular" size={32} color="red" />

Example:

import { User } from "universal-react-native-icons";

<User size={32} color="black" />;

📱 Expo Example

import React from "react";
import { View } from "react-native";
import { Icon } from "universal-react-native-icons";

export default function App() {
  return (
    <View style={{ padding: 40 }}>
      <Icon name="Home" size={28} />
      <Icon name="User" size={28} color="blue" />
      <Icon name="Github" size={28} />
    </View>
  );
}

📂 Project Structure

src
 ├ assets
 │  ├ brands
 │  ├ solid
 │  ├ regular
 │  ├ light
 │  └ thin
 │
 ├ components
 │  └ Icon.tsx
 │
 └ index.ts

🤝 Contributing

Contributions are welcome!

1. Fork the repository
2. Create a new branch
3. Submit a pull request

📄 License

MIT License © code with sorabh