This guide gives the best practices to follow to embed, control and customize Lordicon animated icons in your web projects.
Web HTML implementation
Key takeaways
Basic implementation and customization
Release
This example presents the easiest way to use the Lordicon custom element with the released version. Keep in mind that this is not the most efficient method, as the entire library (including bundled Lottie-web) is loaded by default.


StackBlitz require cookies, you must accept their cookies to view.

Customization
This example presents all customizable attributes supported by the element.


StackBlitz require cookies, you must accept their cookies to view.

Recommended Formats
JSON Lordicon
As long as you can use all possible formats, we recommend using the main JSON Lordicon. It is a Lottie File with special expressions allowing easy customization.

Embed HTML
You can also load the icon source directly from our servers by accessing the icon source. This method is a quick and easy way to implement animated icons on websites. 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 servers (AWS - 99% uptime).
Animation triggers
Default animation triggers

It plays animation when the mouse cursor hovers over the object.

It plays animation when user clicks on the object.

Autoplay the animation as a perfect loop infinitely, with no user interaction.

It plays animation on loop whenever cursor hovers over the object. After moving the cursor away, the animation stops.

Hover the icon to play the animation. After moving the cursor away, the animation plays in reverse.

Hover the icon to play the animation from the first to the last frame and immediately reverse.
Custom triggers
If none of the provided triggers meet what you need to implement, we allow building custom, more sophisticated animation triggers.

This custom trigger reverse animation on the second click.

This custom trigger plays an animation when a user scrolls the website.

This custom trigger plays animation once the icon appears in the browser viewport.
This example presents usage for icon state animation. It is easier than ever to switch between each motion type to use them as stand-alone animations or combine and create an interactive experience.
This is a combination of several triggers with one animated icon. We utilize animation states with the custom trigger, e.g., you can see how the Trash icon appears, fills, and erases as the user interacts.
Use the target attribute to indicate which parent element should activate the trigger. This is helpful when building links, buttons, or bounding boxes where you don't want to hover over the icon to activate it.
Examples
This example utilizes CSS variables to customize colors on supported icons (at the moment, only System icons). Notice: CSS variables take precedence over colors assigned by other methods!
This current color is a class built into an element. With this class, the icon will inherit its color from a parent.
This example presents the use of the element as a background.
Example of manual interaction with icon and player.
Load icons only when needed.
Load icons only when needed. Fade-in icons after the icon loads to create a smooth appearance.
This example shows the usage of an icon loader callback which can be used to provide icon data from alternate sources, this could make the page load faster.
This is an example of using our element with Lottie-web-light, which is much smaller in size but doesn't support expressions (and, consequently, dynamic customization). You can use the light version in pair with our raw icon data.