Installation

Install svelte-animated-icon with your package manager of choice. The library has one peer dependency: Svelte 5.

npm install svelte-animated-icon

pnpm add svelte-animated-icon

yarn add svelte-animated-icon

Requirements

• Svelte ^5.0.0 - the library uses $props(), $state, $derived, and $effect. It will not work on Svelte 3 or 4.
• A modern browser - animations run on the Web Animations API, which is supported in every evergreen browser.

There are no other runtime dependencies.

Importing

The package exposes six subpaths:

// Core engine + types
import { AnimatedIcon, TEMPLATES, getTemplate } from 'svelte-animated-icon';

// Per-icon components — pick the library you need
import { Gear, Heart, ArrowRight } from 'svelte-animated-icon/phosphor';
import { Home } from 'svelte-animated-icon/remix';

Why subpaths? Each library is independent — importing from /phosphor never pulls in Remix, Flowbite, or any other set. Tree-shaking then eliminates the individual Phosphor icons you didn’t import. See Tree Shaking for the full mechanism.

Verifying the install

Drop this into any .svelte file and hover the icon:

<script>
  import { Gear } from 'svelte-animated-icon/phosphor';
</script>

<Gear template="spin" />

If the gear spins on hover, you’re set. If not, head to Troubleshooting.

Next

• Quick Start - your first animated icon in under a minute.
• Usage - the two ways to consume the library.