Svelte

Use @solar-icons/svelte in Svelte 5 projects. Built with runes for optimal performance and minimal bundle size.

npm install @solar-icons/svelte

Features

Svelte 5 ready: Built with runes.
Tree-shakeable: Bundles only the icons you import.
TypeScript ready: Full type definitions included.

Usage

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

<script>
    import { House } from '@solar-icons/svelte/Bold'
</script>

<House size={32} color="purple" />

Props

Icon components accept standard SVG attributes alongside these props:

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

Import Patterns

Import by Style

Import all icons in a style:

<script>
    import { House, Settings, User } from '@solar-icons/svelte/Bold'
    import { House as HouseLinear } from '@solar-icons/svelte/Linear'
</script>

<House size={24} />
<HouseLinear size={24} />

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

Import by Category

Import icons in a category:

<script>
    import { Bold, Linear } from '@solar-icons/svelte/category/arrows'
</script>

<Bold.ArrowUp size={24} />
<Linear.ArrowDown size={24} />

Direct Component Import

Import individual components directly:

<script>
    import House from '@solar-icons/svelte/category/buildings/Bold/House.svelte'
</script>

<House size={24} color="#f59e0b" />

IconBase Component

Use IconBase to build custom icons:

<script>
    import { IconBase } from '@solar-icons/svelte'
</script>

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

On this page