3,640 animated icons

Animated Icons

Lucide, Heroicons, and Iconoir — semantically animated with CSS-only hover transitions and two-tone color support. Available for React, Vue, Svelte, Solid, and Web Components.

View on GitHubBrowse icons
Lucide
Iconoir
Heroicons

See Lucide in action

Hover over any element to preview the animation

Sidebar

Home
Inbox3
Calendar
Analytics
Settings

Tabs

Tab content area

Buttons

Toolbar

Card actions

Bottom nav

App content
Home
Search
Camera
Alerts
Profile

Quick start

Get animated icons in your project in seconds

React

import { Heart, Bell }
  from '@animated-color-icons/lucide-react';

function App() {
  return (
    <Heart
      size={24}
      primaryColor="#0d9488"
      secondaryColor="#0f766e"
    />
  );
}

Vue

<template>
  <Heart
    :size="24"
    primary-color="#0d9488"
    secondary-color="#0f766e"
  />
</template>

<script setup>
import { Heart } from '@animated-color-icons/lucide-vue';
</script>

Svelte

<script>
  import Heart from
    '@animated-color-icons/lucide-svelte/Heart.svelte';
</script>

<Heart
  size={24}
  primaryColor="#0d9488"
  secondaryColor="#0f766e"
/>

Solid

import { Heart } from
  '@animated-color-icons/lucide-solid';

<Heart
  size={24}
  primaryColor="#0d9488"
  secondaryColor="#0f766e"
/>

Web Components

<script type="module">
  import '@animated-color-icons/lucide-wc/Heart.js';
</script>

<animated-lucide-heart
  size="24"
  primary-color="#0d9488"
  secondary-color="#0f766e">
</animated-lucide-heart>

Standalone SVG

<div class="al-icon-wrapper"
  style="
    --animated-lucide-primary: #0d9488;
    --animated-lucide-secondary: #0f766e;
  ">
  <!-- paste SVG from dist/svg/ -->
</div>