Animated SVG icons

Animated SVG icons you copy into your project. No runtime dependency — the CLI writes framework-specific component source into your repo, shadcn-style.

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal

npx @svg-animated-icons/cli add {icon} --react

Flag	Description
`--dest <dir>`	Destination directory (default: components/animated-icons)

Icons

Align Center Horizontally

Align Center Vertically

Align Horizontal Centers

Align Vertical Centers

Arrow Bottom Left

Arrow Bottom Right

Arrow Top Right

Bookmark Filled

Card Stack Minus

Card Stack Plus

Circle Backslash

Codesandbox Logo

Component Boolean

Component Instance

Component Placeholder

Corner Bottom Left

Corner Bottom Right

Corner Top Left

Corner Top Right

Countdown Timer

Counter Clockwise Clock

Divider Horizontal

Divider Vertical

Dots Horizontal

Double Arrow Down

Double Arrow Left

Double Arrow Right

Double Arrow Up

Drag Handle Dots 1

Drag Handle Dots 2

Drag Handle Horizontal

Drag Handle Vertical

Drawing Pin Filled

Drawing Pin Solid

Enter Full Screen

Envelope Closed

Exclamation Circled

Exclamation Mark

Exclamation Triangle

Exit Full Screen

Justify Stretch

Letter Case Capitalize

Letter Case Lowercase

Letter Case Toggle

Letter Case Uppercase

Magnifying Glass

Mixer Horizontal

Open In New Window

Panel Bottom Minimized

Panel Left Minimized

Panel Right Minimized

Question Mark Circled

Rotate Counter Clockwise

Ruler Horizontal

Sewing Pin Filled

Sewing Pin Solid

Space Between Horizontally

Space Between Vertically

Space Evenly Horizontally

Space Evenly Vertically

Speaker Moderate

Stretch Horizontally

Stretch Vertically

Text Align Bottom

Text Align Center

Text Align Justify

Text Align Left

Text Align Middle

Text Align Right

Thick Arrow Down

Thick Arrow Left

Thick Arrow Right

Transparency Grid

View Horizontal