@solar-icons/solid

SolidJS components for Solar Icons with optimal bundle size and tree-shaking support.

The @solar-icons/solid package provides SolidJS components for Solar Icons. It's designed for performance with minimal bundle size and full tree-shaking support.

npm install @solar-icons/solid

Key Features

SolidJS Ready: Built with SolidJS reactivity for optimal performance.
Tree-Shakable: Only the icons you import are included in your bundle.
Minimal Size: Each icon component is ~360 bytes.
TypeScript Ready: Full TypeScript support with proper types.
Multiple Import Patterns: Import by style, by category, or individual icons.

Usage

Import icons from a style and use them as SolidJS components:

import { Home } from '@solar-icons/solid/Bold'

function App() {
    return <Home size={32} color="purple" />
}

Component Props

Each icon component accepts the following props, in addition to all standard SVG attributes.

Prop	Type	Default	Description
`color`	`string`	`currentColor`	Sets the icon's color.
`size`	`string \| number`	`1em`	Sets the icon's width and height.
`mirrored`	`boolean`	`false`	Flips the icon horizontally if `true`.
`alt`	`string`	`undefined`	Provides an accessible title for the icon.

Import Patterns

By Style

Import all icons from a specific style:

import { Home, Settings, User } from '@solar-icons/solid/Bold'
import { Home as HomeLinear } from '@solar-icons/solid/Linear'

function App() {
    return (
        <>
            <Home size={24} />
            <HomeLinear size={24} />
        </>
    )
}

Available styles: Bold, Linear, Outline, BoldDuotone, LineDuotone, Broken

By Category

Import icons from a specific category:

import { Bold, Linear } from '@solar-icons/solid/category/arrows'

function App() {
    return (
        <>
            <Bold.ArrowUp size={24} />
            <Linear.ArrowDown size={24} />
        </>
    )
}

Direct Import

For optimal tree-shaking, import individual icons directly:

import Home from '@solar-icons/solid/icons/building/Bold/Home'

function App() {
    return <Home size={24} color="#f59e0b" />
}

Using with CSS

Since the default color is currentColor, icons inherit the text color from their parent:

function App() {
    return (
        <div class="text-blue-500">
            <Home size={24} />
        </div>
    )
}

IconBase Component

You can use the IconBase component to create custom icons:

import { IconBase } from '@solar-icons/solid'

function App() {
    return (
        <IconBase size={24} color="red">
            <path d="M12 2L15.09 8.26..." fill="currentColor" />
        </IconBase>
    )
}

TypeScript

Types are exported from the main package:

import type { IconProps, IconStyle } from '@solar-icons/solid'

On this page