Assembling interactive icons.

Use animated icons in Adobe XD

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.

Adding animated icon to Adobe XD projects

This video presents how to use Lordicon animated icons in Adobe XD

1:17

  • In Lordicon library, select an animated icon

  • Download icon as Lottie JSON (Rough) from the Source Files section

  • Go to Lottie Editor to customize icon color

  • Import icon in Lottie JSON (Rough) format to your Adobe XD project

  • Set the animation on loop, or leave it to play only one time

  • Press play on the prototype and interact with animated icon

Understanding Icon Animation

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

Read more