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
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.
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).
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.
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.
