Icons

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.

import { Rocket } from "lucide-react";
import { AnimatedIcon } from "@streamuilib/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

Brand icons come from the react-icons package. Copy them as JSX, or as a standalone SVG to drop in anywhere.

// bun add react-icons
import { SiGithub } from "react-icons/si";

// Monochrome; takes the text color. Name it when it stands alone.
<SiGithub className="size-5" aria-label="GitHub" role="img" />

Line icons from Lucide, ISC licensed. Brand icons from Simple Icons (CC0) via react-icons; each logo is a trademark of its owner, so follow that brand's guidelines when you use it.