Webflow

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

Key takeaways

  • Load and render animated icons with the simple HTML tag lord-icon.

  • Host Lottie JSONs on Webflow servers.

  • Customize stroke width, colors, and other supported properties on the fly.

Embed HTML implementation method

Use Lordicon Embed Code to add, edit and control animated icons on your Webflow website. Copy an HTML code from the library and embed it on your page. With this solution, the source of the icon (JSON Lottie) is hosted on Lordicon CDN servers.

  • Pick an icon you would like to use.

  • Click “Embed HTML” from download tab.

  • Set properties such as an animation trigger, icon size, and delay.

  • Click: "Copy HTML code"

  • Go to your Webflow website and edit the site.

  • Add “Embed” Component.

  • Paste HTML code.

  • On that level, you can still adjust properties by editing the code.

  • Publish the website to preview the animation.

Available animation triggers

Hover

It plays animation from start to finish when the mouse cursor hovers over the icon.

Loop

Autoplay the animation as a perfect loop from the first to the last frame infinitely, with no user interaction.

Loop on hover

It plays animation on loop whenever cursor hovers over the icon or parented area. After moving the cursor away, the animation stops.

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.

  • Pick an icon you would like to use.

  • Click download, and select Lottie JSON (Lordicon).

  • Go to your Webflow website and edit the site.

  • Add the “Lottie Animation” component from the media panel.

  • Upload the downloaded icon in Lottie JSON format.

  • Select the animation trigger from the interaction panel and adjust the settings. Play with the configurations to achieve the planned interaction scenario.

  • Publish the website to preview the animation.

Webflow animation triggers

Loop (default)

Autoplay the animation as a perfect loop from.

Interaction guide: No action required. Loop plays on default.

Mouse hover

It plays an animation when the cursor hovers over the icon.

Interaction guide: In the "Element trigger" set the "Mouse hover", and configure the "On hover" to "Lottie playback"