Solar Icons

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

Solar Icons gives you 1,451 distinct icons in six styles: Bold, Linear, Outline, BoldDuotone, LineDuotone, and Broken. With 8,706 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.

Codemod

Preview and apply conservative migrations from Solar Icons v1 to v2.

AI tools

Use Solar Icons from the terminal, connect it to an MCP client, or give a coding agent a catalog-aware skill.

CLI, MCP, and Skills

Search icons, get framework snippets, and expose the catalog to AI-assisted workflows.

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. Laravel Blade ships as solar-icons/blade on Packagist. 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.