Icon Cloud: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add icon-cloud.en

New project or installation trouble? Start here →

Icon Cloud is a React 3D icon cloud (tag sphere) component built with Tailwind CSS. Icons are spread evenly with a Fibonacci sphere, and a requestAnimationFrame loop computes rotation and projection each frame, writing straight to each node's CSS transform. Motion is only used to read the reduced-motion preference, not for the animation itself.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Container sizesize

320

Icon sizeiconSize

Rotation speedspeed

Drag to rotateinteractive

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<IconCloud/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

When to use

Showing your tech stack or supported integrations on a homepage or about page
A "supported languages and frameworks" section for a developer tool
Listing the tools and software you work with on a portfolio page
Partner or sponsor logos on an event or community page (pass image nodes)
Not a good fit: for a clickable or filterable tag list, use Physics Tags or a plain tag list; nodes in the cloud are hidden from assistive technology

Installation

npx webberui@latest add https://webberui.com/r/icon-cloud.en.json

Or, 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} />,
  ]}
/>;

Examples

Use images as nodes

icons accepts any React node, so an <img> works for brand logos or your own artwork. Each node is centered inside an iconSize square box.

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

const stack = ["react", "nextjs", "tailwind", "postgres", "redis", "docker"];

<IconCloud
  iconSize={44}
  icons={stack.map((name) => (
    <img key={name} src={`/logos/${name}.svg`} alt="" width={44} height={44} />
  ))}
/>;

Change the icon color

The default icons stroke with currentColor, and the container defaults to text-neutral-700 (text-neutral-200 in dark mode). Swap the text color through className.

<IconCloud className="text-indigo-600 dark:text-indigo-300" />

Decorative and still

speed={0} stops the auto-spin while keeping drag; add interactive={false} for a fully static decoration.

<IconCloud size={240} iconSize={32} speed={0} interactive={false} />

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)

FAQ

Does it work with the Next.js App Router?

Yes, the file already starts with "use client". The first render uses a fixed initial tilt, so server and client output match, and rotation only starts after mounting.

Does it keep computing after scrolling off screen?

No. The component watches its container with IntersectionObserver and cancels the requestAnimationFrame loop while it is out of view, resuming when it scrolls back. Rotation lives in a ref and is updated per frame without triggering React re-renders.

Icon Cloud