---
title: "ConfettiIcon — Free Framer component · Best of Framer"
description: "Free Framer component · by Helen Statsevich · Effects. Confetti Icon adds a playful, on-hover particle burst around any icon."
canonical: "https://framer.elliotli.dev/component/confettiicon"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/ConfettiIcon

# ConfettiIcon

[View on Framer](https://framer.com/marketplace/components/confettiicon/?via=elliot-li)

![ConfettiIcon preview image 1](https://framer.elliotli.dev/og/component/confettiicon/39c1920f79108e32/1600x1200.jpg)

## Summary

Confetti Icon adds a playful, on-hover particle burst around any icon.

## Description

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

1.  Add **Confetti Icon** to a fixed-size frame (e.g., 64×64 or 80×80).
    
2.  Pick **Emoji** or toggle **Use Custom SVG** and upload your file.
    
3.  Choose **Animation Direction** and (for outward) set **Outward Direction**.
    
4.  Adjust **Particle Count**, **Spread Distance**, and **Duration**.
    
5.  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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4941

## Details

- **Author**: Helen Statsevich
- **Published**: 2025-10-03
- **Updated**: 2025-10-03
- **Added**: 2025-09-26
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo