Solar Icons for React Native
npm install @solar-icons/react-nativeSolar Icons for React Native - A comprehensive icon library with 1246 icons in 6 styles.
- 🎨 1246 Icons across 37 categories
- 🎭 6 Styles: Bold, BoldDuotone, Broken, LineDuotone, Linear, Outline
- 📦 Tree-shakeable - Only bundle the icons you use
- 🔧 TypeScript - Full type safety
- ⚡ ESM-only - Modern and optimized
- 📱 React Native Native - iOS & Android support (no web)
``bash`
npm install @solar-icons/react-native react-native-svgor
yarn add @solar-icons/react-native react-native-svgor
pnpm add @solar-icons/react-native react-native-svg
> Note: react-native-svg is a peer dependency and must be installed separately.
The recommended way to import icons for optimal tree-shaking:
`tsx
import { Home, User, Settings } from '@solar-icons/react-native/Bold'
import { Heart, Star } from '@solar-icons/react-native/Linear'
function App() {
return (
)
}
`
`tsx`
import { IconName } from '@solar-icons/react-native/Bold'
import { IconName } from '@solar-icons/react-native/BoldDuotone'
import { IconName } from '@solar-icons/react-native/Broken'
import { IconName } from '@solar-icons/react-native/LineDuotone'
import { IconName } from '@solar-icons/react-native/Linear'
import { IconName } from '@solar-icons/react-native/Outline'
All icons accept the following props:
| Prop | Type | Default | Description |
| ---------- | --------- | ---------------- | ----------------------------------------- |
| size | number | 24 | Icon size in pixels (width and height) |color
| | string | 'currentColor' | Icon color (any valid React Native color) |mirrored
| | boolean | false | Mirror the icon horizontally |alt
| | string | undefined | Accessibility label |
Plus all props from react-native-svg's SvgProps (except width and height).
`tsx
import { Home } from '@solar-icons/react-native/Bold'
;
`
`tsx
import { User } from '@solar-icons/react-native/Linear'
;
`
`tsx
import { Heart } from '@solar-icons/react-native/Bold'
;
`
`tsx
import { ArrowRight } from '@solar-icons/react-native/Linear'
;
`
`tsx
import { Star } from '@solar-icons/react-native/Bold'
;
`
- Arrows - Directional arrows and navigation
- Arrows Action - Action-related arrows (undo, redo, forward, reply)
- Astronomy - Space and celestial objects
- Building - Architecture and structures
- Business - Business and finance
- Call - Phone and communication
- Devices - Electronics and gadgets
- Faces - Emotions and expressions
- Files - Documents and file types
- Folders - Folder management
- Food - Food and beverages
- Hands - Hand gestures
- Home - Home and furniture
- IT - Technology and programming
- Like - Reactions and feedback
- List - Lists and organization
- Map - Location and navigation
- Medicine - Healthcare and medical
- Messages - Messaging and chat
- Money - Currency and payments
- Nature - Plants and environment
- Notes - Note-taking and writing
- Notifications - Alerts and notifications
- Parts - Components and parts
- School - Education and learning
- Search - Search and discovery
- Security - Security and privacy
- Settings - Configuration and preferences
- Shopping - E-commerce and retail
- Sports - Sports and fitness
- Text Formatting - Text editing tools
- Time - Time and calendar
- Tools - Utilities and tools
- UI - User interface elements
- Users - People and profiles
- Video - Video and media
- Weather - Weather conditions
Full TypeScript support with proper types:
`tsx
import type { IconProps } from '@solar-icons/react-native'
import { Home } from '@solar-icons/react-native/Bold'
const MyIcon: React.FC
return
}
``
- React Native >= 0.72.0
- React >= 16.8
- react-native-svg >= 13.0.0
MIT © Saoudi Hakim
- @solar-icons/react - Solar Icons for React (web)
- @solar-icons/react-perf - Performance-optimized React icons
- @solar-icons/vue - Solar Icons for Vue
- @solar-icons/nuxt - Solar Icons for Nuxt
- @solar-icons/svelte - Solar Icons for Svelte
Contributions are welcome! Please see CONTRIBUTING.md for details.
- 🐛 Report a bug
- 💡 Request a feature
- 📖 Documentation