svelte-icons

A Svelte 5 icon package generated from SVG folders.

Add Icons

Put SVG files in src/lib/iconsets/<set-name>/.

src/lib/iconsets/
	phosphor/
		airplay.svg
		warning-diamond.svg
	remix/
		add-line.svg

Then run:

pnpm generate

The generator creates tree-shakable modules under src/lib/<set-name>/ and a set barrel at src/lib/<set-name>.ts.

Use

<script lang="ts">
	import { Icon } from 'svelte-icons';
	import phosphorAirplay from 'svelte-icons/phosphor/airplay';
</script>

<Icon icon={phosphorAirplay} size={24} title="AirPlay" />

Icons use currentColor, so they inherit from the CSS color of the icon itself or any parent.

Use an icon directly:

<script lang="ts">
	import { Icon } from 'svelte-icons';
	import phosphorHouse from 'svelte-icons/phosphor/house';
</script>

<Icon icon={phosphorHouse} />

Use an icon inside a button and change the icon color from the button hover state:

<button class="tool-button" aria-label="Open">
	<Icon icon={phosphorHouse} size={20} />
</button>

<style>
	.tool-button {
		color: #52525b;
	}

	.tool-button:hover {
		color: #0f766e;
	}
</style>

Use different sizes:

<Icon icon={phosphorHouse} size={16} />
<Icon icon={phosphorHouse} size="2rem" />

Apply hover behavior to the icon itself:

<Icon class="hover-icon" icon={phosphorHouse} size={24} />

<style>
	.hover-icon {
		opacity: 0;
		transition: opacity 140ms ease;
	}

	.hover-icon:hover {
		opacity: 1;
	}
</style>

You can also import named icons from a set barrel:

<script lang="ts">
	import { Icon } from 'svelte-icons';
	import { phosphorWarningDiamond } from 'svelte-icons/phosphor';
</script>

<Icon icon={phosphorWarningDiamond} />

The per-icon subpath form imports exactly one icon module:

import phosphorAirplay from 'svelte-icons/phosphor/airplay';

Publish

pnpm check
pnpm prepack
npm publish

When you add another folder inside src/lib/iconsets, rerun pnpm generate, bump the package version, and publish again. The wildcard exports already expose new sets as svelte-icons/<set> and svelte-icons/<set>/<icon>.