react-native-solar-icons

Beautiful Solar icon set for React Native and Expo - 1200+ premium SVG icons in 6 different styles.

✨ Features

• 🎨 6 Icon Styles: Bold, Bold Duotone, Broken, Line Duotone, Linear, Outline
• 📦 1200+ Icons across 35+ categories
• 🎯 Full TypeScript Support with complete type definitions
• 📱 React Native & Expo compatible out of the box
• 🎨 Customizable colors and sizes via props
• 🌈 Duotone Support with primary and secondary colors

📦 Installation

Using npm

npm install react-native-solar-icons react-native-svg

Using Yarn

yarn add react-native-solar-icons react-native-svg

Expo

npx expo install react-native-solar-icons react-native-svg

Note: This package requires react-native-svg as a peer dependency.

🚀 Quick Start

Option 1: Direct Import (Recommended - Tree-shakeable)

Import individual icons directly for the smallest bundle size:

import { Home, ArrowDown, Heart } from "react-native-solar-icons/icons/linear";
import { Star } from "react-native-solar-icons/icons/bold";
import { Home as HomeDuotone } from "react-native-solar-icons/icons/bold-duotone";

function App() {
  return (
    <>
      {/* Basic usage */}
      <Home width={24} height={24} color="#000000" />

      {/* With custom size and color */}
      <ArrowDown width={32} height={32} color="#3b82f6" />

      {/* Bold style */}
      <Heart width={24} height={24} color="#ef4444" />

      {/* Duotone with primary and secondary colors */}
      <HomeDuotone
        width={32}
        height={32}
        primaryColor="#000000"
        secondaryColor="#999999"
      />
    </>
  );
}

Available style imports:

• react-native-solar-icons/icons/linear
• react-native-solar-icons/icons/bold
• react-native-solar-icons/icons/outline
• react-native-solar-icons/icons/broken
• react-native-solar-icons/icons/bold-duotone
• react-native-solar-icons/icons/line-duotone

Option 2: Using SolarIcon Component

Unified API for runtime icon selection (larger bundle):

import { SolarIcon } from "react-native-solar-icons";

function App() {
  return (
    <>
      {/* Basic usage - defaults to "linear" style */}
      <SolarIcon name="Home" />

      {/* With size and color */}
      <SolarIcon name="ArrowDown" size={32} color="#3b82f6" />

      {/* Different icon styles */}
      <SolarIcon name="Heart" type="bold" size={24} color="#ef4444" />
      <SolarIcon name="Star" type="outline" size={28} color="#f59e0b" />

      {/* Duotone icons with two colors */}
      <SolarIcon
        name="Home"
        type="bold-duotone"
        size={32}
        primaryColor="#000000"
        secondaryColor="#999999"
      />
    </>
  );
}

SolarIcon Props

| Prop | Type | Default | Description | | ---------------- | ----------- | ----------- | ----------------------------------------- | | name | IconName | required | The icon name (e.g., "Home", "ArrowDown") | | type | IconStyle | "linear" | Icon style variant | | size | number | 24 | Icon width and height | | color | string | "#000000" | Icon color (shorthand for primaryColor) | | primaryColor | string | - | Primary icon color | | secondaryColor | string | - | Secondary color (for duotone icons) |

Plus all standard react-native-svg SvgProps.

Available Icon Styles

| Style | Type Value | Description | | ------------ | ---------------- | ------------------------------ | | Bold | "bold" | Filled, solid icons | | Bold Duotone | "bold-duotone" | Two-color filled icons | | Broken | "broken" | Broken/interrupted line icons | | Line Duotone | "line-duotone" | Two-color outlined icons | | Linear | "linear" | Clean outlined icons (default) | | Outline | "outline" | Simple outline icons |

� Bundle Size & Tree-Shaking

Direct imports are recommended for optimal bundle size:

• ✅ ~700 bytes per icon when using direct imports (e.g., from "react-native-solar-icons/icons/linear")
• ⚠️ ~145MB when importing from main entry (from "react-native-solar-icons")

The library is built with preserveModules to enable proper tree-shaking. Modern bundlers (Metro, Webpack, etc.) will only include the icons you actually import.

Example bundle impact:

// ✅ Optimal - Only ~2KB added to bundle
import { Home, Heart } from "react-native-solar-icons/icons/linear";

// ⚠️ Not recommended - Includes all icons
import { SolarIcon } from "react-native-solar-icons";

�📚 TypeScript Support

The library provides full TypeScript support with:

• IconName - Union type of all available icon names
• IconStyle - Union type of all style variants
• SolarIconProps - Props interface for the SolarIcon component
• IconProps - Base props for individual icon components

import type {
  IconName,
  IconStyle,
  SolarIconProps,
} from "react-native-solar-icons";

// Type-safe icon names
const iconName: IconName = "Home";
const style: IconStyle = "bold-duotone";

🎨 Icon Categories

Icons are organized into categories including:

• Arrows & Navigation
• Business & Statistics
• Communication & Messages
• Design Tools
• Electronic Devices
• Essential UI
• Files & Folders
• Home & Furniture
• Maps & Location
• Media & Sound
• Nature & Weather
• Security & Privacy
• Shopping & E-commerce
• Social & Users
• And many more...

🔧 Development

Building from source

# Install dependencies
npm install

# Generate icon components from SVGs
npm run codegen

# Build the library
npm run build

Adding new icons

1. Add SVG files to the appropriate icons/<Style>/<Category>/ folder
2. Run npm run codegen to regenerate components
3. Run npm run build to rebuild the library

📄 License

MIT License - see LICENSE for details.

🙏 Credits

Based on the Solar Icon Set by 480 Design.