Solar Icons

1,268 icons in 6 styles. One package per framework. CSS variables, duotone, and tree-shakable imports.

Solar Icons gives you 1,268 distinct icons in six styles: Bold, Linear, Outline, BoldDuotone, LineDuotone, and Broken. With 7,608 total variations.

Packages

React

React 18+ with SolarProvider, useSolar, and CSS variables.

Vue

Vue 3.0+ with SolarProvider, useSolar, and CSS variables.

Svelte

Svelte 5 runes with $bindable provider and named exports.

SolidJS

SolidJS 1.6+ with signal-based useSolar.

Angular

Angular 17+ standalone components with signal-based inputs.

React Native

React Native 0.72+ with react-native-svg.

Nuxt

Nuxt 3+ module with auto-import and configurable prefix.

Static

Framework-agnostic SVGs, sprites, and string modules. Zero JS required.

JS

Vanilla DOM injection with zero VDOM overhead. No framework required.

What changed in v2

The v2 release unifies the library under a single API across every framework.

One package per framework. @solar-icons/react, @solar-icons/vue, @solar-icons/svelte, @solar-icons/solid, @solar-icons/angular, @solar-icons/react-native, and @solar-icons/nuxt. Framework-free options: @solar-icons/static and @solar-icons/js. V2 merges @solar-icons/react-perf into @solar-icons/react.
Classic mode by default. Every icon ships with a single style per component, tree-shakable at the import level. Dynamic style switching uses a separate dynamic import path.
CSS variable cascade. SolarProvider sets --solar-color, --solar-size, --solar-stroke-width, and duotone variables on a wrapper element. Icons inherit these through normal CSS inheritance, no re-renders on change.
Duotone built in. secondaryColor and secondaryOpacity props control the duotone accent path.
Stroke width control. Linear, Broken, and LineDuotone icons accept strokeWidth. Default is 1.5.
Icon suffix on component names. HomeBoldIcon, not Home. Angular uses a Solar prefix (SolarHomeBold) instead.
Kebab-case import paths. @solar-icons/react/bold/heart, not @solar-icons/react/Bold/Heart.