We have developed our own custom player for web. This documentation gives the best practices to follow to embed, control and customize Lordicons in web projects.
Interact with code in real time
Basic icon release
click to open stackblitz
This example presents the easiest way to use the Lordicon custom element. 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.

Icon customization
click to open stackblitz
This example presents all customizable attributes supported by the Lordicon custom element.


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

Custom animation triggers

"In-screen" custom trigger plays animation once the icon appears in the browser viewport. It happens when the website loads up or while scrolling down.

This custom trigger reverse animation on the second click.

"Scroll" custom trigger plays an animation when a user scrolls the website.
Use the trigger "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.
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 animation states with one icon. You can see how the Trash icon appears, fills, and erases user interaction.
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.
"Background" example presents the use of the element as a background.
Example of manual interaction with icon and player.
Use "Lazy loading" to postpone the time of loading animated icon data until they are in the browser viewport.
"Lazy loading effect" loads 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.
Best practices
JSON Lottie & CDN
You can start using Lordicons immediately with minimal front-end infrastructure by loading the icon source directly from our CDN, which is a great option for quick prototyping.
Using animated icons as website loaders (spinners)
If you are using animated icons on your website that plays on a loop (eg. website loader) it is better to use WEBP or MP4 format.
Lottie animation requires loading the entire library (including bundled Lottie-web), which delays the moment the icon appears. Additionally, displaying Lottie animation utilizes a considerable amount of CPU, which is less environmentally friendly than raster formats.