ConfettiIcon
A plug-and-play hover effect that bursts emoji or custom SVG icons for micro-delight on buttons, badges, and CTAs. Fully configurable direction, spread, timing.
Made with Workshop
Build your own component with AI
Confetti Icon adds a playful, on-hover particle burst around any icon. Choose between emoji or your own SVG file and control how particles fly—outward (all sides / up / down / sides), inward (implode), or orbital (circular loop). Fine-tune particle count, spread distance, duration, and the main icon’s hover behavior (scale, pulse, circular, bounce). Designed for quick wins: drop it on a fixed-size frame, style the background (optional circular chip), and you’re done.
Best for:
Micro-interactions on CTAs, social buttons, feature badges, pricing highlights, success states, and celebratory UI moments.
Key features
Emoji or custom SVG particles (upload SVG).
Three motion modes: Outward, Inward, Circular.
Direction cones for outward bursts: All Sides / Up / Down / Sides.
Main icon hover styles: Scale / Pulse / Circular / Bounce.
Controls for particle count, spread, duration, icon size, and colors.
Background chip with optional rounded styling.
Runs only on hover (no static renderer noise in previews).
How to use
Add Confetti Icon to a fixed-size frame (e.g., 64×64 or 80×80).
Pick Emoji or toggle Use Custom SVG and upload your file.
Choose Animation Direction and (for outward) set Outward Direction.
Adjust Particle Count, Spread Distance, and Duration.
Optional: set Background to create a circular chip and tune Hover Animation.
Tips & best practices
Performance: Keep particle count ≤ 16 for busy pages or mobile targets.
Accessibility: Use it as decoration; keep your button label as real text.
Design rhythm: Match Duration to other micro-interactions (0.6–0.9s feels snappy).
Branding: Upload a simple monochrome SVG for crisp particle silhouettes.
