Solar Icons

7,101 beautifully crafted SVG icon components for React. Powered by the Solar icon set, featuring 6 distinct style variants, full TypeScript support, and tree-shakeable architecture for optimal bundle size.

Features

• 7,101 icons across 6 style variants
• 6 variants: Bold, Bold Duotone, Broken, Line Duotone, Linear, Outline
• TypeScript ready — fully typed, no extra packages needed
• Tree-shakeable — import only what you use, reduce bundle size
• Flexible sizing — use size prop for shorthand or width/height for individual control
• Style-friendly — works with color, className, and style props
• Dynamic usage — <Icon name="4k" variant="bold" /> API for programmatic selection

Installation

npm install @ninzapp/solar-icons

yarn add @ninzapp/solar-icons

pnpm add @ninzapp/solar-icons

Quick Start

Named Import (Recommended)

Import icons directly by name for optimal tree-shaking:

import { Icon4kBold, IconHomeLinear, IconSettingsOutline } from '@ninzapp/solar-icons'

function App() {
  return (
    <div>
      <Icon4kBold size={32} />
      <IconHomeLinear size={24} color="gray" />
      <IconSettingsOutline size={20} style={{ color: 'royalblue' }} />
    </div>
  )
}

Dynamic Import

Use the generic Icon component for dynamic icon selection:

import { Icon } from '@ninzapp/solar-icons'

function App() {
  return (
    <div>
      <Icon name="4k" variant="bold" size={32} />
      <Icon name="home" variant="linear" size={24} color="gray" />
      <Icon name="settings" variant="outline" size={20} />
    </div>
  )
}

Variants

| Variant | Count | Style | |---------|-------|-------| | bold | 1,230 | Solid, heavy strokes | | bold-duotone | 1,077 | Bold with secondary fill | | broken | 1,241 | Bold with disconnected paths | | line-duotone | 1,085 | Thin with secondary fill | | linear | 1,233 | Thin, clean strokes | | outline | 1,235 | Filled paths, thin strokes |

API Reference

Icon Component (Dynamic)

<Icon
  name="4k"                    // Icon name (kebab-case, e.g., "add-circle")
  variant="bold"               // Style variant: "bold" | "bold-duotone" | "broken" | "line-duotone" | "linear" | "outline"
  size={24}                    // Size (number or string). Sets both width and height
  color="currentColor"         // Icon color (defaults to currentColor)
  className="my-icon"          // CSS class name
  style={{ margin: 10 }}       // Inline styles
/>

Named Icon Components

All named icon components accept the same props as Icon, plus individual width and height:

<Icon4kBold size={32} />                 // shorthand — sets both width and height
<Icon4kBold width={32} height={32} />   // explicit dimensions
<Icon4kBold color="red" />
<Icon4kBold style={{ color: 'royalblue' }} />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | — | Sets both width and height. Takes precedence if both size and width/height are provided. | | width | number \| string | — | Icon width | | height | number \| string | — | Icon height | | color | string | currentColor | Icon fill/stroke color | | className | string | — | CSS class for styling | | style | React.CSSProperties | — | Inline styles |

All standard SVG props are also supported (e.g., onClick, aria-label, etc.).

Icon Naming

Icons use a descriptive, kebab-case naming convention:

icon-name-variant.svg

Examples:

• add-circle-linear.svg → IconAddCircleLinear
• home-outline.svg → IconHomeOutline
• settings-bold.svg → IconSettingsBold

For dynamic usage, use the base name without variant:

<Icon name="add-circle" variant="linear" />

Browser Support

Works in all modern browsers. Requires React 17 or later.

Adding More Icons

1. Drop SVG file(s) into the correct variant folder:

   icons/
   ├── bold/           ← add my-icon-bold.svg here
   ├── bold-duotone/
   ├── broken/
   ├── line-duotone/
   ├── linear/
   └── outline/

   File name convention: <icon-name>-<variant>.svg

2. Regenerate components:

   npm run build:icons

3. Build the package:

   npm run build

That's it — the build script discovers every SVG automatically. No manual wiring needed.

Adding a New Variant

Create a new folder under icons/ (e.g. icons/duotone/) and drop SVGs in. The script picks it up on the next run.

Tree-Shaking

Every icon is a named export — bundlers (Vite, webpack, esbuild) will only ship the ones you import.

// Only Icon4kBold is bundled
import { Icon4kBold } from '@ninzapp/solar-icons'

// IconHomeLinear is NOT included in your bundle

License

MIT License — see LICENSE for details.

Related

• Solar Icons GitHub
• React
• TypeScript