Introduction

Ecco Icon is a project inspired by my passion for the creative community and my personal needs while working on various design projects. All animated icons are crafted in Adobe After Effects and exported using the Bodymovin plugin.

To learn more about the project, visit this page. If you'd like to see the project grow and continue, please consider making a donation. Even the smallest contribution helps keep this project alive.

How to Use

The animated icons in the Ecco Icon pack are created using Lottie, an open-source project supported by LottieFiles, LottieLab, Airbnb, and other companies. Lottie uses SVG-based animations, eliminating the need for heavier and less smooth bitmap formats like .mp4 or .gif.

Each animation comes with both a .json file and a .lottie file. The .lottie format is a newer and more compressed alternative for these animations.

Lottie animations can be implemented on websites, Android apps, and iOS apps.

Additionally, the .aep file (After Effects project file) is provided in case you want to modify the animation or change its colors. .svg and .png files are also included if you prefer to use the icons in a non-animated format.

dotLottie

dotLottie is a modern, optimized format designed to streamline the usage of Lottie animations. Unlike traditional .json files, dotLottie packages animations along with all their necessary assets into a single compressed file, improving performance and simplifying implementation.

LottieFiles has developed a variety of libraries to make implementing Lottie and dotLottie animated icons easier for developers. Below is a list of their tools:

React Library

React Ecco Static is a library that allows you to use the static SVG version of Ecco Icon Pack icons in your React project.

Installation

You can install the library using npm:

npm install react-ecco-static

Or with yarn:

yarn add react-ecco-static

Usage

To use the library, import the icon you want to use and render it in your component:

import { IconName } from 'react-ecco-static';

Please note that icon names in the library follow CamelCase. For example, "arrow-left" becomes "ArrowLeft".

To change the color, pass the color prop to the icon component like this:

<Airplane color="#FF0000" />

Check out the ecco-icon-static page on the NPM website. If you have any ideas or suggestions, feel free to contact me at hi@sajjaddashti.ir.

Platform Compatibility

Ecco Icon is compatible with all platforms supported by Lottie. You can use it on the web (regardless of the technology, such as React, Vue, etc.), as well as in iOS and Android apps.

Caution

Using these animations in Windows apps with Lottie-Windows may cause issues, and Ecco Icon does not officially support this setup. While I haven't tested it directly, many icons rely on Trim Paths (a feature in After Effects), which is not supported by Lottie-Windows. As a result, icons utilizing this feature may experience problems in Windows apps.

Customizing Colors

To change the color of an icon, download the .aep file and import it into the latest version of After Effects to avoid any potential issues. Each animation includes a Null object named "Color Controller," where you can adjust the icon's color through the Effect Controls panel, as shown below.

If you want to export to dotLottie, ensure that the colors are correctly applied in the exported file by using the latest LottieFiles plugin. In the Rendering Settings, make sure to check "Convert Expressions to Keyframes."

Caution

There are online tools that allow you to change the color of Lottie animations without using After Effects. However, be cautious, as some of these tools may cause unexpected rendering issues. I developed a module to change animation colors directly on the Ecco Icon platform and also encountered these unexpected issues in the rendered animations. The exact cause remains unknown to me.

How Licensing Works for Ecco Icon

Ecco Icon is proud to offer a collection of animated icons that are entirely free for use under the Creative Commons Attribution 4.0 International (CC BY 4.0) License. This means you are free to use, share, and even modify these icons in your projects—whether personal or commercial—provided that you give appropriate credit to the creator. Below, I’ll explain how the licensing works in detail and how you can properly provide attribution.

What Does CC BY 4.0 Allow?

The CC BY 4.0 License is designed to give you as much freedom as possible while ensuring that creators are credited for their work. Under this license, you can:

• Use the Icons for Free: The icons can be used in websites, apps, videos, presentations, advertisements, or any other medium you choose.
• Modify the Icons: You are allowed to edit, recolor, resize, or otherwise adapt the icons to suit your needs.
• Distribute the Icons: You can include the icons in your own products, projects, or packages, as long as attribution is provided.
• Use Them Commercially: The icons can be used in commercial projects, such as client work, software products, or advertisements.

What Are Your Obligations?

The only requirement for using Ecco Icon’s animated icons is to provide proper attribution. This ensures that the creator is acknowledged for their work, even when the icons are used in large-scale or commercial projects.

How to Provide Attribution

To comply with the CC BY 4.0 License, you need to include the following details in your attribution:

• Creator’s Name: Mention that the icons were created by Sajjad Dashti.
• Source: Include the name of the platform, Ecco Icon, and ideally provide a link to the website (e.g., https://eccoicon.com).
• License Type: Specify that the icons are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License.

Where Should Attribution Be Placed?

The placement of the attribution depends on how and where the icons are used. Here are some examples:

• Websites and Apps: Add attribution in the footer, credits page, or a relevant section of your website or app.
• Videos: Include the attribution in the credits section or in the video description.
• Presentations: Place the attribution on the slide where the icons are used or on a dedicated credits slide.
• Printed Material: Add the attribution in a visible part of the printed design, such as a footnote or the back cover.

What Happens if You Don’t Provide Attribution?

Failure to provide proper attribution means you are not complying with the terms of the CC BY 4.0 License. If you cannot or do not want to include attribution, you must contact the creator to negotiate separate licensing terms.

Why Attribution Matters

Providing attribution is a small yet meaningful way to support the work of creators. By acknowledging the creator and the platform, you help raise awareness about the project, allowing it to grow and remain free for the community.

If you have any questions about licensing or how to provide attribution, feel free to contact me through my personal email. Thank you for supporting open creativity!

How to Help

Ecco Icon is a passion project created to provide free animated icons for the creative community. It’s entirely free to use, and I’m committed to keeping it that way. However, maintaining and expanding the project requires time, effort, and resources.

Every donation, no matter how small, makes a huge difference. Your support helps cover the costs of maintaining the platform, creating new animated icons, and keeping everything free and accessible for everyone. By contributing, you’re not just supporting me—you’re supporting the entire creative community.