• Icons
  • Docs
  • Lordicon
  • Lordicon
  • Pricing
  • More
  • Log in Sign up
Figma
  • Foundations
  • Library Tour
  • Icon styles
  • Animation
  • Triggers
  • Formats
  • All about GIFs
  • UX Designers
  • Best practices
  • Figma
  • Adobe XD
  • Developers
  • HTML/JS
  • Mobile/Native
  • No-code CMS
  • WordPress
  • Webflow
  • Other platforms
  • Content Design
  • Presentations
  • Newsletters
  • Canva
  • Adobe After Effects

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

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

Read more
Best practices Adobe XD