Assembling interactive icons.
Customization and formats
Icon families and styles

Currently, we provide two icon families: Wired and System. They have been designed to meet as many scenarios as possible, delivering you a full range of options when creating your next project.

Wired Family

Designed to work best in bigger formats, Wired family icons act as decorative and explanatory elements. They represent various characteristics and are designed to be fun, expressive, and modern.

We distinguish four styles in this icon family: Outline, Lineal, Flat, and Gradient.

All of the styles support color and stroke width change, except for Flat, which supports only color change.

System Family

Designed on 24-pixel grid, System family icons are reduced to their minimal form to ensure clarity and readability, even at small sizes. This is why they work best in the menu tabs, buttons, or navigation bars. However, you can also use them as decorative elements.

We distinguish two styles in this family: Outline and Solid.

Due to its small size and condensed design, this family supports only color adjustment controls. However, each icon has been delivered in more than one animation type.

Animation types

Some of the icons are delivered in several animation types. This means that static design has been animated in a few different ways.

We distinguish the following animation types:
In

This animated sequence reveals the icon and is ideal to use when the page loads. It’s characterised by a fast beginning that calms down gently.

Hover

This perfectly designed loop animation focuses on interaction or occasional animation. The animation starts fast and slows down gently. The ideal use case for the icon is to insert it where a user will hover and click.

Loop

Animation which plays infinitely without any interruptions. It is great for screen loaders, as the speed of the animation remains constant.

Morph

Animation that presents two phases of an icon. This icon usually changes between two forms, like switched on and off. The speed of motion is constant and smooth, making it work great when played forward or reversed.

Available formats

Each icon is delivered in Lottie (JSON) format as a base. Thanks to our robust customization tool built in the library, you can customize icons with color, stroke width, animation type, and other properties. Icons can be rendered and then downloaded in various of different formats.

Lottie files don’t work as pictures or videos, as they are delivered through code and animated vector files.This makes them super sharp and fully interactive.

Formats that support customization

Embed HTML

A quick and easy way to implement animated icons on websites. Copy an HTML code directly 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).

Lottie JSON (Lordicon)

Lordicon default format, compatible with the library and Custom Element. It is different than a regular Lottie JSON format as it includes customization data to make sure every piece of the icon will be fully customized.

GIF

Rendered animated GIF, available with solid or transparent background, in sizes ranging from 100 x 100px to 1000 x 1000px. Due to the low performance, gradient colors might not look good, and with transparency icon borders might become pixelated.

PNG

An image with a transparent background representing the first frame of the icon animation.

SVG

A vector image representing the first frame of the icon animation. Note: stroke width adjustment doesn’t work with SVG export.

MP4

An animation exported in the MP4 format. Note: the exported MP4 file won't work with QuickTime Player or Windows Media Player. However, it can be easily used across the web, mobile, or with any video editing software.

WEBP

A lightweight raster animation format built for the Web environment.

APNG

An animated PNG sequence that works similarly to GIF, but with correct transparency rendering.

Source Files (non-edited)

Lottie JSON (Rough)

The purest form, without expression controls responsible for adjustments & animation types. This makes it compatible with Lottie Editor. Use this format to embed icons in your native projects (eg. iOS & Android).

Adobe After Effect

A project source file.

EPS

A vector image with editable stroke paths.

Make sure to use the (non-edited) "Lottie JSON rough" format when you add animated icons to your mobile projects (for both iOS or Android). Lordicon default JSON Lottie files edited and exported using the Lordicon library won't work in mobile app environments.

What format to choose JSON Lottie, GIF, or MP4?

While implementing animated icons in your projects, deciding which format is the best is not straightforward. It all depends on the case of use.

Case 1: If you are using animated icons on your website that plays on “hover,” “click,” or “morph,” it is better to proceed with Lottie JSON format.

Case 2: If you are using animated icons on your website that plays on a loop that are located on a solid background, it is better to proceed with MP4 format.

Case 4: If you are using animated icons in video materials composed with external editing software, you can go with MP4 or Adobe After Effects format

Lottie JSON
  • Not easy to implement

  • Micro: 20-100 kb

  • Vector quality

  • High-quality color support

  • Sharp corners with transparency

  • Supports all animation triggers

  • Consumes CPU processing power to display animated graphics

GIF file
  • Easy to implement

  • High: 1000-3000 kb

  • Raster quality

  • Low-quality color support

  • Pixelated corners with transparency

  • Works only with loop or one-play

  • Buffers only one time

MP4 file
  • Easy to implement

  • Low: 100-200kb

  • Raster quality

  • High-quality color support

  • Transparency not supported

  • Works only with loop or one-play

  • Buffers only one time

Consider avoiding GIF format

We are all familiar with GIFs. Meme culture and social media support made them famous. The biggest problem with GIFs is that the format itself is dated and relies on old-fashioned compression techniques to get file sizes down. None of this is an issue for sending funny gifs to your friends, but it may not be optimal for web graphics. GIF files are heavyweight and might be 1 - 3 MB in size, which takes some time to load. The color quality on the edges of gifs sometimes suffers as well. On top of that, they are not optimized to be interactive.

The only reason to use GIFs is in places that don’t support JSON Lottie files or MP4 autoplay, like presentations or newsletters.