Solar Icons

Solar Icons for
Modern Frameworks

1,451 unique icons in six styles, packaged for modern web and mobile frameworks.

Explore IconsGet Started
Stroke width1.5
Primary#DBEAFE
Duotone#60A5FA
Stroke width1.5
Primary#DBEAFE
Duotone#60A5FA

Built for All

A complete icon set with six visual styles, native frontend framework packages, autocomplete typings, and AI-ready documentation.

Explore and Search

Search

Filter 1,200+ icons by category, search by keywords, adjust size, weights, and copy code snippets for React, Svelte, Vue, etc.

Solar Icons Explorer Light Mode

Native Framework Packages

Packages

One package per framework, built natively. No wrapper layer.

ReactReact NativeVueNuxtSvelteSolidAngularLaravel BladeRailsFlutter
SvelteSolidAngularLaravel BladeRailsFlutterReactReact NativeVueNuxt
Laravel BladeRailsFlutterReactReact NativeVueNuxtSvelteSolidAngular

Six Visual Styles

Every icon comes in six styles, from light lines to solid shapes.

LinearHeart

AI-Ready Documentation

Docs

Includes llms.txt and llms-full.txt context files for AI agents. Copy any page as Markdown to load documentation into Claude, ChatGPT, or Cursor.

Type-Safe Autocomplete

Get autocomplete suggestions for icon weights and parameters in VS Code or Cursor. Features inline JSDoc typings and syntax-highlighted previews.

App.tsx
TypeScript
1
2
3
4
5
import { StarIcon } from "@solar-icons/react/dynamic/star"
const App = () => (
<StarIcon size={24}
weight=""
■"BoldDuotone"
■"Bold"
■"Broken"
■"LineDuotone"
■"Linear"
-- NORMAL --main*
Ln 5, Col 18UTF-8

Figma Library

Open library

Every icon, in all six styles, as editable components.

Figma Plugin

Get plugin

Search the catalogue and insert icons without leaving Figma.

Integrate Solar Icons.

Choose a framework package, standalone asset, or workflow tool.

React

Recommended React package. CSS custom properties, SolarProvider, unit-per-style.

React Native

React Native and Expo SVG components.

Vue

Vue 3 package. Supports global configuration and dynamic weights.

Nuxt

Nuxt 3 module with auto-import and configuration support.

Svelte

Svelte 5 components using runes.

Solid

Lightweight SolidJS components.

Angular

Angular 17+ standalone components using Signals.

Laravel Blade

Blade components for all six styles, plus a dynamic component and a PHP enum.

Rails

View helper for all six styles, with duotone controls and configuration defaults.

Blazor

Blazor components with static styles, runtime weights, and CSS theming.

Flutter

Widgets for all six styles, plus theming and duotone controls.

Static
new

Framework-agnostic SVGs, sprites, and string templates. Drop icons anywhere, zero JS required.

JS
new

Native DOM injection with zero VDOM overhead. Just SVG, no framework required.

Codemod
new

Move a Solar Icons v1 project to v2 with a preview before any files change.

CLI
new

Find icons and get ready-to-use code from the terminal.

MCP
new

Let your AI assistant search the icon catalog and find the right code for your project.

Built for developers. Maintained with care.

Clean packages, improved search, and developer-friendly tools to make Solar Icons easier to use in your projects. If you find it useful, a GitHub star helps the project grow.

Weekly npm downloads99,973
Total Icons8,706
Total Packages16
Missing an icon?Request it
Star on GitHub
272

Give your agent the right icons.

Install the package for your framework, then use MCP, Skill, or CLI to find exact names and imports.

Explore AI tools
MCP@solar-icons/mcp

Direct catalog access for Cursor, Claude, and coding agents.

Skillsolar-icons

Framework-aware import rules and accurate icon matching.

CLI@solar-icons/cli

Instant terminal search and framework snippet generation.