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 AWS servers.

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?

When it comes to implementing animated icons in your projects, the best format to use depends on the specific use case. Here are some guidelines to help you make the right choice:

Case 1: If you want to use animated icons on your website that play on "intro," "hover," or "morph" events, it's best to use the Lottie JSON format.

Case 2: If you want to use animated icons on your website that play on a loop and are located on a solid background, the MP4 or WEBP format is a better choice.

Case 3: When it comes to using animated icons in presentation slides, GIFs are usually the most practical choice. You can find out more about using GIFs in presentations at this link.

Case 4: If you're working with external editing software to create video materials with animated icons, you have the option of using either the MP4 or Adobe After Effects format.

By carefully considering your use case and choosing the right format accordingly, you can ensure that your animated icons will be presented in the best possible way, no matter where they're used.

Lottie JSON

  • Require basic coding skills to implement

  • Micro: 20-100 kb

  • Vector quality

  • High-quality color support

  • Sharp corners with transparency

  • Supports all animation triggers

  • High CPU usage

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