morphicons-svelte

Svelte 5 + SvelteKit adapter

Any icon morphs into any other.

Spring-driven path morphing for the icon data you already use. Pick a pair, change the stroke, switch the spring, and watch the geometry find its way there.

A port of Morphicons project into Sveltekit.

interactive playground

Try the whole set.

The studio uses Svelte state for the controls and morphicons’ shared path driver for each transition. Every icon below is data on a 24×24 stroke grid, not a framework-specific component.

selected icon x lucide
pick icons to morph between them
t=1.00

Click an icon to add it to your set. Every demo family is normalized to the same 24×24 stroke grid.

spring
stroke

The component stays small.

Keep state in your Svelte component, pass the current icon data, and let the adapter own the path after mount. Svelte transitions can handle surrounding UI; the morphicons spring handles the shape itself.

$ pnpm add morphicons-svelte

The adapter stays small.

Keep state in your component and hand MorphIcon the current icon data. The adapter owns the path after mount, so the same pair can be interrupted and retargeted.

svelte 
<!-- Svelte 5 -->
<script lang="ts">
  import { MorphIcon } from "morphicons-svelte";
  import { Menu, X } from "lucide"; // icon data, not components

  let open = $state(false);
</script>

<button onclick={() => (open = !open)} aria-expanded={open}>
  <MorphIcon
    icon={open ? X : Menu}
    spring="snappy"
    label={open ? "Close" : "Menu"}
  />
</button>

The spring prop is optional. Set it to "smooth", "snappy", or "bouncy" to choose the feel of each morph.

spring presets

Choose the feel.

Pass one named preset directly to MorphIcon.

smooth

Calm and critically damped. No overshoot.

<MorphIcon icon={open ? X : Menu} spring="smooth" />

snappy

Fast with a subtle overshoot. Great for controls.

<MorphIcon icon={open ? X : Menu} spring="snappy" />

bouncy

Playful and expressive, with a visible overshoot.

<MorphIcon icon={open ? X : Menu} spring="bouncy" />

stroke data in, morphs out

Use the icon set you already have.

Any stroke-based icon family can participate when its paths are normalized to a shared grid. The demo shows three families; the adapter does not require a library-specific wrapper.

  • Lucide
  • Tabler
  • Heroicons outline
  • Iconoir
  • Akar
  • Untitled UI
  • Hugeicons
  • shadcn registry

Works with any stroke icon set — on any grid, via fitIcon. Fill-only artwork is outside this guarantee.