{"id":46698627,"url":"https://github.com/gorkem-bwl/animated-icons","last_synced_at":"2026-03-15T12:02:11.327Z","repository":{"id":343086563,"uuid":"1176233117","full_name":"gorkem-bwl/animated-icons","owner":"gorkem-bwl","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-08T23:41:16.000Z","size":2404,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-08T23:46:35.152Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://animated-icons.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gorkem-bwl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-08T19:47:27.000Z","updated_at":"2026-03-08T23:41:20.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gorkem-bwl/animated-icons","commit_stats":null,"previous_names":["gorkem-bwl/animated-icons"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/gorkem-bwl/animated-icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorkem-bwl%2Fanimated-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorkem-bwl%2Fanimated-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorkem-bwl%2Fanimated-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorkem-bwl%2Fanimated-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gorkem-bwl","download_url":"https://codeload.github.com/gorkem-bwl/animated-icons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorkem-bwl%2Fanimated-icons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30284629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-09T06:02:32.596Z","updated_at":"2026-03-09T06:02:34.964Z","avatar_url":"https://github.com/gorkem-bwl.png","language":"JavaScript","funding_links":[],"categories":["Trending Repos — 19 March 2026"],"sub_categories":[],"readme":"# Animated Icons\n\n![Animated Icons - Lucide, Iconoir, and Heroicons with CSS-only hover animations](assets/hero.gif)\n\nBeautifully animated, two-tone icon libraries with CSS-only hover animations. Currently supports [Lucide](https://lucide.dev) (1,933 icons), [Heroicons](https://heroicons.com) (324 icons), and [Iconoir](https://iconoir.com) (1,383 icons). Zero JavaScript animation dependencies.\n\n**[Live preview](https://animated-icons.vercel.app)**\n\n## Features\n\n- CSS transition-based animations triggered on hover (no Framer Motion, no JS)\n- Two-tone color support via CSS custom properties\n- 3,640 animated icons across three icon sets\n- Multiple output formats: React, Vue, Svelte, Web Components, standalone SVGs\n- Accessible: `role=\"img\"`, `aria-label`, and `\u003ctitle\u003e` on every icon\n- Semantic animations per category (bells ring, hearts beat, gears rotate, shields fill)\n- Fully visible default state: animations only add effects on hover\n- Shared animation engine: adding new icon sets requires only config + category mapping\n\n## Supported icon sets\n\n| Icon set | Icons | Wrapper class |\n| -------- | ----- | ------------- |\n| Lucide | 1,933 | `al-icon-wrapper` |\n| Iconoir | 1,383 | `ai-icon-wrapper` |\n| Heroicons | 324 | `ah-icon-wrapper` |\n\n### npm packages\n\nAll packages are published under the `@animated-color-icons` scope:\n\n| Icon set | React | Vue | Svelte | Web Components |\n| -------- | ----- | --- | ------ | -------------- |\n| Lucide | `@animated-color-icons/lucide-react` | `@animated-color-icons/lucide-vue` | `@animated-color-icons/lucide-svelte` | `@animated-color-icons/lucide-wc` |\n| Heroicons | `@animated-color-icons/heroicons-react` | `@animated-color-icons/heroicons-vue` | `@animated-color-icons/heroicons-svelte` | `@animated-color-icons/heroicons-wc` |\n| Iconoir | `@animated-color-icons/iconoir-react` | `@animated-color-icons/iconoir-vue` | `@animated-color-icons/iconoir-svelte` | `@animated-color-icons/iconoir-wc` |\n\n### Output formats\n\nEach icon set is also available in standalone SVG format with embedded CSS in `dist/svg/`.\n\n## Quick start\n\n### Installation\n\n```bash\n# React\nnpm install @animated-color-icons/lucide-react\n\n# Vue\nnpm install @animated-color-icons/lucide-vue\n\n# Svelte\nnpm install @animated-color-icons/lucide-svelte\n\n# Web Components\nnpm install @animated-color-icons/lucide-wc\n```\n\nReplace `lucide` with `heroicons` or `iconoir` for other icon sets.\n\n### React\n\n```jsx\nimport { Heart, Bell, Settings } from '@animated-color-icons/lucide-react';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"al-icon-wrapper\"\u003e\n      \u003cHeart size={24} primaryColor=\"#0d9488\" secondaryColor=\"#0f766e\" /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nWrap the icon (or its parent) with the wrapper class to trigger animations on hover.\n\n### Vue\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"al-icon-wrapper\"\u003e\n    \u003cHeart :size=\"24\" primary-color=\"#0d9488\" secondary-color=\"#0f766e\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { Heart, Bell, Settings } from '@animated-color-icons/lucide-vue';\n\u003c/script\u003e\n```\n\nVue components use `\u003cstyle scoped\u003e` so animation CSS is automatically included per-component.\n\n### Svelte\n\n```svelte\n\u003cscript\u003e\n  import Heart from '@animated-color-icons/lucide-svelte/Heart.svelte';\n\u003c/script\u003e\n\n\u003cdiv class=\"al-icon-wrapper\"\u003e\n  \u003cHeart size={24} primaryColor=\"#0d9488\" secondaryColor=\"#0f766e\" /\u003e\n\u003c/div\u003e\n```\n\n### Web Components\n\n```html\n\u003cscript type=\"module\"\u003e\n  import '@animated-color-icons/lucide-wc/Heart.js';\n\u003c/script\u003e\n\n\u003cdiv class=\"al-icon-wrapper\"\u003e\n  \u003canimated-lucide-heart\n    size=\"24\"\n    primary-color=\"#0d9488\"\n    secondary-color=\"#0f766e\"\u003e\n  \u003c/animated-lucide-heart\u003e\n\u003c/div\u003e\n```\n\nWeb Components use Shadow DOM — each icon encapsulates its own styles. No external CSS needed, works in any framework or vanilla HTML.\n\n### CDN (zero install)\n\nUse icons directly from a CDN — no npm install, no build step:\n\n```html\n\u003c!-- Load the icons you need --\u003e\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@animated-color-icons/lucide-wc/Heart.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@animated-color-icons/lucide-wc/Bell.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Use them anywhere --\u003e\n\u003canimated-lucide-heart\u003e\u003c/animated-lucide-heart\u003e\n\u003canimated-lucide-bell size=\"32\" primary-color=\"#3b82f6\" secondary-color=\"#2563eb\"\u003e\u003c/animated-lucide-bell\u003e\n```\n\nReplace `lucide-wc` with `heroicons-wc` or `iconoir-wc` for other icon sets. All packages are available on [jsDelivr](https://www.jsdelivr.com/package/npm/@animated-color-icons/lucide-wc) and [unpkg](https://unpkg.com/@animated-color-icons/lucide-wc/).\n\n### SVG\n\nCopy SVGs from `dist/svg/` (Lucide), `dist/heroicons/svg/` (Heroicons), or `dist/iconoir/svg/` (Iconoir) and use them directly:\n\n```html\n\u003cdiv class=\"al-icon-wrapper\"\u003e\n  \u003c!-- paste contents of dist/svg/heart.svg --\u003e\n\u003c/div\u003e\n```\n\nEach SVG includes its own `\u003cstyle\u003e` block with all animation CSS, so no external stylesheet is needed.\n\n## Customizing colors\n\nColors are controlled via CSS custom properties:\n\n```css\n/* Lucide */\n.my-icons {\n  --animated-lucide-primary: #0d9488;\n  --animated-lucide-secondary: #0f766e;\n}\n\n/* Heroicons */\n.my-icons {\n  --animated-heroicon-primary: #3b82f6;\n  --animated-heroicon-secondary: #2563eb;\n}\n\n/* Iconoir */\n.my-icons {\n  --animated-iconoir-primary: #f59e0b;\n  --animated-iconoir-secondary: #d97706;\n}\n```\n\nOr pass them directly to React components:\n\n```jsx\n\u003cHeart primaryColor=\"#3b82f6\" secondaryColor=\"#2563eb\" /\u003e\n```\n\n### Color presets\n\n| Name   | Primary   | Secondary |\n| ------ | --------- | --------- |\n| Teal   | `#0d9488` | `#0f766e` |\n| Blue   | `#3b82f6` | `#2563eb` |\n| Red    | `#ef4444` | `#dc2626` |\n| Amber  | `#f59e0b` | `#d97706` |\n| Violet | `#8b5cf6` | `#7c3aed` |\n| Pink   | `#ec4899` | `#db2777` |\n\n## Hover trigger\n\nAnimations trigger on two selectors per icon set:\n\n**Lucide:**\n1. `.animated-lucide-icon:hover`\n2. `.al-icon-wrapper:hover`\n\n**Heroicons:**\n1. `.animated-heroicon:hover`\n2. `.ah-icon-wrapper:hover`\n\n**Iconoir:**\n1. `.animated-iconoir:hover`\n2. `.ai-icon-wrapper:hover`\n\nWrap icons in buttons, cards, or nav items and the animation triggers when hovering the container:\n\n```html\n\u003cbutton class=\"al-icon-wrapper\"\u003e\n  \u003c!-- icon animates when button is hovered --\u003e\n\u003c/button\u003e\n```\n\n## Animation types\n\n| Animation    | Effect                                | Used by                              |\n| ------------ | ------------------------------------- | ------------------------------------ |\n| `fill`       | Shape fills with translucent color    | Shield, folder, file, user head      |\n| `fade`       | Pop-in with subtle scale              | Details, secondary elements          |\n| `scale-pop`  | Bounce scale                          | Check, x, plus, eye pupil            |\n| `spin`       | Full 360 rotation                     | Redo, refresh, loader                |\n| `gear`       | Partial rotation                      | Settings, cog, sun, moon             |\n| `nudge`      | Translate in a direction              | Arrows, chevrons, truck              |\n| `shake`      | Horizontal wobble                     | Send, cart, bars, menu, flag         |\n| `bell-ring`  | Pendulum swing from top               | Bell                                 |\n| `heart-beat` | Double-pulse scale                    | Heart                                |\n| `mail-flap`  | Envelope opens and closes             | Mail, envelope                       |\n| `rocket-lift`| Diagonal translate up-right           | Rocket, navigation                   |\n| `bar`        | Grow from bottom with bounce          | Bar chart, chart-bar                 |\n| `handle-lift`| Lift upward                           | Trash lid                            |\n| `page-turn`  | Rotate on Y axis                      | Book pages                           |\n| `menu-line`  | Staggered scaleX                      | Hamburger menu (multi-element)       |\n| `pulse`      | Opacity pulse                         | Alert indicators, signal, wifi       |\n| `dot-appear` | Pop scale on small elements           | Map pin dot                          |\n\n## Component props\n\nAll frameworks share the same prop API:\n\n| Prop             | Type     | Default          | Description                     |\n| ---------------- | -------- | ---------------- | ------------------------------- |\n| `size`           | `number` | `24`             | Width and height in pixels      |\n| `color`          | `string` | `'currentColor'` | Stroke color                    |\n| `primaryColor`   | `string` | -                | Primary tone color              |\n| `secondaryColor` | `string` | -                | Secondary tone color            |\n| `strokeWidth`    | `number` | `2` / `1.5`      | SVG stroke width (set-specific) |\n| `className`      | `string` | `''`             | Additional CSS classes           |\n| `label`          | `string` | icon name        | Accessible label                |\n\nReact components forward refs and spread additional props onto the SVG element. Web Components use kebab-case attributes (`primary-color`, `secondary-color`, `stroke-width`).\n\n## Available icons\n\nBrowse all 3,640 icons at [animated-icons.vercel.app](https://animated-icons.vercel.app).\n\n## Building from source\n\n```bash\n# Install dependencies\nnpm install\n\n# Build Lucide icons\nnode scripts/build.mjs\n\n# Build Heroicons\nnode scripts/build-heroicons.mjs\n\n# Build Iconoir\nnode scripts/build-iconoir.mjs\n\n# Prepare gallery data (chunks + config)\nnode scripts/prepare-gallery.mjs\n\n# Run the gallery locally\nnpm run dev\n```\n\n## Project structure\n\n```\nanimated-icons/\n  scripts/\n    animation-engine.mjs     # Shared animation engine (strategies, CSS, SVG/React generation)\n    icon-set-configs.mjs     # Central config for all icon sets\n    build.mjs                # Lucide build (thin wrapper)\n    build-heroicons.mjs      # Heroicons build (thin wrapper)\n    build-iconoir.mjs        # Iconoir build (thin wrapper)\n    prepare-gallery.mjs      # Gallery data preparation (chunks + TS config generation)\n  icons/\n    heroicons/\n      categories.json        # Heroicons category mapping\n    iconoir/\n      categories.json        # Iconoir category mapping\n  src/\n    data/\n      categories.json        # Lucide category mapping\n      icon-set-config.ts     # Auto-generated gallery config (from prepare-gallery)\n    components/              # Next.js gallery components\n  dist/\n    svg/                     # Animated Lucide SVGs\n    react/                   # Lucide React components (.jsx)\n    vue/                     # Lucide Vue components (.vue)\n    svelte/                  # Lucide Svelte components (.svelte)\n    web-components/          # Lucide Web Components (.js)\n    css/                     # Shared Lucide CSS\n    heroicons/               # Same structure for Heroicons\n    iconoir/                 # Same structure for Iconoir\n```\n\n## Adding a new icon set\n\n1. Add an entry to `scripts/icon-set-configs.mjs` with paths, prefixes, and CSS variable names\n2. Create a categories JSON file mapping icons to animation categories\n3. Create a thin build script (2 lines: import engine + config, call `buildIconSet`)\n4. Add a `build:\u003cname\u003e` script to `package.json`\n5. Import the generated metadata in `src/app/page.tsx`\n6. Run `prepare-gallery.mjs` to regenerate gallery config\n\nNo changes to gallery components are needed.\n\n## How it works\n\nThe shared animation engine reads source SVG icons and:\n\n1. Parses individual SVG elements (paths, circles, rects, lines)\n2. Classifies each element by its role (container, detail, dot)\n3. Assigns animation classes based on the icon's category\n4. Handles single-path icons with category-appropriate whole-icon animations\n5. Applies staggered delays (80ms increments) for sequential reveals\n6. Outputs SVGs with embedded `\u003cstyle\u003e` blocks, plus React, Vue, Svelte, and Web Components\n\nAnimations use CSS transitions and keyframes, triggered by `:hover` on the icon or a parent wrapper class. No JavaScript animation library required.\n\n## Contributing icons\n\nWe welcome contributions! There are two ways to add more animated icons:\n\n### Add icons to an existing set\n\nIf new icons are added to Lucide, Heroicons, or Iconoir, update the corresponding categories JSON file with the new icon-to-category mappings:\n\n- **Lucide:** `src/data/categories.json`\n- **Heroicons:** `icons/heroicons/categories.json`\n- **Iconoir:** `icons/iconoir/categories.json`\n\nEach entry maps an icon name to a category (e.g., `\"heart\": \"status\"`, `\"arrow-right\": \"arrows\"`). The category determines which animation the icon receives. See the [Animation types](#animation-types) table for available categories and their effects.\n\nThen rebuild:\n\n```bash\nnode scripts/build.mjs           # Lucide\nnode scripts/build-heroicons.mjs  # Heroicons\nnode scripts/build-iconoir.mjs    # Iconoir\nnode scripts/prepare-gallery.mjs  # Regenerate gallery data\n```\n\n### Add an entirely new icon set\n\nThe animation engine is designed to be icon-set-agnostic. Adding a new set requires no changes to gallery components or animation logic — just config and category mapping:\n\n1. Add an entry to `scripts/icon-set-configs.mjs` with paths, prefixes, and CSS variable names\n2. Create a `categories.json` file mapping each icon name to an animation category\n3. Create a thin build script (2 lines: import engine + config, call `buildIconSet`)\n4. Add a `build:\u003cname\u003e` script to `package.json`\n5. Import the generated metadata in `src/app/page.tsx`\n6. Run `prepare-gallery.mjs` to regenerate gallery config\n\nThe best icon sets for animation are those with multi-element SVGs (multiple paths, circles, rects) rather than single-path icons. Lucide (94% multi-element) and Iconoir (90%) animate particularly well.\n\n## License\n\nISC\n\nIcons based on [Lucide](https://lucide.dev) (ISC License), [Heroicons](https://heroicons.com) (MIT License), and [Iconoir](https://iconoir.com) (MIT License).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorkem-bwl%2Fanimated-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgorkem-bwl%2Fanimated-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorkem-bwl%2Fanimated-icons/lists"}