║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Icon Cloud date: 2024-05-24 description: An interactive 3D tag cloud component author: dillionverma published: true

<ComponentPreview name="icon-cloud-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/icon-cloud

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="icon-cloud" /> </Steps> </TabsContent> </Tabs>

With Images

<ComponentPreview name="icon-cloud-demo-2" />

With SVG Icons

<ComponentPreview name="icon-cloud-demo-3" />

Usage

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

<div className="relative overflow-hidden">
  <IconCloud images={images} />
</div>

Props

| Prop | Type | Default | Description | | -------- | ------------------- | ------- | ------------------------------------------ | | icons | React.ReactNode[] | [] | Array of icons to render in the cloud | | images | string[] | [] | Array of image URLs to render in the cloud |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║