Sajjad Dashti
Ecco Icon
An Animated Icon PackMy Role: Graphic Designer, UI/UX Designer, Motion Designer, Developer
Duration: July 2024 - Present
Description: Ecco Icons is my latest major project—a platform showcasing animated icons designed in After Effects and exported via Lottie. It’s a free project, supported entirely by donations.
Project Brief
Ecco Icons is my latest major project—a platform featuring animated icons crafted in After Effects and exported using Lottie. It’s a free project, sustained entirely by donations. The animations are minimalistic, monochromatic, and perfectly suited for enhancing the UI of apps and websites.
Problem
Microinteractions and small details matter—they’re what set superstar apps apart from mediocre ones. Unfortunately, many animated icon packs are hidden behind paywalls.
Solution
Ecco Icons aims to address this issue by offering an ever-expanding collection of minimal animated icons that are 100% free—and will remain free forever. The project is sustained solely by donations.
User Interface - User Experience
Following Jakob’s Law of UX, I didn’t reinvent the wheel or confuse users. The website’s user experience mirrors that of major paid platforms, ensuring familiarity. Users can browse icons, click on the ones they like, and download them in .lottie, .json, .png, .svg, or .aep formats—simple and straightforward. Each icon also has a shareable link, with no unnecessary complexity. Plus, there’s no need to log in or register, keeping the user journey as seamless as possible.
Designing and Animating Icons
The icons are designed to be minimal and perfectly suited for website and app UIs. I kept details to a minimum to ensure they remain clear and recognizable even at small sizes. Each icon is monochromatic by default, but I provide the .aep source file, allowing designers to customize the colors to fit their needs.
The design follows a common icon grid standard, similar to Material Design, ensuring consistency and compatibility. Each animation lasts just 3 seconds, making it ideal for seamless looping.
The icons maintain a consistent style, making them ideal for use as a cohesive pack in app and website UIs. They all feature rounded corners, uniform line width, and a friendly, harmonious design.
Website Development
The Ecco Icon website is developed using Gatsby, a React-based static site generator. For styling, I used Tailwind CSS, and for animated icons, I integrated the Dotlottie-react library. The site is proudly hosted on Netlify.
Initially, I planned to let users change the color of animated icons directly on the platform. However, the results were often unpredictable and inconsistent across different icons and Lottie libraries. Due to these limitations, I decided to remove the feature and instead provide the .aep file, allowing users to customize colors in After Effects. Interestingly, this approach aligns with what many major paid animated icon packs offer.
Figma Plugin Development
I developed a Figma plugin for Ecco Icon to help designers easily incorporate the Ecco Icon pack into their workflow. This plugin allows users to add SVG versions of the icons directly to their designs. The icons are hosted on GitHub Pages, and I designed the plugin's styling to be perfectly consistent with the website.
Ongoing Evolution
This project is never truly "done"—and I hope it never will be. My goal is to continuously expand the icon pack, adding new icons over time.
Throughout this journey, I’ve gained valuable insights into microinteractions, best practices for icon design, and maintaining visual consistency. More importantly, I’ve deepened my understanding of icon animation—exploring the best techniques, the nuances of animating for Lottie, and how to navigate its limitations.
The book Microinteractions by Dan Saffer and the work of the legendary Japanese graphic designer Yukio Ota have been key inspirations, alongside countless articles and resources that shaped this project.