@solar-icons/react-native

Bring the complete Solar Icons collection to your React Native applications with native SVG support via react-native-svg.

npm install @solar-icons/react-native

Features

• 7,476 Icon Components across all styles.
• Native SVG Rendering with react-native-svg integration.
• Tree-shaking Ready with multiple entry points.
• Fully Typed with TypeScript definitions for all icons and props.
• Expo Compatible works out-of-the-box with Expo SDK.

Import Methods

The package provides three distinct import strategies to optimize your workflow and bundle size.

1. Style Bundle Imports

Ideal for rapid prototyping or when using many icons of the same style.

import { Home, User, Settings } from '@solar-icons/react-native/Bold'

2. Global Styled Exports

Perfect for mixing styles with descriptive component names.

import { HomeBold, HomeLinear, HeartBroken } from '@solar-icons/react-native'

3. Granular Category Imports

The most efficient method for production, ensuring maximum tree-shaking.

import { Home } from '@solar-icons/react-native/category/ui/Bold/Home'

API Reference

IconProps

All icon components accept the following props, extending SvgProps from react-native-svg (excluding width/height).

IconStyle

An enum for icon styles, useful for dynamic logic.

import { IconStyle } from '@solar-icons/react-native'

// Values: 'Bold', 'BoldDuotone', 'Broken', 'LineDuotone', 'Linear', 'Outline'

IconBase

The core component used by all icons. Exported from @solar-icons/react-native/lib.

TypeScript Integration

Advanced Type Usage

Import types for your custom components or refs.

import type { IconProps, Icon } from '@solar-icons/react-native'
import { useRef } from 'react'
import { Svg } from 'react-native-svg'

const MyComponent = () => {
  const iconRef = useRef<Svg>(null)
  return <HomeBold ref={iconRef} />
}

Custom Icon Wrapper

import React from 'react'
import * as Icons from '@solar-icons/react-native/Bold'
import type { IconProps } from '@solar-icons/react-native'

interface MyIconProps extends IconProps {
  name: keyof typeof Icons
}

export const AppIcon = ({ name, ...props }: MyIconProps) => {
  const IconComponent = Icons[name]
  return <IconComponent {...props} />
}

Technical Details

Package Entry Points

Requirements

• React Native: >= 0.72.0
• react-native-svg: >= 13.0.0
• TypeScript: >= 4.5