Design softwares

This guide reveals all the information about including animated icons in your designs.

See examples of use and discover our deep research on how animated icons impact user experience.

Include animated icons in your Figma prototypes to help the others understand your ideas without heavy front-end implementation.

Adding animated icon to Figma project

The process of adding animated, interactive icons to Figma mockup.

1:34

In Lordicon library, select an animated icon
Adjust icon color, animation type or stroke width
Download icon as static SVG and animated GIF with transparent background
Import icon in both formats to Figma, and make them the same size
Drag GIF format into the static SVG icon group
Bring the opacity of the GIF down to zero (0%), and leave the SVG exposed
Turn it into compontent and create a variant out this group
In the duplicated element, turn the opacity of the GIF up (100%) and turn the opacity of the static SVG down to zero (0%)
Go to prototype and drag the rope onto the other state
Adjust interaction details to "While hovering"
Go to document assets and drag the component to your design
Press play on the prototype and interact with animated icon

Include animated icons in your AdobeXD prototypes to help others understand your ideas without heavy front-end implementation.

Adobe XD supports Lottie files, but it doesn't support expressions on which our main format Lottie JSON (Lordicon) stands on. This is why color adjustments or animation states are not supported by Adobe XD. To include our animated icons in Adobe XD, please proceed with Lottie JSON (Rough) version.