This guide gives best practices of an easy way to embed, control and customize Lordicon animated icons in your web projects created with online website builders.
Other platforms
Key takeaways
-
Load and render animated icons with the simple HTML tag lord-icon.
-
Customize stroke width, colors, and other supported properties on the fly.
-
Understand animation triggers and how to use them.
Embed HTML implementation method
Use Lordicon Embed Code to add, edit and control animated icons in your project. 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
-
Open website builder (Shopify, Wix, Weebly, Squarespace, etc.)
-
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
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.
Click
It plays animation from start to finish when user clicks on the icon.
Morph
Hover the icon to play the animation from the first to the last frame. After moving the cursor away, the animation plays in reverse.
Boomerang
When you hover, the icon animation will play from the first to the last frame and immediately reverse.
Alternative method
As an alternative, you can use other raster formats. You can also use other, raster formats.
-
Go to Lordicon library
-
Select and customize an animated icon
-
Download animated icon in GIF, MP4 or as a static PNG, SVG image
-
Open website builder (Shopify, Wix, Weebly, Squarespace, etc.)
-
Seach for an image block to insert GIF, PNG or SVG image
-
Seach for an video block to insert animated icons as MP4 video
Platform tutorials
Adding animated icons to Wix
7:32
Adding animated icons to Weebly
4:32
Adding animated icons to Squarespace
4:39
Was this article helpful?
Sorry to hear that. How can we improve this article?