Solar Icons

Solar Icons is a single icon catalogue for product interfaces, documentation, and developer tools: 1,451 icons across six styles (8,706 SVG variations), with the same collection distributed across frameworks, Figma, SVG assets, the CLI, and MCP.

Browse the catalogue · Read the documentation · Install the Figma plugin

Why Solar Icons

• Six styles for the same icon set: Linear, Broken, Outline, Bold, LineDuotone, and BoldDuotone.
• Framework packages with typed components and tree-shakeable imports.
• Shared controls for size, color, stroke width, and duotone colors.
• Framework-free SVG, sprite, ESM, and vanilla JavaScript options.
• The same catalogue is available in Figma and through developer tooling.

Packages

Package	Registry	Docs
@solar-icons/react		Guide
@solar-icons/react-native		Guide
flutter_solar_icons		Guide
SolarIcons.Blazor		Guide
@solar-icons/vue		Guide
@solar-icons/nuxt		Guide
@solar-icons/svelte		Guide
@solar-icons/solid		Guide
@solar-icons/angular		Guide
solar-icons/blade		Guide
solar_icons		Guide
@solar-icons/static		Guide
@solar-icons/js		Guide
@solar-icons/codemod		Guide
@solar-icons/cli		Guide
@solar-icons/mcp		Guide

Start with React

npm install @solar-icons/react

import { HomeIcon } from '@solar-icons/react/linear'

export function Example() {
    return <HomeIcon size={24} strokeWidth={1.5} />
}

Each style has its own import path. See the React guide for providers, CSS variables, and duotone settings. For other frameworks, choose the matching package above or browse the package documentation.

Tools

• Figma plugin: Browse the catalogue and insert the same SVG assets used by the packages. Install it from Figma.
• CLI: Search, inspect, list, and export icons locally. See @solar-icons/cli.
• MCP: Expose icon search and retrieval to MCP-compatible clients. See @solar-icons/mcp.
• Agent Skill: Give an agent a searchable Solar Icons catalogue with skills/solar-icons/SKILL.md.

npx skills add saoudi-h/solar-icons --skill solar-icons
npx @solar-icons/cli search "home" --limit 10 --json

The documentation site also provides /llms.txt and /llms-full.txt for tools that work better with plain-text documentation.

Migration from v1

Run the codemod to migrate supported imports and component names. It previews changes before writing files and reports cases that need manual review.

License

• Code: MIT
• Icons: CC BY 4.0 by 480 Design. Attribution is required.

Credits

• 480 Design: Original Solar icon set.
• Noaman Monther (devnoaman): Flutter package (flutter_solar_icons).
• Taha Reeh (TahaReeh): Blazor package (SolarIcons.Blazor).
• Phosphor Icons and Lucide Icons: Inspiration for the package structure.