Solar Icons

Browse Solar icons in all 7 styles: Linear, Bold, Broken, Duotone and more. Copy SVG or JSX, download PNG. Free for commercial use.

7,476 icons CC-BY-4.0 UI 24px 24px grid by 480 Design

Search icons...

Arrows

alt-arrow-down-bold

alt-arrow-down-bold-duotone

alt-arrow-down-broken

alt-arrow-down-line-duotone

alt-arrow-down-linear

alt-arrow-down-outline

alt-arrow-left-bold

alt-arrow-left-bold-duotone

alt-arrow-left-broken

alt-arrow-left-line-duotone

alt-arrow-left-linear

alt-arrow-left-outline

alt-arrow-right-bold

alt-arrow-right-bold-duotone

alt-arrow-right-broken

alt-arrow-right-line-duotone

alt-arrow-right-linear

alt-arrow-right-outline

alt-arrow-up-bold

alt-arrow-up-bold-duotone

alt-arrow-up-broken

alt-arrow-up-line-duotone

alt-arrow-up-linear

alt-arrow-up-outline

arrow-down-bold

arrow-down-bold-duotone

arrow-down-broken

arrow-down-line-duotone

arrow-down-linear

arrow-down-outline

arrow-left-bold

arrow-left-bold-duotone

arrow-left-broken

arrow-left-down-bold

arrow-left-down-bold-duotone

arrow-left-down-broken

arrow-left-down-line-duotone

arrow-left-down-linear

arrow-left-down-outline

arrow-left-line-duotone

arrow-left-linear

arrow-left-outline

arrow-left-up-bold

arrow-left-up-bold-duotone

arrow-left-up-broken

arrow-left-up-line-duotone

arrow-left-up-linear

arrow-left-up-outline

arrow-right-bold

arrow-right-bold-duotone

arrow-right-broken

arrow-right-down-bold

arrow-right-down-bold-duotone

arrow-right-down-broken

arrow-right-down-line-duotone

arrow-right-down-linear

arrow-right-down-outline

arrow-right-line-duotone

arrow-right-linear

arrow-right-outline

arrow-right-up-bold

arrow-right-up-bold-duotone

arrow-right-up-broken

arrow-right-up-line-duotone

arrow-right-up-linear

arrow-right-up-outline

arrow-up-bold

arrow-up-bold-duotone

arrow-up-broken

arrow-up-line-duotone

arrow-up-linear

arrow-up-outline

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

Precise Shapes Has Padding Uses Stroke

Pack Details

Color Support

Monochrome

How to use Solar icons

License SPDX

CC-BY-4.0

Grid Size

24px

Sample Icons

magnifier-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

How many styles does Solar Icons offer?

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.

What UI type is Solar Icons best suited for?

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.

How do I use Solar Icons in a project?

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

How many icons are in Solar?

Solar contains 7,476 SVG icons in the UI 24px category, designed on a 24px grid.