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
Before going deeper into this, make sure you have checked basic animation triggers. You can also view them on Stackblitz.
Play animation when it enters the viewport
"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.
View on Stackblitz
Morph animation on click
This custom trigger reverse animation on the second click.
View on Stackblitz
Play animation on website scroll
"Scroll" custom trigger plays an animation when a user scrolls the website.
View on Stackblitz
Trigger animation on parent target
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.
View on Stackblitz
Switch between animation types
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
Icon states and feedback
This is a combination of several animation states with one icon. You can see how the Trash icon appears, fills, and erases user interaction.
View on Stackblitz
Examples
Customize icons with 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 colors
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
Use icon as a background
"Background" 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
Load icons only when needed
Use "Lazy loading" to postpone the time of loading animated icon data until they are in the browser viewport.
View on Stackblitz
Create smooth icon appearance
"Lazy loading effect" loads icons only when needed. Fade-in icons after the icon loads to create a smooth appearance.
View on Stackblitz
Improve performance with 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
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.
You can get the icon source URL or ID by visiting Embed HTML in the download section. The source of the icon (JSON Lottie) is hosted on Lordicon CDN servers.
While we expect to have minimal issues, there is no guarantee of 100% CDN uptime. If your project is of key importance to your clients, we recommend that you consider hosting icons as Lottie JSON (Lordicon) on your own.
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.