Use animated icons in Figma

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

Best practices

Get in touch with any questions you may have.

Read more