Svelte Animate Icons

Powerful animated SVG icons for Svelte 5 with flexible animation control.

Features

550+ animated icons - Beautiful SVG icons with multiple animation triggers
Lightning fast - Built with Web Animations API for 60fps performance
Svelte 5 ready - Modern runes system and reactivity
Flexible control - Hover, click, focus, state-based, and programmatic animations
Tiny bundle - Tree-shakeable, import only what you need
TypeScript - Full type safety included
Production ready - Used in real-world applications

Quick Start

Installation

npm install svelte-animate-icons

Basic Usage

<script>
  import { ActivityIcon } from 'svelte-animate-icons';
</script>

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

Programmatic Control

<script>
  import { ActivityIcon } from 'svelte-animate-icons';
  let iconRef;
</script>

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

State-Based Animation

<script>
  import { ActivityIcon } from 'svelte-animate-icons';
  let loadingState = 'idle'; // 'idle' | 'loading' | 'success' | 'error'
</script>

<ActivityIcon animationState={loadingState} />
<button onclick={() => loadingState = 'loading'}>Start Loading</button>

API Reference

Props

Prop	Type	Default	Description
`size`	`number`	`28`	Icon size in pixels
`class`	`string`	`""`	CSS classes for styling
`triggers`	`object`	`{ hover: true }`	Animation triggers
`animationState`	`string`	`'idle'`	State-based animation
`duration`	`number`	`2000`	Animation duration (ms)
`loop`	`boolean`	`false`	Loop animation infinitely

Animation Triggers

triggers: {
  hover?: boolean;    // Hover to animate (default: true)
  click?: boolean;    // Click to toggle animation
  focus?: boolean;    // Focus to animate (keyboard navigation)
  custom?: boolean;   // Programmatic control only
}

Animation States

'idle' - Default state, no animation
'loading' - Continuous animation (perfect for loading indicators)
'success' - Brief animation then stop
'error' - Brief animation then stop
'active' - Continuous animation

Methods (when using bind:this)

Method	Description
`start()`	Start animation
`stop()`	Stop animation
`toggle()`	Toggle animation state

Real-World Examples

Loading Button

<script>
  import { ActivityIcon } from 'svelte-animate-icons';
  let isLoading = false;
  
  async function handleSubmit() {
    isLoading = true;
    try {
      await api.submit();
    } finally {
      isLoading = false;
    }
  }
</script>

<button onclick={handleSubmit} disabled={isLoading}>
  <ActivityIcon animationState={isLoading ? 'loading' : 'idle'} size={16} />
  {isLoading ? 'Submitting...' : 'Submit'}
</button>

Interactive Card

<script>
  import { ActivityIcon } from 'svelte-animate-icons';
  let cardIcon;
</script>

<div 
  class="card"
  onmouseenter={() => cardIcon?.start()}
  onmouseleave={() => cardIcon?.stop()}
>
  <ActivityIcon bind:this={cardIcon} triggers={{ custom: true }} size={24} />
  <h3>Hover to animate</h3>
</div>

Form Validation

<script>
  import { ActivityIcon } from 'svelte-animate-icons';
  let inputValue = '';
  
  $: validationState = inputValue.length >= 3 ? 'success' : 'error';
</script>

<div class="input-group">
  <input bind:value={inputValue} placeholder="Min 3 characters" />
  <ActivityIcon animationState={validationState} size={20} />
</div>

Animation System

Multiple triggers: Hover, click, focus, or programmatic control
State-driven: Perfect for loading states and user feedback
60fps performance: Web Animations API for smooth animations
Accessible: Respects prefers-reduced-motion
Flexible: Use cases from simple hovers to complex state management

Available Icons

Browse all 550+ icons at: Icon Gallery

Popular Icons

<!-- UI & Navigation -->
<ActivityIcon />  <!-- Perfect for loading states -->
<CheckIcon />
<XIcon />
<MenuIcon />
<SearchIcon />

<!-- Communication -->
<HeartIcon />
<BellIcon />
<MailsIcon />
<MessageCircleIcon />

<!-- Actions -->
<DownloadIcon />
<UploadIcon />
<CopyIcon />
<TrashIcon />

<!-- Currency -->
<DollarSignIcon />
<EuroIcon />
<BitcoinIcon />

<!-- Social -->
<GithubIcon />
<TwitterIcon />
<LinkedinIcon />
<FacebookIcon />

Framework Integration

SvelteKit

<!-- +page.svelte -->
<script>
  import { ActivityIcon } from 'svelte-animate-icons';
  let pageState = 'loading';
</script>

<div class="page-header">
  <h1>Dashboard</h1>
  <ActivityIcon animationState={pageState} size={32} />
</div>

With Tailwind CSS

<script>
  import { ActivityIcon } from 'svelte-animate-icons';
</script>

<ActivityIcon 
  class="text-blue-500 hover:text-blue-600" 
  triggers={{ hover: true, click: true }}
  size={24} 
/>

Bundle Size

Individual icon: ~2KB gzipped
Core runtime: ~5KB gzipped
Animation system: ~3KB gzipped
Tree-shakeable: Only import what you use

Performance

60fps smooth animations
Web Animations API for optimal performance
Smart state management: Efficient reactivity with Svelte 5 runes
Memory efficient: Animations clean up automatically
Production tested: Used in high-traffic applications

Browser Support

Modern browsers that support:

Svelte 5
Web Animations API
ES2020+

License

Contributing

Contributions welcome! Please read our contributing guide first.

Links

Built with love for the Svelte community.

Top categories