Webflow

This guide gives the best practices to follow to embed, control and customize Lordicon animated icons in your Webflow projects.

Key takeaways

  • Integrate Lordicon Lottie animations into Webflow

  • Adjust colors, thickness, and animation style to mach your website theme

  • Learn about trigger-based animations

Lottie JSON implementation method

Webflow took a step ahead and brought the power of Lottie animation directly to the platform. This means you can add animated icons as Lottie JSON files to Webflow servers and play it on your website.

  • Select and download animated icon in Lottie format

  • Go to your Webflow website and edit the site

  • Add the “Lottie Animation” element from the media panel

  • Upload the downloaded icon

  • Select the animation trigger from the interaction panel and adjust the settings

  • Click Play to preview animation

Clone examples

Tutorials

Official Webflow Tutorial

Learn more on how to use Lottie with Webflow

Learn More

Jesse Showalter

Navigation with Animated Icons | Figma + Webflow + Lordicon