Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/icon-setimport { 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>
);
}