Icons

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

Installation

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

Icons

Usage

Install an icon

How to use an icon

Each icon has at least 3 animations:

• path: an animation of the pathLength from 0 to 1
• path-loop: pathLength animation from 1 to 0 to 1
• default: the default animation, customized for each icon

You can use the animation prop to select the animation.

<Icon animation="path" />

Some icons also have other animations created specifically for them.

Animations ending with -loop are animations that start at the initial state, do the animation and return to the initial state.

Trigger animation by parent element

You can use the AnimateIcon component to manage child icon animations.

<AnimateIcon animateOnHover>
  <div>
    <Icon />
  </div>
</AnimateIcon>

You can choose the animation on the AnimateIcon component.

<AnimateIcon animateOnHover animation="path">
  <div>
    <Icon />
  </div>
</AnimateIcon>

But you can also specify it directly on the icon, which will be given priority.

<AnimateIcon animateOnHover animation="path">
  <div>
    <Icon animation="out" />
    <Icon2 />
    <Icon3 />
  </div>
</AnimateIcon>

Props

Credits

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

We took our inspiration from:

• Iconly
• Lordicon
• Flaticon
• pqoqubbw/icons