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
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
Tutorials
Lordicon Video Tutorial
How to add Animated Lottie Icons to Webflow


YouTube videos require cookies, you must accept their cookies to view.

Jesse Showalter
Navigation with Animated Icons | Figma + Webflow + Lordicon


YouTube videos require cookies, you must accept their cookies to view.
