Icon Cloud
An interactive 3D tag / icon sphere cloud that spins on its own and can be dragged to rotate.
Pure CSS 3D transforms spread a set of icons evenly across the surface of a sphere that rotates on its own and can be steered with the mouse or by touch, settling with momentum.
Loading preview…
npx shadcn@latest add https://webberui.com/r/icon-cloud.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
320
40
1
<IconCloud />
Installation
npx shadcn@latest add https://webberui.com/r/icon-cloud.jsonOr, once registries are configured in components.json, install it as @webberui/icon-cloud.
Usage
import { IconCloud } from "@/components/ui/icon-cloud";
<IconCloud size={300} iconSize={38} speed={1} />;Pass custom icon nodes to replace the default set:
import { Github, Twitter, Figma } from "lucide-react";
<IconCloud
icons={[
<Github key="gh" width={40} height={40} />,
<Twitter key="tw" width={40} height={40} />,
<Figma key="fg" width={40} height={40} />,
]}
/>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
icons | React.ReactNode[] | built-in lucide icon set | Icon nodes spread across the sphere |
size | number | 320 | Container edge length (px) |
iconSize | number | 40 | Edge length of each icon (px) |
speed | number | 1 | Automatic rotation speed multiplier; 0 stops it |
interactive | boolean | true | Whether it can be dragged to rotate (pointer devices only) |
className | string | — | Forwarded to the container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the sphere freezes at its initial tilt and both automatic rotation and dragging stop
- The icons are all decorative content and hidden from assistive technology (
aria-hidden)