Interactive Icon Cloud

effects

Grid cloud of modern framework technology icons with magnetic zoom triggers.

#cloud#icons#frameworks#tech#stack

Live Interactive Preview

Component Source Code

Select language in the dropdown

IconCloud.tsx

1'use client';
2
3import React from 'react';
4import { FaReact, FaNodeJs, FaPython, FaDocker, FaAws, FaRust } from 'react-icons/fa6';
5import { SiTypescript, SiTailwindcss, SiNextdotjs } from 'react-icons/si';
6
7export default function IconCloud() {
8  const icons = [
9    { icon: FaReact, color: 'text-cyan-400' },
10    { icon: SiNextdotjs, color: 'text-white' },
11    { icon: SiTypescript, color: 'text-blue-400' },
12    { icon: SiTailwindcss, color: 'text-teal-400' },
13    { icon: FaNodeJs, color: 'text-emerald-400' },
14    { icon: FaPython, color: 'text-yellow-400' },
15    { icon: FaDocker, color: 'text-blue-500' },
16    { icon: FaAws, color: 'text-amber-500' },
17    { icon: FaRust, color: 'text-orange-500' },
18  ];
19
20  return (
21    <div className="grid grid-cols-3 gap-4 p-6 select-none max-w-xs">
22      {icons.map((item, idx) => {
23        const Icon = item.icon;
24        return (
25          <div
26            key={idx}
27            className="flex h-14 w-14 items-center justify-center rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-md transition-all duration-300 hover:scale-115 hover:border-cyan-500 hover:shadow-cyan-500/20 cursor-pointer"
28          >
29            <Icon className={`h-6 w-6 ${item.color}`} />
30          </div>
31        );
32      })}
33    </div>
34  );
35}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/IconCloud.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import InteractiveIconCloud from '@/components/effects/IconCloud';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <InteractiveIconCloud />
7    </main>
8  );
9}