SCG UI
Bubble Icons16

🫧 Bubble Icons

A stunning interactive bubble icon component that brings your interface to life with smooth animations and customizable glowing effects. Perfect for creating modern, engaging user experiences with beautiful gradient shadows and responsive hover interactions. ✨

Install dependencies

npm i clsx tailwind-merge motion

Add utility file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Code

BubbleIcon.tsx


"use client";

import { cn } from "@/lib/utils";
import { motion } from "framer-motion";
import React from "react";

interface BubbleIconButtonProps {
  icon: React.ReactNode;
  shadow: string;
  className?: string;
  onClick?: () => void;
  animate?: boolean; 
}

export default function BubbleIcon({
  icon,
  shadow,
  className,
  onClick,
  animate = true, 
}: BubbleIconButtonProps) {
  const baseClass = cn(
    "w-30 h-30 rounded-full bg-transparent border border-white/5 relative",
    shadow,
    className
  );

  const iconWrapper = (
    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-15 w-15">
      {icon}
    </div>
  );

  if (animate) {
    return (
      <motion.div
        whileHover={{ scale: 1.1 }}
        onClick={onClick}
        className={baseClass}
      >
        {iconWrapper}
      </motion.div>
    );
  }

  return (
    <div onClick={onClick} className={baseClass}>
      {iconWrapper}
    </div>
  );
}

Props

PropTypeDefaultDescription
iconReact.ReactNode—The icon element to display inside the bubble
shadowstring—Tailwind or custom class for shadow styling
classNamestring—Additional CSS classes for custom styling
onClick() => void—Function to run when the bubble is clicked
animatebooleantrueEnables hover scaling animation when true
Bubble Icons16