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