Solar Icons

Browse 7401 free Solar SVG icons. Download SVG, copy as JSX, PNG or Base64. CC BY 4.0 licensed. Designed by 480 Design. Styles: Has Padding, Uses Stroke.

7,401 icons CC-BY-4.0 UI 24px 24px grid by 480 Design
⌘+F

Copy & download Solar icons

Click any icon above to open the detail panel. Four export formats are available instantly — no sign-up required.

SVG

Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.

JSX / TSX

React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.

PNG

Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.

Base64

Inline data URI — embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.

Works with shadcn/ui

Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install and use via @iconify/react — fully tree-shakeable, no icon font loading required.

About Solar

Solar Icons is a comprehensive open-source SVG icon library by 480 Design, offering 7 visual styles per icon — Linear, Outline, Bold, Broken, Duotone, Line Duotone, and Bold Duotone — making it one of the most stylistically versatile free icon sets available. With 9,600+ icons across all styles, Solar covers every major UI action and category. Free under a permissive license and available through the Iconify ecosystem. Solar's warm, rounded aesthetic with its distinctive Broken and Duotone treatments suits health platforms, wellness apps, consumer mobile applications, and premium landing pages. The Duotone variant adds a subtle second-color depth layer popular for hero sections and feature illustrations. Search Solar Icons, copy SVG, export as JSX, and download PNG on AllSVGIcons. Compared with Phosphor: Solar's multi-style system focuses on visual storytelling variety rather than semantic weight states; both are excellent choices for design systems needing style flexibility. Ideal for any project where icon personality and visual richness matter.

Created By

480 Design Visit Website

License

CC BY 4.0 View License

Features & Tags

Has Padding Uses Stroke

Pack Details

Color Support

Monochrome

Category

UI 24px

In 6 collections

UI E-Commerce & Shopping Duotone SVG for Dark Mode SVG for Astro SVG for Figma

How to use Solar icons

License SPDX

CC-BY-4.0

Grid Size

24px

Sample Icons

magnifer-zoom-out-broken, armchair-2-bold-duotone, traffic-economy-line-duotone

React

tsx 
// Solar is available via Iconify — no separate npm package needed
import { Icon } from '@iconify/react';

export default function App() {
  // Styles: linear, outline, bold, bold-duotone, broken, line-duotone
  return <Icon icon="solar:magnifer-bold-duotone" width={24} />;
}

HTML / CDN

html 
<!-- Solar via Iconify CDN -->
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="solar:magnifer-bold-duotone" width="24"></iconify-icon>

Via Iconify · any framework

tsx 
import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="solar:icon-name" width={24} />;
}

Compare Solar with similar icon packs

Phosphor Icons Tabler Icons Lucide

Frequently Asked Questions

Solar provides 7 styles per icon: Linear, Outline, Bold, Bold Duotone, Broken, Line Duotone, and Outline Color — one of the widest style ranges of any free icon library.

Solar's warm, rounded aesthetic suits health, productivity, and consumer app interfaces. Its Duotone and Broken styles are particularly popular for premium mobile app designs.

Copy any SVG directly from AllSVGIcons, or use via Iconify: import { Icon } from "@iconify/react"; <Icon icon="solar:search-bold" />.