Assembling interactive icons.

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

Learn more

Best practices

See the best practices for applying static and animated icons to your projects.

Read more
Understanding Icon Animation

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

Read more