https://github.com/ajitzero/animated-icons
Beautifully crafted, animated icons for Angular.
https://github.com/ajitzero/animated-icons
Last synced: 19 days ago
JSON representation
Beautifully crafted, animated icons for Angular.
- Host: GitHub
- URL: https://github.com/ajitzero/animated-icons
- Owner: ajitzero
- License: mit
- Created: 2025-12-29T10:15:41.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-01-24T07:02:33.000Z (about 1 month ago)
- Last Synced: 2026-01-24T16:38:45.096Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://icons.ajitpanigrahi.com/
- Size: 1.59 MB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - animated-icons - Animated icons for Angular based on 🌎 [moving icons](www.movingicons.dev/). (Third Party Components / Icons)
- awesome-angular - animated-icons - Animated icons for Angular based on [moving icons](https://www.movingicons.dev/). (Third Party Components / Icons)
README
# ng-animated-icons
Beautifully crafted animated icons for Angular.
> 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!
Heavily based on [Moving Icons](https://www.movingicons.dev/), inspired by [lucide-animated](https://lucide-animated.com/).
**Demo** → [https://icons.ajitpanigrahi.com](https://icons.ajitpanigrahi.com)
## Highlights
- ✅ Standalone Components, for Angular v19 and above.
- ✅ Zoneless & signals-first. RxJS is not required.
- ✅ Custom `InjectionToken` for configuring customizations in one place.
## Installation
Install this package with the package manager of your choice.
```bash
npm i ng-animated-icons
```
```bash
pnpm i ng-animated-icons
```
```bash
bun add ng-animated-icons
```
```bash
yarn add ng-animated-icons
```
Or copy just the required icons from the repository.
Use [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.
## Usage
### Import Path
```ts
import { ActivityIcon, StarIcon } from 'ng-animated-icons';
```
- 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.
- All icon selectors are in lowercase and have an `i-` prefix to the respective Lucide icon names.
e.g., the `thumbs-up` icon in Lucide is available for import as `ThumbsUpIcon`, and can be used in the template as `i-thumbs-up`
### Props
| Prop | Type | Default | Description | InjectionToken? |
| ------------- | ------- | ---------------- | ------------------------------- | --------------- |
| `color` | string | `'currentColor'` | Stroke color (CSS color value) | Yes |
| `size` | number | `24` | Icon size in pixels | Yes |
| `strokeWidth` | number | `2` | SVG stroke width | Yes |
| `class` | string | — | Optional additional CSS classes | No |
| `animate` | boolean | `false` | Controls icon animation state | No |
### Variants
1. **Default usage.** This uses the default values mentioned in [Props](#props).
```ts
import { ActivityIcon } from 'ng-animated-icons';
```
```html
```
1. **Pass one-off options.** Inline options will be applicable to current icon only.
```html
```
1. **Global options.** The ideal place to configure standard settings across your app.
```ts
// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideAnimatedIcons } from 'ng-animated-icons';
export const appConfig: ApplicationConfig = {
providers: [
provideAnimatedIcons({ color: 'blue', size: 30, strokeWidth: 1 }),
],
};
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
bootstrapApplication(App, appConfig).catch(err => console.error(err));
```
```html
```
## Advanced Usage
Control icon animations from parent elements by binding the `animate` input to your own hover, focus & touch states:
```ts
import { BellIcon } from 'ng-animated-icons';
@Component({ ... })
class Example {
shouldAnimate = signal(false);
}
```
```html
Notifications
```
When 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:
```ts
@Component({
selector: 'group-animation-item',
template: ``,
host: {
'(focusin)': 'shouldAnimate.set(true)',
'(focusout)': 'shouldAnimate.set(false)',
'(mouseenter)': 'shouldAnimate.set(true)',
'(mouseleave)': 'shouldAnimate.set(false)',
'(touchstart)': 'shouldAnimate.set(true)',
'(touchend)': 'shouldAnimate.set(false)',
},
})
class GroupAnimationItem {
readonly shouldAnimate = signal(false);
}
```
Use the wrapper component in your navigation:
```ts
import { GroupAnimationItem } from '@/components/group-animation-item';
import { Home, Settings } from 'ng-animated-icons';
```
```html
Home
Settings
```
## Missing support for something?
Go through existing issues if your problem is tracked; if not, please [raise a new issue!](https://github.com/ajitzero/animated-icons/issues/new/choose)
## Commands for development
Run demo locally:
```sh
bunx nx serve docs
```
Format affected code only:
```sh
bunx nx format
```
Format everything:
```sh
bun run format
```
Build docs for deployment:
```sh
bunx nx build docs
```
Build package for deployment:
```sh
bunx nx build ng-animated-icons
```
## License
[MIT](https://github.com/ajitzero/animated-icons/blob/main/LICENSE).
Built by [Ajit Panigrahi](https://github.com/ajitzero).