Solar Icons

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

Solar Icons v2 is in beta. Report issues on GitHub.

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

Frameworks

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.

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. 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.