React Icon Button

React icon button with particle burst and glow effects on activation. Lucide icons with smooth animations, TypeScript support, and shadcn/ui styling.

React

Framer Motion

Lucide React

Building icon-based interactions?

Join our Discord community for help from other developers.

Icon buttons are everywhere—like buttons, favorite stars, bookmark icons. But most are just static SVGs that change color on click. Boring. No feedback. No delight. Meanwhile, users expect that Instagram-style heart explosion or Twitter's star burst. This React component gives you particle explosions, glow effects, and smooth animations that make every click feel special.

Particle burst on activation

Click to trigger particle explosions and glow effects with smooth spring animations:

Loading component...

'use client'; import * as React from 'react';import {  motion,  AnimatePresence,  type HTMLMotionProps,  type Transition,} from 'motion/react'; import { cn } from '@/lib/utils'; const sizes = {  default: 'size-8 [&_svg]:size-5',  sm: 'size-6 [&_svg]:size-4',  md: 'size-10 [&_svg]:size-6',  lg: 'size-12 [&_svg]:size-7',}; type IconButtonProps = Omit<HTMLMotionProps<'button'>, 'color'> & {  icon: React.ElementType;  active?: boolean;  className?: string;  animate?: boolean;  size?: keyof typeof sizes;  color?: [number, number, number];  transition?: Transition;}; function IconButton({  icon: Icon,  className,  active = false,  animate = true,  size = 'default',  color = [59, 130, 246],  transition = { type: 'spring', stiffness: 300, damping: 15 },  ...props}: IconButtonProps) {  return (    <motion.button      data-slot="icon-button"      className={cn(        `group/icon-button cursor-pointer relative inline-flex size-10 shrink-0 rounded-full hover:bg-[var(--icon-button-color)]/10 active:bg-[var(--icon-button-color)]/20 text-[var(--icon-button-color)]`,        sizes[size],        className,      )}      whileHover={{ scale: 1.05 }}      whileTap={{ scale: 0.95 }}      style={        {          '--icon-button-color': `rgb(${color[0]}, ${color[1]}, ${color[2]})`,        } as React.CSSProperties      }      {...props}    >      <motion.div        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 stroke-muted-foreground group-hover/icon-button:stroke-[var(--icon-button-color)]"        aria-hidden="true"      >        {React.createElement(Icon as React.ComponentType<any>, {          className: active ? 'fill-[var(--icon-button-color)]' : 'fill-transparent'        })}      </motion.div>       <AnimatePresence mode="wait">        {active && (          <motion.div            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[var(--icon-button-color)] fill-[var(--icon-button-color)]"            aria-hidden="true"            initial={{ opacity: 0, scale: 0 }}            animate={{ opacity: 1, scale: 1 }}            exit={{ opacity: 0, scale: 0 }}            transition={transition}          >            {React.createElement(Icon as React.ComponentType<any>)}          </motion.div>        )}      </AnimatePresence>       <AnimatePresence>        {animate && active && (          <>            <motion.div              className="absolute inset-0 z-10 rounded-full "              style={{                background: `radial-gradient(circle, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.4) 0%, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0) 70%)`,              }}              initial={{ scale: 1.2, opacity: 0 }}              animate={{ scale: [1.2, 1.8, 1.2], opacity: [0, 0.3, 0] }}              transition={{ duration: 1.2, ease: 'easeInOut' }}            />            <motion.div              className="absolute inset-0 z-10 rounded-full"              style={{                boxShadow: `0 0 10px 2px rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.6)`,              }}              initial={{ scale: 1, opacity: 0 }}              animate={{ scale: [1, 1.5], opacity: [0.8, 0] }}              transition={{ duration: 0.8, ease: 'easeOut' }}            />            {[...Array(6)].map((_, i) => (              <motion.div                key={i}                className="absolute w-1 h-1 rounded-full bg-[var(--icon-button-color)]"                initial={{ x: '50%', y: '50%', scale: 0, opacity: 0 }}                animate={{                  x: `calc(50% + ${Math.cos((i * Math.PI) / 3) * 30}px)`,                  y: `calc(50% + ${Math.sin((i * Math.PI) / 3) * 30}px)`,                  scale: [0, 1, 0],                  opacity: [0, 1, 0],                }}                transition={{ duration: 0.8, delay: i * 0.05, ease: 'easeOut' }}              />            ))}          </>        )}      </AnimatePresence>    </motion.button>  );} export { IconButton, sizes, type IconButtonProps };

Built for React applications with TypeScript and Next.js. Works with any Lucide icon—hearts, stars, bookmarks, thumbs up, you name it. The particle burst uses Framer Motion for physics-based animations that feel natural. RGB color system lets you match any brand. Works seamlessly with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/icon-button.json

npx shadcn@latest add https://www.shadcn.io/registry/icon-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/icon-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/icon-button.json

Usage

import { IconButton } from "@/components/ui/icon-button";
import { Heart, Star, Bookmark, ThumbsUp } from "lucide-react";

export default function SocialActions() {
  const [liked, setLiked] = useState(false);
  const [starred, setStarred] = useState(false);
  
  return (
    <div className="flex gap-4">
      {/* Heart with red particles */}
      <IconButton
        icon={Heart}
        active={liked}
        color={[239, 68, 68]}  // red-500
        onClick={() => setLiked(!liked)}
        size="md"
      />
      
      {/* Star with golden particles */}
      <IconButton
        icon={Star}
        active={starred}
        color={[251, 191, 36]}  // amber-400
        onClick={() => setStarred(!starred)}
        animate={true}
      />
      
      {/* Bookmark without animations */}
      <IconButton
        icon={Bookmark}
        active={bookmarked}
        color={[59, 130, 246]}  // blue-500
        animate={false}  // No particles, just color change
      />
    </div>
  );
}

Why most icon buttons are lifeless

Developers just toggle a fill color and call it done. Or they add a weak scale animation that nobody notices. The problem? Users are conditioned by social media to expect visual rewards. That heart should explode. That star should burst. These micro-delights trigger dopamine and keep users engaged.

This React component handles the complex animation orchestration: particle physics, glow effects, color transitions, and spring animations. The particles aren't random—they burst outward with physics-based trajectories. The glow pulses with perfect timing. It's the difference between a button that functions and one that delights.

Plus, the RGB color system means you're not locked into preset colors. Match your brand exactly. Create custom themes. Change colors dynamically based on state.

Examples

Different Icons & Colors

Popular icon combinations with matching particle colors:

Loading component...

import React, { useState } from "react";import { IconButton } from "@/components/ui/shadcn-io/icon-button";import { Heart, Star, Bookmark, ThumbsUp, Bell } from "lucide-react";const Example = () => {  const [states, setStates] = useState({    heart: false,    star: false,    bookmark: false,    thumbs: false,    bell: false,  });  const toggleState = (key: keyof typeof states) => {    setStates(prev => ({ ...prev, [key]: !prev[key] }));  };  return (    <div className="flex items-center justify-center gap-6 p-8">      {/* Like button with red burst */}      <div className="flex flex-col items-center gap-2">        <IconButton          icon={Heart}          active={states.heart}          color={[239, 68, 68]} // red-500          onClick={() => toggleState("heart")}          size="md"        />        <span className="text-xs text-muted-foreground">Like</span>      </div>      {/* Star rating with golden particles */}      <div className="flex flex-col items-center gap-2">        <IconButton          icon={Star}          active={states.star}          color={[251, 191, 36]} // amber-400          onClick={() => toggleState("star")}          size="md"        />        <span className="text-xs text-muted-foreground">Star</span>      </div>      {/* Bookmark with blue glow */}      <div className="flex flex-col items-center gap-2">        <IconButton          icon={Bookmark}          active={states.bookmark}          color={[59, 130, 246]} // blue-500          onClick={() => toggleState("bookmark")}          size="md"        />        <span className="text-xs text-muted-foreground">Save</span>      </div>      {/* Thumbs up with green success */}      <div className="flex flex-col items-center gap-2">        <IconButton          icon={ThumbsUp}          active={states.thumbs}          color={[34, 197, 94]} // green-500          onClick={() => toggleState("thumbs")}          size="md"        />        <span className="text-xs text-muted-foreground">Helpful</span>      </div>      {/* Bell notification with purple */}      <div className="flex flex-col items-center gap-2">        <IconButton          icon={Bell}          active={states.bell}          color={[168, 85, 247]} // purple-500          onClick={() => toggleState("bell")}          size="md"        />        <span className="text-xs text-muted-foreground">Notify</span>      </div>    </div>  );};export default Example;

'use client'; import * as React from 'react';import {  motion,  AnimatePresence,  type HTMLMotionProps,  type Transition,} from 'motion/react'; import { cn } from '@/lib/utils'; const sizes = {  default: 'size-8 [&_svg]:size-5',  sm: 'size-6 [&_svg]:size-4',  md: 'size-10 [&_svg]:size-6',  lg: 'size-12 [&_svg]:size-7',}; type IconButtonProps = Omit<HTMLMotionProps<'button'>, 'color'> & {  icon: React.ElementType;  active?: boolean;  className?: string;  animate?: boolean;  size?: keyof typeof sizes;  color?: [number, number, number];  transition?: Transition;}; function IconButton({  icon: Icon,  className,  active = false,  animate = true,  size = 'default',  color = [59, 130, 246],  transition = { type: 'spring', stiffness: 300, damping: 15 },  ...props}: IconButtonProps) {  return (    <motion.button      data-slot="icon-button"      className={cn(        `group/icon-button cursor-pointer relative inline-flex size-10 shrink-0 rounded-full hover:bg-[var(--icon-button-color)]/10 active:bg-[var(--icon-button-color)]/20 text-[var(--icon-button-color)]`,        sizes[size],        className,      )}      whileHover={{ scale: 1.05 }}      whileTap={{ scale: 0.95 }}      style={        {          '--icon-button-color': `rgb(${color[0]}, ${color[1]}, ${color[2]})`,        } as React.CSSProperties      }      {...props}    >      <motion.div        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 stroke-muted-foreground group-hover/icon-button:stroke-[var(--icon-button-color)]"        aria-hidden="true"      >        {React.createElement(Icon as React.ComponentType<any>, {          className: active ? 'fill-[var(--icon-button-color)]' : 'fill-transparent'        })}      </motion.div>       <AnimatePresence mode="wait">        {active && (          <motion.div            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[var(--icon-button-color)] fill-[var(--icon-button-color)]"            aria-hidden="true"            initial={{ opacity: 0, scale: 0 }}            animate={{ opacity: 1, scale: 1 }}            exit={{ opacity: 0, scale: 0 }}            transition={transition}          >            {React.createElement(Icon as React.ComponentType<any>)}          </motion.div>        )}      </AnimatePresence>       <AnimatePresence>        {animate && active && (          <>            <motion.div              className="absolute inset-0 z-10 rounded-full "              style={{                background: `radial-gradient(circle, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.4) 0%, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0) 70%)`,              }}              initial={{ scale: 1.2, opacity: 0 }}              animate={{ scale: [1.2, 1.8, 1.2], opacity: [0, 0.3, 0] }}              transition={{ duration: 1.2, ease: 'easeInOut' }}            />            <motion.div              className="absolute inset-0 z-10 rounded-full"              style={{                boxShadow: `0 0 10px 2px rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.6)`,              }}              initial={{ scale: 1, opacity: 0 }}              animate={{ scale: [1, 1.5], opacity: [0.8, 0] }}              transition={{ duration: 0.8, ease: 'easeOut' }}            />            {[...Array(6)].map((_, i) => (              <motion.div                key={i}                className="absolute w-1 h-1 rounded-full bg-[var(--icon-button-color)]"                initial={{ x: '50%', y: '50%', scale: 0, opacity: 0 }}                animate={{                  x: `calc(50% + ${Math.cos((i * Math.PI) / 3) * 30}px)`,                  y: `calc(50% + ${Math.sin((i * Math.PI) / 3) * 30}px)`,                  scale: [0, 1, 0],                  opacity: [0, 1, 0],                }}                transition={{ duration: 0.8, delay: i * 0.05, ease: 'easeOut' }}              />            ))}          </>        )}      </AnimatePresence>    </motion.button>  );} export { IconButton, sizes, type IconButtonProps };

Size Variants

Four sizes optimized for different UI contexts and touch targets:

Loading component...

import React, { useState } from "react";import { IconButton } from "@/components/ui/shadcn-io/icon-button";import { Heart } from "lucide-react";const Example = () => {  const [states, setStates] = useState({    sm: false,    default: false,    md: false,    lg: false,  });  const toggleState = (key: keyof typeof states) => {    setStates(prev => ({ ...prev, [key]: !prev[key] }));  };  return (    <div className="flex items-center justify-center gap-8 p-8">      {/* Small - Inline with text (16px icon) */}      <div className="flex flex-col items-center gap-3">        <IconButton          icon={Heart}          active={states.sm}          color={[239, 68, 68]}          onClick={() => toggleState("sm")}          size="sm"        />        <div className="text-center">          <span className="text-xs font-medium">Small</span>          <p className="text-xs text-muted-foreground">16px icon</p>        </div>      </div>      {/* Default - Standard UI (20px icon) */}      <div className="flex flex-col items-center gap-3">        <IconButton          icon={Heart}          active={states.default}          color={[239, 68, 68]}          onClick={() => toggleState("default")}          size="default"        />        <div className="text-center">          <span className="text-xs font-medium">Default</span>          <p className="text-xs text-muted-foreground">20px icon</p>        </div>      </div>      {/* Medium - Touch-friendly (24px icon) */}      <div className="flex flex-col items-center gap-3">        <IconButton          icon={Heart}          active={states.md}          color={[239, 68, 68]}          onClick={() => toggleState("md")}          size="md"        />        <div className="text-center">          <span className="text-xs font-medium">Medium</span>          <p className="text-xs text-muted-foreground">24px icon</p>        </div>      </div>      {/* Large - Hero sections (28px icon) */}      <div className="flex flex-col items-center gap-3">        <IconButton          icon={Heart}          active={states.lg}          color={[239, 68, 68]}          onClick={() => toggleState("lg")}          size="lg"        />        <div className="text-center">          <span className="text-xs font-medium">Large</span>          <p className="text-xs text-muted-foreground">28px icon</p>        </div>      </div>    </div>  );};export default Example;

'use client'; import * as React from 'react';import {  motion,  AnimatePresence,  type HTMLMotionProps,  type Transition,} from 'motion/react'; import { cn } from '@/lib/utils'; const sizes = {  default: 'size-8 [&_svg]:size-5',  sm: 'size-6 [&_svg]:size-4',  md: 'size-10 [&_svg]:size-6',  lg: 'size-12 [&_svg]:size-7',}; type IconButtonProps = Omit<HTMLMotionProps<'button'>, 'color'> & {  icon: React.ElementType;  active?: boolean;  className?: string;  animate?: boolean;  size?: keyof typeof sizes;  color?: [number, number, number];  transition?: Transition;}; function IconButton({  icon: Icon,  className,  active = false,  animate = true,  size = 'default',  color = [59, 130, 246],  transition = { type: 'spring', stiffness: 300, damping: 15 },  ...props}: IconButtonProps) {  return (    <motion.button      data-slot="icon-button"      className={cn(        `group/icon-button cursor-pointer relative inline-flex size-10 shrink-0 rounded-full hover:bg-[var(--icon-button-color)]/10 active:bg-[var(--icon-button-color)]/20 text-[var(--icon-button-color)]`,        sizes[size],        className,      )}      whileHover={{ scale: 1.05 }}      whileTap={{ scale: 0.95 }}      style={        {          '--icon-button-color': `rgb(${color[0]}, ${color[1]}, ${color[2]})`,        } as React.CSSProperties      }      {...props}    >      <motion.div        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 stroke-muted-foreground group-hover/icon-button:stroke-[var(--icon-button-color)]"        aria-hidden="true"      >        {React.createElement(Icon as React.ComponentType<any>, {          className: active ? 'fill-[var(--icon-button-color)]' : 'fill-transparent'        })}      </motion.div>       <AnimatePresence mode="wait">        {active && (          <motion.div            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[var(--icon-button-color)] fill-[var(--icon-button-color)]"            aria-hidden="true"            initial={{ opacity: 0, scale: 0 }}            animate={{ opacity: 1, scale: 1 }}            exit={{ opacity: 0, scale: 0 }}            transition={transition}          >            {React.createElement(Icon as React.ComponentType<any>)}          </motion.div>        )}      </AnimatePresence>       <AnimatePresence>        {animate && active && (          <>            <motion.div              className="absolute inset-0 z-10 rounded-full "              style={{                background: `radial-gradient(circle, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.4) 0%, rgba(${color[0]}, ${color[1]}, ${color[2]}, 0) 70%)`,              }}              initial={{ scale: 1.2, opacity: 0 }}              animate={{ scale: [1.2, 1.8, 1.2], opacity: [0, 0.3, 0] }}              transition={{ duration: 1.2, ease: 'easeInOut' }}            />            <motion.div              className="absolute inset-0 z-10 rounded-full"              style={{                boxShadow: `0 0 10px 2px rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.6)`,              }}              initial={{ scale: 1, opacity: 0 }}              animate={{ scale: [1, 1.5], opacity: [0.8, 0] }}              transition={{ duration: 0.8, ease: 'easeOut' }}            />            {[...Array(6)].map((_, i) => (              <motion.div                key={i}                className="absolute w-1 h-1 rounded-full bg-[var(--icon-button-color)]"                initial={{ x: '50%', y: '50%', scale: 0, opacity: 0 }}                animate={{                  x: `calc(50% + ${Math.cos((i * Math.PI) / 3) * 30}px)`,                  y: `calc(50% + ${Math.sin((i * Math.PI) / 3) * 30}px)`,                  scale: [0, 1, 0],                  opacity: [0, 1, 0],                }}                transition={{ duration: 0.8, delay: i * 0.05, ease: 'easeOut' }}              />            ))}          </>        )}      </AnimatePresence>    </motion.button>  );} export { IconButton, sizes, type IconButtonProps };

Features

Particle burst animations with physics-based trajectories and customizable colors
Radial glow effects pulsing outward from the icon center on activation
Any Lucide icon support with automatic sizing and consistent styling
RGB color system for exact brand matching and dynamic theming
Four size presets optimized for different UI densities and touch targets
Smooth spring animations for natural press and release interactions
TypeScript definitions with complete prop types and Lucide icon compatibility
Controlled animation toggle allowing static or animated state changes
Accessible button semantics with proper ARIA attributes and keyboard support

API Reference

IconButton

The main component for animated icon button interactions.

Prop	Type	Default	Description
`icon`	`React.ElementType`	required	Any Lucide React icon component
`active`	`boolean`	`false`	Current activation state
`animate`	`boolean`	`true`	Enable particle and glow animations
`size`	`"sm" \| "default" \| "md" \| "lg"`	`"default"`	Button and icon size preset
`color`	`[number, number, number]`	`[59, 130, 246]`	RGB color values for theme
`transition`	`Transition`	`{ type: "spring", stiffness: 300, damping: 15 }`	Spring animation config
`onClick`	`() => void`	-	Click handler for state changes
`className`	`string`	-	Additional CSS classes
`...props`	`ButtonHTMLAttributes`	-	All native button props supported

Size Specifications

Each size is optimized for specific use cases:

Size	Button	Icon	Touch Target	Use Case
`sm`	24px	16px	44px padded	Inline actions, dense UI
`default`	32px	20px	44px	Standard interactions
`md`	40px	24px	48px	Mobile-first, touch UI
`lg`	48px	28px	56px	Hero sections, CTAs

Color System

RGB arrays for precise color control:

// Popular color combinations
const colors = {
  red: [239, 68, 68],      // red-500
  pink: [236, 72, 153],    // pink-500
  orange: [249, 115, 22],  // orange-500
  amber: [251, 191, 36],   // amber-400
  yellow: [250, 204, 21],  // yellow-400
  green: [34, 197, 94],    // green-500
  blue: [59, 130, 246],    // blue-500
  purple: [168, 85, 247],  // purple-500
  gray: [107, 114, 128],   // gray-500
};

Common gotchas

Particle performance on mobile: The particle burst creates multiple DOM elements. On low-end devices with many buttons, consider disabling animations (animate={false}) or reducing particle count in the component.

Touch target sizing: Even the sm size maintains a 44px touch target through padding. Don't override this with custom styles—it's there for accessibility.

Color array format: Colors must be RGB arrays, not hex strings or CSS colors. Convert hex to RGB: #ef4444 becomes [239, 68, 68]. There are online converters if needed.

Icon import requirements: Icons must be imported from lucide-react, not inlined SVGs. The component expects Lucide's consistent props interface for proper sizing.

Active state management: The component doesn't manage state internally. You must track active state and update it in the onClick handler. This gives you full control but requires state setup.

Animation cleanup: Rapidly clicking can create multiple particle bursts. The component handles cleanup, but very fast clicking might cause visual overlap. This is intentional for enthusiastic users.

Explore other interactive button components for React applications:

React Icon Button

Particle burst on activation

Installation

Usage

Why most icon buttons are lifeless

Examples

Different Icons & Colors

Size Variants

Features

API Reference

IconButton

Size Specifications

Color System

Common gotchas

You might also like

GitHub Stars Button

Ripple Button

Liquid Button

Copy Button

Questions developers actually ask

On this page

React Icon Button