Animated Icons

A collection of 36 beautifully animated icons built with Framer Motion and SVG. Perfect for enhancing your UI with smooth, performant animations.

Installation

Install any icon via the shadcn CLI:

npx shadcn add accordion-icon
npx shadcn add button-icon
npx shadcn add dialog-icon

Features

⚡ Smooth Animations - Built with Framer Motion for fluid motion
🎨 Customizable - Control size, color, and animation state
📦 Tree-shakeable - Import only what you need
♿ Accessible - ARIA-compliant with proper labels
🎯 TypeScript - Full type safety included

Usage

import { ButtonIcon } from "@/components/icons/animated"

export function MyComponent() {
  const [isActive, setIsActive] = useState(false)

  return (
    <button onClick={() => setIsActive(!isActive)}>
      <ButtonIcon size={24} isActive={isActive} />
    </button>
  )
}

Available Icons

UI Components

accordion

alert

avatar

badge

button

checkbox

collapsible

combobox

command

dialog

input

radio

search

select

settings

shield

slider

switch

tooltip

book

breadcrumb

menu

pagination

tabs

Data & Feedback

calendar

chart

data-table

notification

progress

Layout

aspect-ratio

card

carousel

layers

Examples

Basic Icon

<ButtonIcon size={20} />

Active State

<ButtonIcon size={20} isActive={true} />

Custom Styling

<ButtonIcon size={24} isActive={isActive} className="text-blue-500" />

Icons