solar-icons-rn

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

✨ Features

• 🎨 6 Icon Styles: Bold, Bold Duotone, Broken, Line Duotone, Linear, Outline
• 📦 1500+ Icons across 35+ categories
• 🎯 TypeScript Support with full type definitions
• ⚡ Tree-shakeable - only bundle the icons you use
• 📱 React Native & Expo compatible
• 🎨 Customizable colors and sizes via props

📦 Installation

Using Yarn (recommended)

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

Using npm

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

Expo

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

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

🚀 Quick Start

Using SolarIcon Component (Recommended)

The simplest way to use icons with a unified API:

import { SolarIcon } from "solar-icons-rn";

function App() {
  return (
    <>
      {/* Default type is "linear" */}
      <SolarIcon name="Home" size={24} color="#000" />

      {/* Specify different icon types */}
      <SolarIcon name="ArrowDown" type="bold" size={24} color="#3b82f6" />
      <SolarIcon name="Heart" type="outline" size={32} color="#ef4444" />
      <SolarIcon name="Star" type="bold-duotone" size={28} color="#f59e0b" />
    </>
  );
}

SolarIcon Props

| Prop | Type | Default | Description | | ---------------- | --------------------------------------------------------------------------------- | ---------- | ----------------------------------------- | | name | string | required | The icon name (e.g., "Home", "ArrowDown") | | type | "bold" \| "bold-duotone" \| "broken" \| "line-duotone" \| "linear" \| "outline" | "linear" | Icon style | | size | number | - | Shorthand for width and height | | color | string | - | Shorthand for primaryColor | | primaryColor | string | - | Primary icon color | | secondaryColor | string | - | Secondary color (for duotone icons) | | width | number | - | Icon width | | height | number | - | Icon height |

Import Individual Icons

For optimal tree-shaking, import icons directly:

import { Bold, Linear, Outline } from "solar-icons-rn";

// Using category exports
function App() {
  return (
    <>
      <Bold.Arrows.ArrowDown primaryColor="#000" width={24} height={24} />
      <Linear.EssentionalUI.Home
        primaryColor="#3b82f6"
        width={32}
        height={32}
      />
      <Outline.Users.User primaryColor="#10b981" width={24} height={24} />
    </>
  );
}

Using getIconComponent Helper

Dynamically get icons by type and name:

import { getIconComponent, IconTypes } from "solar-icons-rn";

function DynamicIcon({ iconType, iconName, ...props }) {
  const IconComponent = getIconComponent(iconType, iconName);

  if (!IconComponent) return null;

  return <IconComponent {...props} />;
}

// Usage
<DynamicIcon
  iconType={IconTypes.Bold}
  iconName="Home"
  primaryColor="#000"
  width={24}
  height={24}
/>;

🎨 Icon Styles

| Style | Import | Description | | ---------------- | ------------- | ------------------------------- | | Bold | Bold | Solid filled icons | | Bold Duotone | BoldDuotone | Two-tone filled icons | | Broken | Broken | Broken/interrupted stroke icons | | Line Duotone | LineDuotone | Two-tone line icons | | Linear | Linear | Clean line icons | | Outline | Outline | Outlined stroke icons |

📁 Icon Categories

Icons are organized into the following categories:

• Arrows - Directional arrows
• ArrowsAction - Action arrows (download, upload, etc.)
• Astronomy - Space and astronomy icons
• BuildingInfrastructure - Buildings and structures
• BusinessStatistic - Charts and graphs
• Call - Phone and call icons
• DesignTools - Design and editing tools
• ElectronicDevices - Devices and electronics
• EssentionalUI - Essential UI elements
• FacesEmotionsStickers - Emojis and faces
• Files - File types and documents
• Folders - Folder icons
• FoodKitchen - Food and kitchen items
• Hands - Hand gestures
• HomeFurniture - Home and furniture
• Like - Hearts, stars, and reactions
• List - List and menu icons
• MapLocation - Maps and location
• Medicine - Medical icons
• MessagesConversation - Chat and messaging
• Money - Finance and payment
• NatureTravel - Nature and travel
• NetworkITProgramming - Tech and programming
• Notes - Notes and documents
• Notifications - Alerts and notifications
• School - Education icons
• Search - Search and magnifier
• Security - Security and privacy
• SettingsFineTuning - Settings and controls
• ShoppingEcommerce - Shopping and e-commerce
• Sports - Sports and fitness
• TextFormatting - Text and typography
• Time - Time and calendar
• TransportPartsService - Vehicles and transport
• Users - User and people icons
• VideoAudioSound - Media controls
• Weather - Weather icons

🎯 Props

All icons accept the following props:

| Prop | Type | Default | Description | | ---------------- | -------- | ---------------- | ----------------------------------- | | width | number | 24 | Icon width | | height | number | 24 | Icon height | | primaryColor | string | "currentColor" | Primary/stroke color | | secondaryColor | string | - | Secondary color (for duotone icons) |

Plus all standard react-native-svg SvgProps.

📝 TypeScript

Full TypeScript support with exported types:

import type {
  IconType,
  IconComponentType,
  BoldIconName,
  LinearIconName,
  // ... other icon name types
} from "solar-icons-rn";

Available Types

• IconTypes - Enum of icon style types
• IconType - Union type of all icon types
• IconComponentType - React component type for icons
• BoldIconName - Union of all Bold icon names
• BoldDuotoneIconName - Union of all Bold Duotone icon names
• BrokenIconName - Union of all Broken icon names
• LineDuotoneIconName - Union of all Line Duotone icon names
• LinearIconName - Union of all Linear icon names
• OutlineIconName - Union of all Outline icon names

💡 Examples

Custom Colored Icon

import { Bold } from "solar-icons-rn";

<Bold.Like.Heart width={32} height={32} primaryColor="#ef4444" />;

Duotone Icon with Two Colors

import { BoldDuotone } from "solar-icons-rn";

<BoldDuotone.EssentionalUI.Home
  width={32}
  height={32}
  primaryColor="#3b82f6"
  secondaryColor="#93c5fd"
/>;

Icon Button Component

import { TouchableOpacity } from "react-native";
import { Linear } from "solar-icons-rn";

function IconButton({ onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <Linear.SettingsFineTuning.Settings
        width={24}
        height={24}
        primaryColor="#374151"
      />
    </TouchableOpacity>
  );
}

📄 License

MIT © EbenJesusSaves

🙏 Credits

Icons designed by Solar Icons.

🤝 Contributing

Contributions are welcome! We appreciate your help in making this library better.

Please read our Contributing Guide for details on:

• How to set up your development environment
• Our code of conduct
• The pull request process
• Coding standards and best practices

Quick start:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

See CONTRIBUTING.md for detailed guidelines.

📬 Support

If you have any questions or issues, please open an issue on GitHub.