The Embed HTML export option enables quick and easy use of Lordicon in web projects. 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
Embed HTML

-
Open the software where you want to use animated icons such as Shopify, Wix, Weebly, or Squarespace.
-
Add “Embed HTML” iframe
-
Go to Lordicon library
-
Select and customize an animated icon
-
Click “Embed HTML” from the download menu
-
Adjust settings and click “copy”
-
Paste HTML code to iframe located in your website builder
-
Done!
Available animation triggers
This animation displays an icon reveal only once on the page load.
It plays animation from start to finish when the mouse cursor hovers over the icon.
Autoplay the animation as a perfect loop from the first to the last frame infinitely, with no user interaction.

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

It plays animation from start to finish when user clicks on the icon.

Hover the icon to play the animation from the first to the last frame. After moving the cursor away, the animation plays in reverse.

When you hover, the icon animation will play from the first to the last frame and immediately reverse.
While we expect to have minimal issues, there is no guarantee of 100% uptime for Lordicon HTML Embed that utilizing our CDN server. We may need to perform maintenance to these on rare occasions or encounter unforeseen issues that would cause service interruptions.
If the appearance of the icons is important to your brand, use the JSON Lottie format and host icons on your own servers. Learn how to do that here.
Sorry to hear that. How can we improve this article?