Sajjad Dashti
Lilly Icon
An Animated Rive Icon PackMy Role: Graphic Designer, UI/UX Designer, Motion Designer, Developer
Duration: February 2025 - Present
Description: Lilly Icon is the first icon pack to use Rive technology, delivering SVG-based animated and interactive icons designed specifically for user interfaces.
Project Brief
Lilly Icon is a platform where users can explore and download animated icons built with Rive technology. Rive enables the creation of vector-based, animated, and interactive icons tailored for modern user interfaces. This project is completely free and supported solely through user donations.
Problem
Microinteractions and subtle details make all the difference—they're what elevate great apps above the rest. Yet, many animated icon packs remain locked behind paywalls or too complex to use and customize to match a project's overall style.
Solution
Lilly Icons was created to solve this problem by providing a growing collection of minimal, animated icons that are completely. Built with Rive technology, the icons are easy to customize color in real time, making them seamless to adapt to any design.
User Interface - User Experience
Lilly Icons keeps the user journey simple and seamless—no logins, subscriptions, or payments required. Following Jakob’s Law of UX, the site mirrors the familiar experience of major paid platforms, so users know exactly what to expect. Just browse the icons, click the ones you like, and download them in .riv, .png, or .svg formats. Each icon also comes with a shareable link.
User Flow
A good user flow minimizes steps and eliminates friction wherever possible. In my view, the best user flow is the simplest one. With that in mind, I designed Lilly Icon to keep things incredibly straightforward—completing the core task takes no more than four steps from start to finish.
Designing and Animating Icons
The icons are intentionally minimal, making them ideal for both web and app user interfaces. By limiting visual detail, each icon remains clear and easily recognizable—even at smaller sizes. They are monochromatic by default, but thanks to Rive’s Data Binding feature, developers can easily change their colors at runtime.
The icons are aligned to a 24px grid and include a 2px padding/safe area for animations and effects, creating a 20x20px live area for the static icon. This consistent and adaptable structure ensures the icons can be seamlessly integrated into diverse interfaces.
Website Development
The Lilly Icon website is built with Gatsby, a React-based static site generator. It uses Tailwind CSS for styling and integrates animated icons through the rive-react library. The site is hosted on Netlify for fast and reliable performance.
Figma Plugin Development
To make it easier for designers to use the Lilly Icon pack, I created a Figma plugin that lets users insert SVG versions of the icons directly into their designs. The icons are hosted on GitHub Pages, and the plugin’s interface is styled to match the website for a seamless, cohesive experience.
Ongoing Evolution
This project is a continuous work in progress—and I hope it always will be. My goal is to keep expanding the icon pack by regularly adding new designs.
Along the way, I’ve gained meaningful insights into microinteractions, effective icon design, and maintaining visual consistency. More importantly, I’ve deepened my understanding of animation—refining techniques for Rive, exploring interactivity, and learning what makes animated icons truly impactful.