Does it work with SvelteKit?

Yes. Icons server-render and hydrate with SvelteKit with no setup.

Which Svelte version do I need?

Svelte 5.20 or later. The package uses runes.

Why is there one Icon component?

You pass the icon data to a single Icon component, which keeps the package small and tree-shakeable: only the icon data you import is bundled.

How do I colour the icons?

Icons use currentColor, so they follow the text colour. Use a class or the color prop.

Free Svelte icons

152 icons for Svelte 5 and SvelteKit in outline, solid, duotone and two-tone, rounded or sharp. Tree-shakeable and MIT licensed.

Install

npm i @uv-foundry/icons-svelte

Also works with pnpm, yarn and bun.

Use

<script>
  import { Icon, HomeIcon, BellOffIcon } from '@uv-foundry/icons-svelte';
</script>

<Icon icon={HomeIcon} />
<Icon icon={HomeIcon} variant="solid" corner="sharp" size={16} />
<Icon icon={BellOffIcon} variant="duotone" class="text-red-600" />
<Icon icon={HomeIcon} title="Home" />

SvelteKit

Server-renders with SvelteKit out of the box. Requires Svelte 5.20 or later.

Options

Prop	Values	Default
`variant`	stroke, solid, duotone, twotone	stroke
`corner`	rounded, sharp	rounded
`size`	pixels	24
`strokeWidth`	1 to 2	adapts to size: 2.25 at 16px, 1.8 at 20px, 1.5 at 24px
`color`	any CSS colour	currentColor
`title`	accessible label	none (hidden from screen readers)

All 152 icons

Click an icon for its component name, SVG code and every style. Using an AI coding tool? Connect the MCP server and it finds the right icon names for you.

Questions

Does it work with SvelteKit?: Yes. Icons server-render and hydrate with SvelteKit with no setup.
Which Svelte version do I need?: Svelte 5.20 or later. The package uses runes.
Why is there one Icon component?: You pass the icon data to a single Icon component, which keeps the package small and tree-shakeable: only the icon data you import is bundled.
How do I colour the icons?: Icons use currentColor, so they follow the text colour. Use a class or the color prop.