moving icons - the standard for animated icons in Svelte. 🧡

A collection of 500+ hand-crafted, interaction-ready Lucide icons. Built natively for Svelte 5 with zero dependencies. Fully tree-shakeable, MIT licensed, and completely customizable.

Demo → https://movingicons.dev

There are three ways to install icons into your project:

npm i @jis3r/icons

You can add icons to your project using the shadcn registry. Ensure shadcn-svelte is installed. To add an icon, simply copy the command from the website and run it in your terminal. Icons will be added to your project in the src/lib/components/movingicons directory.

npx shadcn-svelte@latest add https://movingicons.dev/r/[icon-name]

You can download or copy icon components directly from the icons page and paste them into your Svelte project.

Import icons as named Svelte components:

<script>
	import { Activity, Star } from '@jis3r/icons';
</script>

<Activity size={32} color="orange" strokeWidth={2.5} />
<Star size={32} color="blue" />

• All icons are available as named exports in PascalCase and are identical to the respective Lucide icon names.
• Compatible with SvelteKit and Svelte projects.

If you don't want to pull in the barrel file, import an icon directly from its subpath:

<script>
	import Bell from '@jis3r/icons/icons/bell'; // single-icon import, no barrel
</script>

<Bell size={16} />

Every icon self-animates when a pointer hovers over it, with no setup required: a one-shot animation plays automatically (duration varies per icon, roughly 200-1500ms), and a few icons instead animate continuously for as long as they're hovered ("hover-hold"). The animate prop is a separate, external trigger: setting it to true plays the animation regardless of hover, and it is OR-ed with the internal hover state, so a parent can trigger the same animation programmatically (see Advanced Usage below). There is currently no prop to disable the built-in hover trigger.

Control icon animations from parent elements by binding the animate prop to your own hover state:

<script>
	import { Bell } from '@jis3r/icons';

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

<button
	onmouseenter={() => (animate = true)}
	onmouseleave={() => (animate = false)}
	class="flex items-center gap-2"
>
	<Bell size={16} {animate} />
	<span>Notifications</span>
</button>

When building navigation or sidebar components, it might come in handy to create a reusable wrapper component. With snippets, you can pass the hover state to the children, allowing icons to animate on hover:

<!-- HoverableItem.svelte -->
<script>
	let { children, class: className = '' } = $props();
	let isHovered = $state(false);
</script>

<div
	class={className}
	onmouseenter={() => (isHovered = true)}
	onmouseleave={() => (isHovered = false)}
>
	{@render children(isHovered)}
</div>

Use the wrapper component in your navigation:

<script>
	import HoverableItem from './HoverableItem.svelte';
	import { Home, Settings } from '@jis3r/icons';
</script>

<nav class="flex flex-col gap-2">
	<HoverableItem class="flex items-center gap-2 rounded p-2">
		{#snippet children(isHovered)}
			<Home size={16} animate={isHovered} />
			<span>Home</span>
		{/snippet}
	</HoverableItem>
	<HoverableItem class="flex items-center gap-2 rounded p-2">
		{#snippet children(isHovered)}
			<Settings size={16} animate={isHovered} />
			<span>Settings</span>
		{/snippet}
	</HoverableItem>
</nav>

• Every icon renders a <div role="img" aria-label="<lucide-name>"> wrapper around its SVG, where <lucide-name> is the icon's Lucide name (for example, aria-label="bell").
• If you're using an icon decoratively - for example, next to a text label that already conveys the meaning - wrap it with aria-hidden="true" yourself; the icon's own aria-label is always present and can't be removed via props.
• Known limitation: animations do not currently respect prefers-reduced-motion. If your users need reduced motion, gate the hover interaction or rendering yourself, for example by checking window.matchMedia('(prefers-reduced-motion: reduce)') before enabling animate-related interactions.

We welcome contributions to jis3r/icons! Please read the contribution guidelines carefully before submitting improvements and new icons:

Feel free to use these components in personal and commercial projects. However, while the tutorials and demos are available for your use as-is, they cannot be redistributed or resold. Let's keep things fair and respect each other's work.

If you have any questions or just want to say hi, feel free to reach out to me 👉 @jis3r.

This project is a work in progress, and i'm continuously working to improve and expand this collection. I'd love to hear your feedback or see your contributions as the project evolves!

Thank you to the awesome Dmytro 💜 for the idea and inspiration to animated lucide-icons! I loved his project so much that I wanted to make it available for the Svelte ecosystem, so here we go! :)