Browse the library

Animated icons

2,000+ icons for React, drawn on a 24px grid with one stroke weight. Animate them with draw, spin, bounce, and more, then click any icon to copy its JSX.

24px gridtree-shakableanimated

Size

Stroke

2,143 icons

Animate

Usage

Import icons by name so only the ones you use are bundled. Size them with Tailwind and let color inherit from the text. Mark decorative icons aria-hidden, and give icon-only buttons an aria-label.

usage.tsx

import { Rocket } from "lucide-react";
import { AnimatedIcon } from "@streamui/react";

// Static
<Rocket className="size-5" strokeWidth={1.75} aria-hidden />

// Animated: plays on hover of the icon or its direct parent
<AnimatedIcon animation="bounce">
  <Rocket className="size-5" aria-hidden />
</AnimatedIcon>

Animations are pure CSS from the package theme, and all of them stop when the user prefers reduced motion. Animated Icon docs

Glyphs from Lucide, ISC licensed.