Formats

Thanks to our robust customization tool built into the library, you can customize icons with color, stroke width, and animation. Icons can be rendered in 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

Lottie JSON

The default Lordicon format which renders in vector quality. It contains all the necessary data about the animation. For the smallest file size, use the "Default" export option. For animation sequences, use the "Raw" export option.

Embed HTML

This simplified web implementation sources icons (Lottie JSON) directly from Lordicon's AWS servers. For optimal performance, please follow our web documentation.

GIF

An animated GIF is available in various sizes ranging from 100 x 100px to 1000 x 1000px with a solid or transparent background. However, renders with a transparent background may become pixelated due to low performance of the format.

PNG (Generated)

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

SVG (Generated)

A vector image representing the given frame of the icon animation. Note: This format fails to work correctly in graphic design softwares, however works ok on the web.

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)

SVG

A source SVG design of an icon with editable stroke widths.

Adobe After Effect

A project source file with Essential Graphics connected that allows quick and easy customization.

MOGRT

A motion graphics template with a fully editable animated icon that can be easily imported and customized within Adobe software programs.

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

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 add animated icons to your website or mobile app as an interactive experience, then go with the fully interactive Lottie format. Icons exported in this format are lightweight and super sharp.

Case 2: If you're planning to use animated icons as a website loader, it's best to use a tiny WEBP or GIF format. Lottie animation may cause a delay in the icon's appearance as it requires loading the player first. However, you can mask the delay with a smooth appearance, but that would require visiting our web documentation.

Case 3: When it comes to using animated icons in presentation slides, GIFs are usually the most practical choice. For more information on using GIFs in presentations, you can refer to this link.

Case 4: If you're using external editing software to create video materials with animated icons, you can choose between the MP4, MOGRT 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-200 KB

  • Raster quality

  • High-quality color support

  • Transparency not supported

  • Works only with loop or one-play

  • Buffers only one time

Export animation frame to static SVG or PNG

Easily export a specific animation frame as a still image. Pause the player and download icon as PNG or SVG.

To save a specific animation frame, follow these steps:

Step 1: Open the main library.

Step 2: Select an icon.

Step 3: In the side menu, stop the player.

Step 4: Select the frame you would like to use.

Step 5: Export image as a PNG or SVG (Lottie)

Please take note that the SVG (Lottie) file, which is an SVG file generated from the Lottie animation, works correctly in web browsers. However, it may encounter issues within graphic design software such as Figma or Adobe Illustrator. If this happens, please consider using a PNG or a rough SVG file instead.