This guide gives the best practices to follow to embed, control and customize Lordicon animated icons in your Webflow projects.
Webflow
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
![](https://media.lordicon.com/upload/pages/2022_12/zp3qQNUr-4-90azovhY_C.gif)
It plays animation from start to finish when the mouse cursor hovers over the icon.
![](https://media.lordicon.com/upload/pages/2022_12/sVdAgMlEU4Bv2NLcBX7Hm.gif)
Autoplay the animation as a perfect loop from the first to the last frame infinitely, with no user interaction.
![](https://media.lordicon.com/upload/pages/2022_12/fgQlkWvoMVVtpMXRmCL3Q.gif)
It plays animation on loop whenever cursor hovers over the icon or parented area. After moving the cursor away, the animation stops.
![](https://media.lordicon.com/upload/pages/2022_12/I9ZYhEI4_0DvUiW2jWnao.gif)
It plays animation from start to finish when user clicks on the icon.
![](https://media.lordicon.com/upload/pages/2022_12/rO1BXQu1mI2nYxN7JF-q2.gif)
Hover the icon to play the animation from the first to the last frame. After moving the cursor away, the animation plays in reverse.
![](https://media.lordicon.com/upload/pages/2022_12/uFqy_7DEcEndNT65f7bGv.gif)
When you hover, the icon animation will play from the first to the last frame and immediately reverse.
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
![](https://media.lordicon.com/upload/pages/2022_12/HYgxxk-Ss64de27AbR5wN.gif)
Autoplay the animation as a perfect loop from.
Interaction guide: No action required. Loop plays on default.
![](https://media.lordicon.com/upload/pages/2022_12/UAXw4aoOclzXZza7Y4Jlb.gif)
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"
![](https://media.lordicon.com/upload/pages/2022_12/dFv3hFQlp7kloeHudOdNr.gif)
It plays animation from start to finish when user clicks on the icon.
Interaction guide: In the "Element trigger" set the "Mouse click", and configure the "On 1st click" to "Lottie playback".
![](https://media.lordicon.com/upload/pages/2022_12/Rn7_AI1_qWIYuLrxVulvW.gif)
It plays an animation when user scrolls the website.
Interaction guide: In the "Page trigger" select "While page is scrolling" from the action dropdown. Add scroll animation by clicking "+". Click "+" in the right-up corner one more time and select "Lottie" from the "Integrations" section. Adjust the scroll action (second keyframe of 100%) and click save.
![](https://media.lordicon.com/upload/pages/2022_12/VWL2w5gZeA4RNJhd8OOTl.gif)
Hover the icon to play the animation from the first to the last frame. After moving the cursor away, the animation plays in reverse.
Interaction guide: In the "Element trigger" set the "Mouse hover" and configure the "On hover" action to "Lottie playback". In addition, configure the "On hover out" to "Lottie playback" and check "reverse".
![](https://media.lordicon.com/upload/pages/2022_12/pnmNq9ChIVy4YLRI723_q.gif)
Click the icon to play the animation from the first to the last frame. Play animation in reverse on the second click.
Interaction guide: In the "Element trigger" set the "Mouse click", and configure the "On 1st click" to "Lottie playback". In addition, configure the "On 2nd click" to "Lottie playback" and check "reverse".
Tutorials
![](https://media.lordicon.com/thumb/resize-big/pages/2023_01/Gc-HPLDFAvM4v8s0iz5zP.webp)
Learn more on how to use Lottie with Webflow
Lordicon Video Tutorial
How to add Animated Lottie Icons to Webflow
![](https://media.lordicon.com/upload/pages/2023_01/mDrplzudInWvEuaPC1mcC.png)
This content requires cookies. You must accept cookies to view it.
![](https://media.lordicon.com/upload/pages/2023_01/mDrplzudInWvEuaPC1mcC.png)
Jesse Showalter
Navigation with Animated Icons | Figma + Webflow + Lordicon
![](https://media.lordicon.com/upload/pages/2023_01/YK6HxDxl0ZCk9usZSVkE1.png)
This content requires cookies. You must accept cookies to view it.
![](https://media.lordicon.com/upload/pages/2023_01/YK6HxDxl0ZCk9usZSVkE1.png)
Sorry to hear that. How can we improve this article?