https://github.com/harijohnson/cssvg-icon
You can find the animated icons in this repository.
https://github.com/harijohnson/cssvg-icon
animated-icons animation-css component css icons keyframe-animation keyframes svg svg-animations svg-icons tailwindcss
Last synced: 2 days ago
JSON representation
You can find the animated icons in this repository.
- Host: GitHub
- URL: https://github.com/harijohnson/cssvg-icon
- Owner: Harijohnson
- License: mit
- Created: 2026-04-08T06:17:52.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2026-04-12T04:06:54.000Z (15 days ago)
- Last Synced: 2026-04-12T06:23:48.365Z (15 days ago)
- Topics: animated-icons, animation-css, component, css, icons, keyframe-animation, keyframes, svg, svg-animations, svg-icons, tailwindcss
- Language: TypeScript
- Homepage: https://icon.cssvg.com
- Size: 1.09 MB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
- Support: SUPPORT.md
Awesome Lists containing this project
README
# cssvg-icon
Animated SVG icon library for React and Next.js.
**[icon.cssvg.com](https://icon.cssvg.com)** · [npm](https://www.npmjs.com/package/cssvg-icons) · [GitHub](https://github.com/Harijohnson/cssvg-icon) · [Contributing](CONTRIBUTING.md)
---
## Installation
```bash
npm install cssvg-icons
# or
bun add cssvg-icons
```
## Usage
### Named imports (tree-shakeable)
```tsx
import { Heart, Settings, ArrowRight } from "cssvg-icons";
export default function App() {
return ;
}
```
### Direct import
```tsx
import HeartIcon from "cssvg-icons/icons/heart/heart";
```
## Props
All icons accept the same props:
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `"currentColor"` | Stroke color |
| `strokeWidth` | `number` | `2` | Stroke width (0.5–4) |
| `size` | `number` | `40` | Width and height in px |
| `className` | `string` | `""` | Extra CSS classes |
## Animation Control
Icons animate continuously by default. Use `withIconControls` to add `animated` and `hoverToAnimate` props without modifying the original components:
```tsx
import { Heart, withIconControls } from "cssvg-icons";
const ControlledHeart = withIconControls(Heart);
// Paused
// Plays only on hover
```
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `animated` | `boolean` | `true` | `false` freezes the animation |
| `hoverToAnimate` | `boolean` | `false` | Starts paused, plays only while hovered |
## Available Icons
Browse the full, always-up-to-date icon library at **[icon.cssvg.com](https://icon.cssvg.com)**.
All icons are named exports from `cssvg-icons`. Import any icon by its PascalCase name:
```tsx
import { ArrowRight, Heart, BellRing } from "cssvg-icons";
```
## Local Development
```bash
git clone https://github.com/Harijohnson/cssvg-icon.git
cd cssvg-icon
npm install
npm run dev
```
Open [http://localhost:3000](http://localhost:3000).
## Project Structure
```
icons/
[slug]/
[slug].tsx # Animated React component
[slug].json # Metadata & attribution
[slug].svg # Raw SVG source
```
## Contributing
Contributions are welcome — new icons, bug fixes, and docs improvements.
- Read the [Contributing Guide](https://icon.cssvg.com/docs/contributing) for the full guide
- [Open an issue](https://github.com/Harijohnson/cssvg-icon/issues)
- [Browse the icon explorer](https://icon.cssvg.com) to see what's already there
## License
[MIT](LICENSE) © [Hari](https://github.com/Harijohnson)