Icon Cloud

​

Installation

npx shadcn@latest add @magicui/icon-cloud

​

Usage

​

With Images

import { IconCloud } from "@/components/ui/icon-cloud"

const images = [
  "https://example.com/logo1.png",
  "https://example.com/logo2.png",
  "https://example.com/logo3.png",
]

export default function Example() {
  return (
    <div className="relative overflow-hidden">
      <IconCloud images={images} />
    </div>
  )
}

​

With SVG Icons

import { IconCloud } from "@/components/ui/icon-cloud"
import { ReactIcon, NodeIcon, TypeScriptIcon } from "./icons"

const icons = [<ReactIcon />, <NodeIcon />, <TypeScriptIcon />]

export default function Example() {
  return (
    <div className="relative overflow-hidden">
      <IconCloud icons={icons} />
    </div>
  )
}

​

Props

​

Features

• Interactive 3D rotation
• Click icons to bring them to focus
• Drag to rotate the sphere
• Auto-rotation based on mouse position
• Smooth animations with easing
• Depth-based scaling and opacity
• Support for both SVG icons and images
• Canvas-based rendering for performance

​

Interaction

• Drag: Click and drag to manually rotate the sphere
• Click Icon: Click any icon to smoothly rotate it to the front
• Hover: Move mouse to influence rotation speed and direction

​

Notes

• Icons are distributed using Fibonacci sphere algorithm for even spacing
• Canvas renders at 400x400px by default
• Images are rendered as circles
• Supports CORS for external images
• Automatically pauses rotation when dragging

​

Credits