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
Hover
It plays animation when the mouse cursor hovers over the object.
View on Stackblitz
Click
It plays animation when user clicks on the object.
View on Stackblitz
Loop
Autoplay the animation as a perfect loop infinitely, with no user interaction.
View on Stackblitz
Loop on hover
It plays animation on loop whenever cursor hovers over the object. After moving the cursor away, the animation stops.
View on Stackblitz
Morph
Hover the icon to play the animation. After moving the cursor away, the animation plays in reverse.
View on Stackblitz
Boomerang
Hover the icon to play the animation from the first to the last frame and immediately reverse.
View on Stackblitz
Custom triggers
If none of the provided triggers meet what you need to implement, we allow building custom, more sophisticated animation triggers.
Morph on click
This custom trigger reverse animation on the second click.
View on Stackblitz
Scroll
This custom trigger plays an animation when a user scrolls the website.
View on Stackblitz
In-screen
This custom trigger plays animation once the icon appears in the browser viewport.
View on Stackblitz
States brakedown
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.
View on Stackblitz
States
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.
View on Stackblitz
Trigger target
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.
View on Stackblitz
Examples
CSS variables
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!
View on Stackblitz
Current color
This current color is a class built into an element. With this class, the icon will inherit its color from a parent.
View on Stackblitz
Background
This example presents the use of the element as a background.
View on Stackblitz
Manual control
Example of manual interaction with icon and player.
View on Stackblitz
Lazy loading
Load icons only when needed.
View on Stackblitz
Lazy loading effect
Load icons only when needed. Fade-in icons after the icon loads to create a smooth appearance.
View on Stackblitz
Icon loader
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.
View on Stackblitz
Lottie light
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.
View on Stackblitz
