Documentation

Simple. Fast. Beautiful animated icons for Svelte 5.

551 Icons Svelte 5 TypeScript

1. Install

npm install svelte-animate-icons

2. Basic Usage

<script>
  import { ActivityIcon } from '$lib';
</script>

<!-- Default hover animation -->
<ActivityIcon size={24} />

Try it - Hover the icon

3. Custom Control

<script>
  import { ActivityIcon } from '$lib';
  let iconRef;
</script>

<!-- Custom trigger control -->
<ActivityIcon bind:this={iconRef} triggers={{ custom: true }} />
<button onclick={() => iconRef?.start()}>Start Animation</button>

Try it - Click the button

4. State-Based Animation

<script>
  let appState = 'idle'; // 'idle' | 'loading' | 'success'
</script>

<!-- Animation follows state -->
<ActivityIcon animationState={appState} />
<button onclick={() => appState = 'loading'}>Start Loading</button>

Try it - Simulate loading

idle

5. Parent Element Integration

<script>
  let cardIcon;
</script>

<!-- Button controls icon animation -->
<button 
  onmouseenter={() => cardIcon?.start()}
  onmouseleave={() => cardIcon?.stop()}
>
  <ActivityIcon bind:this={cardIcon} triggers={{ custom: true }} />
  Loading Data...
</button>

Try it - Hover the button

6. Props Reference

size=24 Icon size in pixels

triggers=[object Object] Animation triggers: hover, click, focus, custom

animationState="idle" State-based animation: idle, loading, success, error

class="text-blue-500" CSS classes for styling

duration=2000 Animation duration in milliseconds

loop=true Loop animation infinitely

Methods (when using bind:this)

iconRef.start() Start animation

iconRef.stop() Stop animation

iconRef.toggle() Toggle animation state

Lightning Fast

Web Animations API for 60fps performance

Svelte 5 Ready

Built with modern runes and reactivity

Tiny Bundle

Tree-shakeable, import only what you need

Easy Styling

CSS-friendly, no complex configurations

Browse 551 Icons

View All Icons GitHub