Solar Icons
Getting started

Basic Usage

Import and use Solar Icons in React.

Standard Package (@solar-icons/react)

Standard package components bundle all six styles. Swap styles using the weight prop.

Import and Use

Import any icon directly:

import { Home } from '@solar-icons/react'

export default function App() {
    return <Home />
}

Style (Weight)

Use the weight prop to change styles. The options are: Bold, Linear, Outline, BoldDuotone, LineDuotone, and Broken (default: Linear).

import { Home } from '@solar-icons/react'

export default function App() {
    return <Home weight="Bold" />
}

Props

Standard components accept the following props in addition to standard HTML SVG properties:

PropTypeDefaultDescription
colorstringcurrentColorSets the icon color.
sizestring | number1emSets width and height.
weightIconWeightLinearSets the icon style.
mirroredbooleanfalseFlips the icon horizontally if true.
altstringundefinedAccessibility label.

Performance Package (@solar-icons/react-perf)

Performance package components bundle only a single style.

Import and Use

Import style-specific icons. The component name combines the icon name and style (e.g., Home + Bold = HomeBold).

import { HomeBold, HomeLinear } from '@solar-icons/react-perf'

export default function App() {
    return (
        <div>
            <HomeBold size={32} />
            <HomeLinear size={32} color="blue" />
        </div>
    )
}

You can also import from style-specific entry points to use base icon names:

import { Home } from '@solar-icons/react-perf/bold'
import { Settings } from '@solar-icons/react-perf/linear'

export default function App() {
    return (
        <div>
            <Home size={32} />
            <Settings size={32} />
        </div>
    )
}

Props

These components accept a simpler set of props:

PropTypeDefaultDescription
colorstringcurrentColorSets the icon color.
sizestring | number1emSets width and height.
mirroredbooleanfalseFlips the icon horizontally if true.
altstringundefinedAccessibility label.

How is this guide?

Last updated on

On this page

Standard Package (@solar-icons/react)Import and UseStyle (Weight)PropsPerformance Package (@solar-icons/react-perf)Import and UseProps