Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@lordicon/element

lordicondev18.8kMIT1.11.0TypeScript support: included

This package offers developers a convenient method for embedding, controlling, and customizing animated icons from Lordicon within web projects.

lordicon, lottie, icon, animation

readme

Lordicon

This is the monorepo for Lordicon packages, including @lordicon/helpers, @lordicon/react and @lordicon/element. Feel free to explore and integrate Lordicon animated icons into your projects with these easy-to-use packages.

Building

To build all available packages, simply run the following commands:

npm i
npm run build

Demo

Element

This demo showcases the integration of custom element with numerous website use cases.

npm run demo-element

React

This demo features a sample React application that supports both web and mobile platforms out of the box.

npm run demo-react
  • Lordicon - Lordicon is a powerful library of thousands of carefully crafted animated icons.
  • Lottie - Render After Effects animations natively on Web, Android and iOS, and React Native.

changelog

v1.11.0 (2025-05-05)

  • Allow control of the speed within the sequence trigger.

v1.10.1 (2024-11-04)

  • Support for older iOS versions, 16.3 and earlier.

v1.10.0 (2024-08-19)

  • Remove type "module" for @lordicon/react.

v1.9.0 (2024-08-09)

  • Support for the "iconData" setter.
  • Type "module".

v1.8.0 (2024-08-05)

  • Support for CSS variables within a React library (web environment only).
  • Support for assigning colors to icons during loading with a React library (both web and native environments).

v1.7.0 (2024-08-03)

  • The code no longer checks for the availability of the adoptedStyleSheets property (fix for "ReferenceError: Document is not defined" message).
  • Small corrections have been made to the functionality involving the "in" trigger.
  • The system now includes functionality to access loaded icon data from an element.
  • The project's dependencies have been updated to the latest versions.

v1.6.0 (2024-03-06)

  • Bump version.

v1.5.1 (2024-03-05)

  • Small fixes in reading "delay".

v1.5.0 (2024-03-05)

  • New loading method "delay".

v1.4.3 (2023-11-27)

  • Use default animation for missing states.

v1.4.2 (2023-11-27)

  • Fix icon stroke outside range.

v1.4.1 (2023-11-23)

  • Corrected the version number within the NPM package build.

v1.4.0 (2023-11-22)

  • More work on legacy icons support.

v1.3.0 (2023-11-20)

  • Legacy icon file support (without markers).

v1.2.3 (2023-11-08)

  • Fix component mount for @lordicon/react.

v1.2.2 (2023-11-07)

  • Make some dependencies optional.
  • Remove react-native import from web player.

v1.2.0 (2023-11-03)

  • Change the output format to IIFE for the released @lordicon/element.

v1.1.0 (2023-09-26)

  • Improved support for animation playback direction across libraries.

v1.0.0 (2023-09-19)

  • Monorepo for multiple packages.