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

Installation

There are three ways to install icons into your project:

Install via npm

npm i @jis3r/icons

Add via shadcn-svelte registry

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]

Copy from website

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

Usage

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.

Props

Advanced Usage

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>

Contributing

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

Terms of Use

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.

Notes

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!

Credits

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! :)