Pink Pixel Animated Icons

A collection of animated SVG icons for React. Built on motion/react.

Installation

npm install
npm run build

Usage

import { HeartIcon, SearchIcon, LoaderIcon } from "@pinkpixel/animated-icons";

export function Demo() {
  return (
    <div>
      <HeartIcon size={24} color="#f45b48" />
      <SearchIcon size={24} />
      <LoaderIcon size={24} duration={0.8} />
    </div>
  );
}

Props

All icons accept:

• size?: number - Icon size (default: 24)
• color?: string - Icon color (default: currentColor)
• className?: string - Additional CSS classes
• duration?: number - Animation duration multiplier (default: 1)
• isAnimated?: boolean - Enable/disable hover animation (default: true)

Imperative API

import { useRef } from "react";
import { HeartIcon, type HeartIconHandle } from "@pinkpixel/animated-icons";

export function Demo() {
  const ref = useRef<HeartIconHandle>(null);

  return (
    <button onClick={() => ref.current?.startAnimation()}>
      <HeartIcon ref={ref} />
    </button>
  );
}

Available Icons

• AcademicCapIcon
• Activity2Icon
• ActivityIcon
• ArrowLeftIcon
• ArrowRightIcon
• ArrowUpIcon
• ArrowDownIcon
• BeakerIcon
• BellRingIcon
• Bolt2Icon
• BoltIcon
• BookOpenIcon
• Bookmark2Icon
• BookmarkIcon
• BoxIcon
• CakeIcon
• CalculatorIcon
• CalendarIcon
• CameraIcon
• Check2Icon
• CheckIcon
• ChevronDownIcon
• ChevronLeftIcon
• ChevronRightIcon
• ChevronUpIcon
• ClipboardIcon
• ClockIcon
• CloudFloatIcon
• CoffeeIcon
• CogIcon
• ComputerDesktopIcon
• Copy2Icon
• CopyIcon
• DiscordIcon
• DocumentIcon
• DollarSignIcon
• Download2Icon
• DownloadIcon
• EllipsisVerticalIcon
• EllipsisIcon
• Eye2Icon
• EyeClosedIcon
• EyeDropperIcon
• EyeIcon
• FlameIcon
• FolderOpenIcon
• FolderIcon
• FunnelIcon
• GamepadIcon
• Github2Icon
• Github3Icon
• GithubIcon
• GlobeIcon
• Grid2Icon
• Grid3Icon
• GridIcon
• Heart2Icon
• HeartIcon
• HouseIcon
• InfoIcon
• KofiIcon
• LayersIcon
• LoaderIcon
• Loading2Icon
• Loading3Icon
• MailIcon
• Menu2Icon
• MenuIcon
• MinusIcon
• MoonIcon
• NotificationOffIcon
• NotificationIcon
• NpmIcon
• OctocatIcon
• PaintbrushIcon
• PaperclipIcon
• PauseIcon
• PencilSquareIcon
• PixelHeartIcon
• PlayIcon
• PlusIcon
• RocketIcon
• Search2Icon
• SearchIcon
• Settings2Icon
• SettingsIcon
• SparklesIcon
• StarIcon
• StopIcon
• SunIcon
• SwordsIcon
• TagIcon
• Terminal2Icon
• TerminalIcon
• ThumbsDownIcon
• ThumbsUpIcon
• Trash2Icon
• TrashIcon
• TriangleAlertIcon
• TvIcon
• UploadIcon
• User2Icon
• UserIcon
• WrenchIcon
• WrenchScrewdriverIcon
• XIcon
• ZapIcon

Adding Icons

1. Create a new file in src/icons/your-icon.tsx
2. Copy the structure from any existing icon
3. Modify the SVG paths and animation variants
4. Export it in src/index.ts
5. Run npm run build

License

MIT - See LICENSE file