{"id":42099963,"url":"https://github.com/ajitzero/animated-icons","last_synced_at":"2026-02-15T13:02:56.575Z","repository":{"id":332211965,"uuid":"1124616764","full_name":"ajitzero/animated-icons","owner":"ajitzero","description":"Beautifully crafted, animated icons for Angular.","archived":false,"fork":false,"pushed_at":"2026-01-24T07:02:33.000Z","size":1670,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-24T16:38:45.096Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://icons.ajitpanigrahi.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajitzero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-12-29T10:15:41.000Z","updated_at":"2026-01-24T07:02:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ajitzero/animated-icons","commit_stats":null,"previous_names":["ajitzero/animated-icons"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ajitzero/animated-icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajitzero%2Fanimated-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajitzero%2Fanimated-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajitzero%2Fanimated-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajitzero%2Fanimated-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajitzero","download_url":"https://codeload.github.com/ajitzero/animated-icons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajitzero%2Fanimated-icons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28880017,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T10:31:27.438Z","status":"ssl_error","status_checked_at":"2026-01-29T10:31:01.017Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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-01-26T12:24:02.164Z","updated_at":"2026-02-06T13:19:46.024Z","avatar_url":"https://github.com/ajitzero.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Icons"],"readme":"# ng-animated-icons\n\nBeautifully crafted animated icons for Angular.\n\n\u003e an open-source collection of smooth, animated icons for your projects. feel free to use them, share your feedback, and let's make this library awesome together!\n\nHeavily based on [Moving Icons](https://www.movingicons.dev/), inspired by [lucide-animated](https://lucide-animated.com/).\n\n**Demo** → [https://icons.ajitpanigrahi.com](https://icons.ajitpanigrahi.com)\n\n\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"MIT License\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/ng-animated-icons\" title=\"View this project on NPM\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/ng-animated-icons\" alt=\"NPM version\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/ng-animated-icons\" title=\"View this project on NPM\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/ng-animated-icons\" alt=\"NPM downloads\" /\u003e\u003c/a\u003e\n\n## Highlights\n\n- ✅ Standalone Components, for Angular v19 and above.\n- ✅ Zoneless \u0026 signals-first. RxJS is not required.\n- ✅ Custom `InjectionToken` for configuring customizations in one place.\n\n## Installation\n\nInstall this package with the package manager of your choice.\n\n```bash\nnpm i ng-animated-icons\n```\n\n```bash\npnpm i ng-animated-icons\n```\n\n```bash\nbun add ng-animated-icons\n```\n\n```bash\nyarn add ng-animated-icons\n```\n\nOr copy just the required icons from the repository.\n\nUse [the docs](https://icons.ajitpanigrahi.com/) to find the files and copy the source code into your project. The only relative import is for the injection token, so consider either adding this file directory beside your icons or you can delete the relevant lines should you choose to skip this.\n\n## Usage\n\n### Import Path\n\n```ts\nimport { ActivityIcon, StarIcon } from 'ng-animated-icons';\n```\n\n- All component names are in PascalCase and have an `Icon` suffix to the respective Lucide icon names. This suffix is added to avoid conflicts with other components, especially since newer Angular components don't have the `Component` suffix by default.\n- All icon selectors are in lowercase and have an `i-` prefix to the respective Lucide icon names.\n\ne.g., the `thumbs-up` icon in Lucide is available for import as `ThumbsUpIcon`, and can be used in the template as `i-thumbs-up`\n\n### Props\n\n| Prop          | Type    | Default          | Description                     | InjectionToken? |\n| ------------- | ------- | ---------------- | ------------------------------- | --------------- |\n| `color`       | string  | `'currentColor'` | Stroke color (CSS color value)  | Yes             |\n| `size`        | number  | `24`             | Icon size in pixels             | Yes             |\n| `strokeWidth` | number  | `2`              | SVG stroke width                | Yes             |\n| `class`       | string  | —                | Optional additional CSS classes | No              |\n| `animate`     | boolean | `false`          | Controls icon animation state   | No              |\n\n### Variants\n\n1. **Default usage.** This uses the default values mentioned in [Props](#props).\n\n   ```ts\n   import { ActivityIcon } from 'ng-animated-icons';\n   ```\n\n   ```html\n   \u003ci-activity /\u003e\n   ```\n\n1. **Pass one-off options.** Inline options will be applicable to current icon only.\n\n   ```html\n   \u003c!-- HTML-style attributes --\u003e\n   \u003ci-activity class=\"border p-4\" color=\"purple\" size=\"24\" strokeWidth=\"1\" /\u003e\n\n   \u003c!-- Regular input binding for variables --\u003e\n   \u003ci-activity [class]=\"'border p-4'\" [color]=\"'purple'\" [size]=\"24\" [strokeWidth]=\"1\" /\u003e\n   ```\n\n1. **Global options.** The ideal place to configure standard settings across your app.\n\n   ```ts\n   // src/app/app.config.ts\n   import { ApplicationConfig } from '@angular/core';\n   import { provideAnimatedIcons } from 'ng-animated-icons';\n\n   export const appConfig: ApplicationConfig = {\n     providers: [\n       provideAnimatedIcons({ color: 'blue', size: 30, strokeWidth: 1 }),\n     ],\n   };\n\n   // main.ts\n   import { bootstrapApplication } from '@angular/platform-browser';\n   import { appConfig } from './app/app.config';\n   import { App } from './app/app';\n\n   bootstrapApplication(App, appConfig).catch(err =\u003e console.error(err));\n   ```\n\n   ```html\n   \u003c!-- Will be blue, with stroke-width 1 and size 30 --\u003e\n   \u003ci-activity /\u003e\n\n   \u003c!-- Will still be blue, with stroke-width 1 but with size 36 --\u003e\n   \u003ci-activity size=\"36\" /\u003e\n\n   \u003c!-- Will still be blue, with size 30 but with stroke-width 3 --\u003e\n   \u003ci-activity strokeWidth=\"3\" /\u003e\n\n   \u003c!-- Disregards providers since everything is overridden --\u003e\n   \u003ci-activity color=\"#f91377\" size=\"36\" strokeWidth=\"3\" /\u003e\n   ```\n\n## Advanced Usage\n\nControl icon animations from parent elements by binding the `animate` input to your own hover, focus \u0026 touch states:\n\n```ts\nimport { BellIcon } from 'ng-animated-icons';\n\n@Component({ ... })\nclass Example {\n  shouldAnimate = signal(false);\n}\n```\n\n```html\n\u003cbutton\n  (focusin)=\"shouldAnimate.set(true)\"\n  (focusout)=\"shouldAnimate.set(false)\"\n  (mouseenter)=\"shouldAnimate.set(true)\"\n  (mouseleave)=\"shouldAnimate.set(false)\"\n  (touchstart)=\"shouldAnimate.set(true)\"\n  (touchend)=\"shouldAnimate.set(false)\"\n\u003e\n  \u003ci-bell size=\"16\" [animate]=\"shouldAnimate()\" /\u003e\n  \u003cspan\u003eNotifications\u003c/span\u003e\n\u003c/button\u003e\n```\n\nWhen building navigation or sidebar components, it might come in handy to create a reusable wrapper component. With snippets, you can pass the hover/focus/touch state to the children, allowing icons to animate on hover/focus/touch:\n\n```ts\n@Component({\n  selector: 'group-animation-item',\n  template: `\u003cng-content /\u003e`,\n  host: {\n    '(focusin)': 'shouldAnimate.set(true)',\n    '(focusout)': 'shouldAnimate.set(false)',\n    '(mouseenter)': 'shouldAnimate.set(true)',\n    '(mouseleave)': 'shouldAnimate.set(false)',\n    '(touchstart)': 'shouldAnimate.set(true)',\n    '(touchend)': 'shouldAnimate.set(false)',\n  },\n})\nclass GroupAnimationItem {\n  readonly shouldAnimate = signal(false);\n}\n```\n\nUse the wrapper component in your navigation:\n\n```ts\nimport { GroupAnimationItem } from '@/components/group-animation-item';\nimport { Home, Settings } from 'ng-animated-icons';\n```\n\n```html\n\u003cnav class=\"flex flex-col gap-2\"\u003e\n  \u003cgroup-animation-item class=\"flex items-center gap-2 rounded p-2\" #homeItem\u003e\n    \u003ci-home size=\"16\" [animate]=\"homeItem.shouldAnimate()\" /\u003e\n    \u003cspan\u003eHome\u003c/span\u003e\n  \u003c/group-animation-item\u003e\n  \u003cgroup-animation-item class=\"flex items-center gap-2 rounded p-2\" #settingsItem\u003e\n    \u003ci-settings size=\"16\" [animate]=\"settingsItem.shouldAnimate()\" /\u003e\n    \u003cspan\u003eSettings\u003c/span\u003e\n  \u003c/group-animation-item\u003e\n\u003c/nav\u003e\n```\n\n## Missing support for something?\n\nGo through existing issues if your problem is tracked; if not, please [raise a new issue!](https://github.com/ajitzero/animated-icons/issues/new/choose)\n\n## Commands for development\n\nRun demo locally:\n\n```sh\nbunx nx serve docs\n```\n\nFormat affected code only:\n\n```sh\nbunx nx format\n```\n\nFormat everything:\n\n```sh\nbun run format\n```\n\nBuild docs for deployment:\n\n```sh\nbunx nx build docs\n```\n\nBuild package for deployment:\n\n```sh\nbunx nx build ng-animated-icons\n```\n\n## License\n\n[MIT](https://github.com/ajitzero/animated-icons/blob/main/LICENSE).\nBuilt by [Ajit Panigrahi](https://github.com/ajitzero).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajitzero%2Fanimated-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajitzero%2Fanimated-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajitzero%2Fanimated-icons/lists"}