Start
Svelte
Use Kineticons in Svelte 5 and SvelteKit with the Icon component.
Install
shell
npm install @kineticons/svelteRequires Svelte 5.
Usage
svelte
<script lang="ts">
import { Icon } from "@kineticons/svelte";
import { bell, trash } from "@kineticons/svelte/icons";
let recording = $state(false);
</script>
<button class="ki-trigger">
<Icon icon={bell} variant="duotone" size={20} /> Notifications
</button>
<Icon icon={trash} trigger="manual" active={recording} />Props
icon (required), then the same props as the other packages. class and any SVG attribute go on the <svg>.
| Prop | Type | Default | What it does |
|---|---|---|---|
| icon | IconDef | The icon to draw, from @kineticons/svelte/icons. | |
| variant | "outline" | "duotone" | "filled" | "outline" | The style. |
| size | number | string | 24 | Width and height, in pixels (or any CSS length as a string). |
| strokeWidth | number | 1.75 | Stroke in 24-grid units; the same visual weight at any size. |
| trigger | "hover" | "manual" | "loop" | "none" | "hover" | When the icon moves. |
| active | boolean | false | With trigger "manual": plays while true. |
| loopEvery | number | 1800 | With trigger "loop": one beat, in milliseconds. |
| title | string | An accessible name: the icon is then announced as an image. |
Something unclear or missing? Open an issue.