Icon Cloud

An interactive canvas sphere of icons or images. Drag to rotate, click a node to ease it into focus, and use the play/pause control for WCAG pause support.

Ships with a local Simple Icons set via defaultIconCloudImages— no CDN at runtime. Pass icons for React nodes (Lucide, custom SVG) instead.

Default

Local tech icons on a Fibonacci sphere — drag to spin, click an icon to focus, or pause with the control.

Loading…

Installation

CLI

npx @sonojs/ui@latest add icon-cloud

Also needs

npx @sonojs/ui@latest add button

npm i lucide-react

Usage

page.tsx

"use client"

import {
  defaultIconCloudImages,
  IconCloud,
} from "@/components/3d/icon-cloud"

export default function IconCloudDemo() {
  return (
    <div className="relative flex size-full min-h-[420px] w-full items-center justify-center overflow-hidden rounded-[12px]">
      <IconCloud images={defaultIconCloudImages} />
    </div>
  )
}

Props

Prop	Type	Default	Description
icons	ReactNode[]	-	React icon nodes rendered into the cloud (alternative to images).
images	string[]	-	Image URLs drawn on the sphere. Prefer defaultIconCloudImages for the bundled set.
showControl	boolean	true	Show the play/pause control. Keep enabled unless you provide your own pause UI.
className	string	-	Classes on the relative wrapper around the canvas.