Most icon sets are static, flat, and interchangeable — they communicate meaning but rarely communicate feel. On dark-themed dashboards and product surfaces in particular, icons tend to disappear into the background instead of reinforcing the interface's personality. I wanted to design a system where:

• Icons feel tactile and dimensional rather than flat vector shapes
• Motion is used purposefully, to reinforce what each icon means (a checkmark that draws itself, a radar that sweeps, a bell that shakes) rather than motion for motion's sake
• The system is modular enough to keep growing without breaking visual consistency

Each icon is built around a layered glass aesthetic: a frosted, semi-transparent base card sits on a dark charcoal background, with a soft blue-to-transparent gradient wash across the canvas to unify the set. On top of that glass base, a saturated accent color — signal green, amber yellow, or coral red — carries the icon's core symbol, giving each piece a single strong focal color against the muted glass shell.

Construction details that hold the system together:

• Consistent 512×512 artboards for every icon, so the set drops into any grid at any scale
• Soft drop shadows and inner glows (white/blue at low opacity) to sell the frosted-glass depth without heavy blur performance cost
• A restrained accent palette — each icon uses one dominant color (green for checkmark/wifi/radar/medal, blue for chat/folder, yellow/amber for print/mail, red for love letter) so icons stay legible as a family even when used individually
• Rounded, soft-edged shapes throughout, keeping the whole set feeling tactile rather than sharp or corporate

The animation is where the system earns its name. Rather than hand-keying frame-by-frame animation, every icon uses Figma's native motion tooling directly on the vector layers — keyframing properties like scale, rotation, and stroke path-trim on top of the existing icon components, so the same file that holds the static design also holds the interaction.

A few examples of how motion is used to reinforce meaning:

• Checkmark — the stroke draws itself on with a path-trim animation while the glass badge behind it scales in from 0.8 to 1 with a soft overshoot, timed together so the checkmark feels "confirmed" the instant it lands.
• Radar — the sweep arm rotates a full 360° with an ease-in-out start, while the radius rings pulse a subtle scale-down/scale-up to simulate a signal ping.
• Wifi — the three signal bars and center dot animate in sequence, echoing how a real wifi icon fills up when connecting.
• Notification Bell / Medal / Chat — smaller elements (the bell's dot, the medal's badge, the chat's typing dots) get isolated, looping micro-animations so the icon reads as "alive" without moving the whole shape.

Every animation in the set runs on a 2-second loop, using cubic-bezier easing (0.5, 0, 0.5, 1) for the "settle" portion of each motion, paired with linear holds — giving the set a consistent rhythm and weight so that no single icon feels faster or "twitchier" than the rest, even though each one animates a different property (scale, rotation, or stroke).

The result is a small but growing icon library that behaves like a live product surface rather than a static asset sheet — every icon holds its own personality while staying visually and motion-consistent with the rest of the set. Because the animation lives natively in the Figma file, the library can be handed directly to engineering for implementation (the motion data exports cleanly to code, including easing curves and timing) without a separate animation handoff step.

This is a living library. New icons are being added to the set periodically, following the same glass-shell construction and 2-second motion rhythm established here — the goal is to grow this into a full, animated icon system that can support a real product UI end to end.