Solar Icons Complete Guide: Setup, React, 6 Styles & Figma UI (2026)

1. What is Solar Icons? Geometry, Heritage & Scale

In modern web software and mobile application design, interface iconography often suffers from a frustrating compromise: libraries offer either a single generic outline style or a fragmented collection of inconsistent glyphs. Solar Icons, crafted by the design studio 480 Design, solves this structural problem by providing an expansive system of 7,410 meticulously drawn vector icons indexed on IconStash.

The defining aesthetic characteristic of Solar Icons is its commitment to squircle geometry and continuous curvature. Rather than sharp polygonal vertices or basic circular fillets, Solar icons utilize cubic Bézier curves (superellipse contours) that blend seamlessly into modern operating system aesthetics, including iOS and contemporary SaaS dashboards.

Built upon a strict 24x24 pixel grid with an optical safe margin of 2px on all edges, every glyph maintains an optical center of gravity that aligns naturally with Latin typography, navigation sidebars, and high-density tabular data grids.

2. The 6 Visual Styles Explained with Vector Mechanics

The foundational superpower of Solar Icons is that every functional concept (such as Home, Bell, Settings, or Shield) is crafted across six parallel visual treatments. This enables seamless state management: a button can render in Linear in its idle state, switch to Broken on active hover, and toggle to Bold Duotone when selected.

From an SVG DOM standpoint, Duotone styles operate cleanly via CSS currentColor. The primary path inherits the full font color, while the secondary decorative path applies opacity="0.2" or a CSS token slot, ensuring zero external stylesheet dependencies.

3. Interactive Solar Icons Sandbox & Live Generator

Test the six stylistic treatments of Solar Icons below. Toggle styles to observe how the path coordinates, visual weight, and markup change instantly:

// Live Generated React Import
import { HomeIcon, BellIcon, SettingsIcon, UserIcon } from '@solar-icons/react/linear';

export function Navigation() {
  return <HomeIcon size={24} color="currentColor" strokeWidth={1.5} />;
}

4. React & Next.js Setup: @solar-icons/react & Tree-Shaking

In React and Next.js applications (including Next.js 15 App Router and React 19 Server Components), Solar Icons provides official component wrappers via @solar-icons/react. To install the package:

npm install @solar-icons/react
# or with pnpm
pnpm add @solar-icons/react
# or with bun
bun add @solar-icons/react

To ensure perfect bundle isolation and eliminate unused styles, always use subpath imports targeting the specific visual style required:

// Optimal Tree-Shaking: Import directly from the style subpath
import { HomeIcon, MagnifierIcon } from '@solar-icons/react/linear';
import { BellIcon } from '@solar-icons/react/broken';
import { UserCircleIcon } from '@solar-icons/react/bold-duotone';

export function DashboardHeader() {
  return (
    <header className="flex items-center justify-between p-4">
      <div className="flex items-center gap-2">
        <HomeIcon size={24} className="text-zinc-400 hover:text-white transition-colors" />
        <span className="font-semibold">Command Center</span>
      </div>

      <div className="flex items-center gap-4">
        <button aria-label="Search" className="p-2 rounded-lg bg-zinc-900">
          <MagnifierIcon size={20} color="currentColor" />
        </button>
        <button aria-label="Notifications" className="p-2 rounded-lg bg-zinc-900 relative">
          <BellIcon size={20} color="#C1DD2D" />
        </button>
        <UserCircleIcon size={28} color="currentColor" />
      </div>
    </header>
  );
}

5. Centralized Theming with <SolarProvider>

In large design systems, passing size, color, and strokeWidth to dozens of individual icon instances creates maintenance friction. Solar Icons resolves this with SolarProvider, which injects global defaults across the component tree:

import React from 'react';
import { SolarProvider } from '@solar-icons/react';
import { HomeIcon, SettingsIcon, BellIcon } from '@solar-icons/react/linear';

export function AppRoot({ children }: { children: React.ReactNode }) {
  return (
    <SolarProvider
      size={20}
      color="currentColor"
      strokeWidth={1.5}
    >
      <div className="app-shell">
        <nav className="sidebar">
          {/* All child icons automatically inherit size={20} and strokeWidth={1.5} */}
          <HomeIcon />
          <SettingsIcon />
          <BellIcon />
        </nav>
        <main>{children}</main>
      </div>
    </SolarProvider>
  );
}

6. Vue 3 & Vanilla SVG Workflows

For Vue 3 and Nuxt applications, Solar provides @solar-icons/vue. Icons can be installed and utilized with the Composition API:

<script setup lang="ts">
import { HomeIcon, BellIcon } from '@solar-icons/vue/linear';
</script>

<template>
  <div class="nav-bar">
    <HomeIcon :size="24" color="currentColor" :stroke-width="1.5" />
    <BellIcon :size="24" color="#C1DD2D" />
  </div>
</template>

If you prefer zero dependencies or are developing in Astro or Hugo, you can export raw SVG code straight from IconStash. Clean Solar SVGs require only the viewBox="0 0 24 24" and fill="currentColor" or stroke="currentColor":

<!-- Raw 0-Dependency Solar SVG: Bell Linear -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/>
</svg>

7. Figma Component Token Architecture

Design teams building UI component libraries in Figma benefit from the official Solar Icons Figma Plugin. Solar is structured natively with Figma component properties:

• Variant: Style: Seamlessly toggle between Linear, Bold, Bold Duotone, Broken, Outline, and Line Duotone without resetting component overrides.
• Stroke Preservation: Linear and Broken variants utilize live vectors with configurable outline thickness (1px, 1.5px, 2px).
• Color Tokens: Layer names are normalized to Primary and Secondary across all 7,410 glyphs, allowing instant batch binding to Figma Design Tokens or CSS Variables.

8. Solar Icons vs Lucide, Phosphor & Tabler Benchmark

How does Solar Icons compare against the other leading open-source icon libraries indexed on IconStash? Here is the architectural comparison:

9. Accessibility (ARIA) & Touch Target Doctrine

Whenever icons are placed in production web apps, strict accessibility rules must be followed to avoid confusing assistive technologies:

1. Purely Decorative Icons: When an icon accompanies visible label text (such as a 'Download CSV' button with a download icon), hide the icon from the accessibility tree by specifying aria-hidden="true".
2. Icon-Only Action Buttons: When an icon serves as an interactive button with no text (e.g., a bell notification trigger), provide an explicit aria-label on the parent button:

   <button aria-label="View unread notifications" className="btn-icon">
     <BellIcon size={20} aria-hidden="true" />
   </button>

3. Touch Target Sizing: While Solar icons are designed on a 24px grid, interactive buttons must meet the WCAG 2.2 AA minimum target size of 24x24 CSS pixels and the recommended AAA target of 44x44 CSS pixels. Wrap the 24px icon in a padded interactive hit area rather than scaling the icon itself.

10. Frequently Asked Questions