Icon Set

Component 138

About

Icon Set Grid Clean, minimal collection of social and productivity icons arranged in a grid layout. Enhances navigation and quick access to platforms. Ideal for dashboards, portfolios, or landing pages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Icon Set to your project and fits it to your theme.

Code

How Icon Set is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { IconGrid, IconGridItem } from "@/components/ui/icon-set";
import {
  Apple,
  Twitter,
  Github,
  Figma,
  Slack,
  Gitlab,
  Youtube,
  Linkedin,
  Dribbble,
  Twitch,
  Facebook,
  Instagram,
} from "lucide-react";

// Helper to create an icon component with consistent styling
const IconWrapper = ({ children }: { children: React.ReactNode }) => (
  <div className="h-12 w-12 text-foreground/80 transition-transform duration-300 group-hover:scale-110 group-hover:text-foreground">
    {children}
  </div>
);

// Sample data for the demo
const socialIcons: IconGridItem[] = [
  { id: "apple", icon: <IconWrapper><Apple className="h-full w-full" /></IconWrapper>, name: "Apple" },
  { id: "twitter", icon: <IconWrapper><Twitter className="h-full w-full" /></IconWrapper>, name: "Twitter" },
  { id: "github", icon: <IconWrapper><Github className="h-full w-full" /></IconWrapper>, name: "GitHub" },
  { id: "figma", icon: <IconWrapper><Figma className="h-full w-full" /></IconWrapper>, name: "Figma" },
  { id: "slack", icon: <IconWrapper><Slack className="h-full w-full" /></IconWrapper>, name: "Slack" },
  { id: "gitlab", icon: <IconWrapper><Gitlab className="h-full w-full" /></IconWrapper>, name: "GitLab" },
  { id: "youtube", icon: <IconWrapper><Youtube className="h-full w-full" /></IconWrapper>, name: "YouTube" },
  { id: "linkedin", icon: <IconWrapper><Linkedin className="h-full w-full" /></IconWrapper>, name: "LinkedIn" },
  { id: "dribbble", icon: <IconWrapper><Dribbble className="h-full w-full" /></IconWrapper>, name: "Dribbble" },
  { id: "twitch", icon: <IconWrapper><Twitch className="h-full w-full" /></IconWrapper>, name: "Twitch" },
  { id: "facebook", icon: <IconWrapper><Facebook className="h-full w-full" /></IconWrapper>, name: "Facebook" },
  { id: "instagram", icon: <IconWrapper><Instagram className="h-full w-full" /></IconWrapper>, name: "Instagram" },
];

export default function IconGridDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <IconGrid items={socialIcons} />
    </div>
  );
}