Get Started

We animated Lucide Icons with Motion, one of the most popular icon libraries on the web.

Note: The animated icons are in beta. You may encounter bugs. Recurring changes will take place, and some props may be added or removed. We recommend that you update the wrapper regularly.

Installation

Icon Wrapper

You need to install the icon wrapper components to use the animated icons.

Icons

Basic Usage

Icon

<ArrowRight animateOnHover />

Icon with AnimateIcon wrapper

<AnimateIcon animateOnHover>
  <ArrowRight />
</AnimateIcon>

API Reference

Icon

Prop	Type	Default
`size?`	`number`	`28`
`...props?`	`SVGMotionProps<SVGSVGElement>`	-

AnimateIcon

Prop	Type	Default
`children`	`React.ReactNode`	-
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"span">`	-

Common Props

Prop	Type	Default
`animate?`	`boolean \| string`	`false`
`animateOnHover?`	`boolean \| string`	`false`
`animateOnTap?`	`boolean \| string`	`false`
`animateOnView?`	`boolean \| string`	`false`
`animateOnViewMargin?`	`string`	`0px`
`animateOnViewOnce?`	`boolean`	`true`
`initialOnAnimateEnd?`	`boolean`	`false`
`persistOnAnimateEnd?`	`boolean`	`false`
`completeOnStop?`	`boolean`	`false`
`delay?`	`number`	`0`
`animation?`	`StaticAnimations \| string`	`default`
`loop?`	`boolean`	`false`
`loopDelay?`	`number`	`0`

Credits

We use the Lucide Icons library to create the icons and Motion to animate them.

We took our inspiration from:

Get Started

On this page