cssvg-icon

Animated SVG icon library for React and Next.js.

icon.cssvg.com · npm · GitHub · Contributing

Installation

npm install cssvg-icons
# or
bun add cssvg-icons

Usage

Named imports (tree-shakeable)

import { Heart, Settings, ArrowRight } from "cssvg-icons";

export default function App() {
  return <Heart color="#ffffff" strokeWidth={2} size={40} />;
}

Direct import

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:

import { Heart, withIconControls } from "cssvg-icons";

const ControlledHeart = withIconControls(Heart);

// Paused
<ControlledHeart color="#ffffff" size={40} animated={false} />

// Plays only on hover
<ControlledHeart color="#ffffff" size={40} hoverToAnimate />

| 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.

All icons are named exports from cssvg-icons. Import any icon by its PascalCase name:

import { ArrowRight, Heart, BellRing } from "cssvg-icons";

Local Development

git clone https://github.com/Harijohnson/cssvg-icon.git
cd cssvg-icon
npm install
npm run dev

Open 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 for the full guide
• Open an issue
• Browse the icon explorer to see what's already there

License

MIT © Hari