cssvg-icon Logocssvg-icon

Animated SVG Icons
for React & Next.js

66 free open source animated icons. Tree-shakeable, zero dependencies, MIT licensed. Copy the component or install via npm.

Browse 66 IconsGet Started
npm i cssvg-icons
66+
Free Icons
MIT
License
0
Dependencies
SMIL
Animation

Up and running in three steps

  1. 1

    Install

    Add cssvg-icons to any React or Next.js project. Works with npm, pnpm, yarn, and bun. No peer dependencies.

    npm i cssvg-icons
  2. 2

    Import

    Import icons by name. Only the icons you import are bundled — everything else is tree-shaken out at build time.

    import { Bell } from "cssvg-icons"
  3. 3

    Use

    Drop into JSX. Pass color, size, and strokeWidth. SMIL animation plays automatically — no setup needed.

    <Bell size={32} color="currentColor" />

Everything you need

Each icon is a self-contained React component with animation built in.

Animated out of the box

Every icon uses native SVG SMIL animation. No JS animation libraries, no CSS keyframes. Smooth on first render, no setup.

Copy & paste ready

Click any icon to get the full TSX source. Paste into your project — no install, no imports to wire up.

Tree-shakeable

Import only what you use. Unused icons are eliminated at build time by Webpack, Vite, Turbopack, or esbuild.

Customisable props

Every icon takes color, size, and strokeWidth. Preview live in the explorer, then copy the exact variant you need.

Works with Tailwind CSS

Icons use currentColor by default — they inherit any Tailwind text colour class. No extra config required.

MIT licensed

Free for personal and commercial projects. Fork, modify, or contribute new icons via the CSSVG Editor.

Works wherever React runs

Ships as ESM with TypeScript types. No special setup needed — works in Next.js, Vite, Remix, and Gatsby out of the box.

  • Next.js 13+App Router & Pages Router
  • React 18+Client & server components
  • Vite + ReactZero config, instant HMR
  • RemixLoaders, actions, components
  • TypeScriptTypes included
  • Tailwind CSScurrentColor compatible

Quick start

Install

npm i cssvg-icons

Import

import { Bell, ArrowRight } from "cssvg-icons"

Use

<Bell size={24} color="currentColor" strokeWidth={2} />

Or skip npm entirely — click any icon in the library and copy the TSX component.

Common questions

Are the icons really free?

Yes — every icon is MIT licensed. Free for personal and commercial use, no attribution required, no paid tiers.

What animation technology is used?

SVG SMIL — a native browser standard. No CSS keyframes, no JavaScript animation runtime, no dependencies.

Can I use icons without installing npm?

Yes. Click any icon, copy the TSX source, paste into your project. npm is only needed for version-locked installs.

Do icons work with Next.js server components?

Icons use 'use client' because SMIL runs in the browser. Import them inside any client component boundary in the App Router.

How do I contribute a new icon?

Design in the CSSVG Editor, export the TSX component, open a pull request on GitHub. See CONTRIBUTING.md for the full spec.

How do I request an icon?

Visit the Requests page, describe what you need. Community-voted requests are prioritised each release.

Start for free, today

66 animated SVG icons, ready to drop into your React or Next.js project. Open source, MIT licensed, no sign-up required.

Browse Icon LibraryRead the Docs →