Docs
Social Icons
Social Icons
Customizable social media icons with color and monochrome variants, supporting X, LinkedIn, Instagram, and TikTok with built-in dark mode theming.
0 views
0 downloads
Loading...
Overview
The Social Icons component provides both individual social media icons (SocialIcon) and grouped collections (SocialIcons) with customizable styling. It supports five major platforms: GitHub, X (formerly Twitter), LinkedIn, Instagram, and TikTok. The component offers both colorful brand-accurate icons and monochrome versions that automatically adapt to your theme's color scheme.
Perfect for footers, contact sections, author profiles, and any place where you need to display social media links with consistent, professional styling.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/social-icons.json
Usage
Individual Social Icon
1import { SocialIcon } from "@/registry/components/social-icons"23export default function Example() {4 return (5 <SocialIcon6 platform="x"7 variant="color"8 size={32}9 href="https://x.com/yourhandle"10 />11 )12}
Social Icons Group
1import { SocialIcons } from "@/registry/components/social-icons"23export default function Example() {4 const socialLinks = [5 { platform: "github", href: "https://github.com/yourusername" },6 { platform: "x", href: "https://x.com/yourhandle" },7 { platform: "linkedin", href: "https://linkedin.com/in/yourprofile" },8 { platform: "instagram", href: "https://instagram.com/yourhandle" },9 { platform: "tiktok", href: "https://tiktok.com/@yourhandle" },10 ]1112 return <SocialIcons icons={socialLinks} variant="color" size={28} gap={16} />13}
API Reference
SocialIcon Props
| Name | Type | Default | Description |
|---|---|---|---|
| platform | "github" | "x" | "linkedin" | "instagram" | "tiktok" | - | The social media platform to display |
| variant | "color" | "monochrome" | "color" | Icon style - color shows brand colors, monochrome adapts to theme |
| size | number | 24 | Icon size in pixels |
| href | string | - | Optional URL to link to. When provided, wraps icon in an anchor tag |
| className | string | - | Additional CSS classes |
SocialIcons Props
| Name | Type | Default | Description |
|---|---|---|---|
| icons | Array<{ platform: string; href?: string }> | - | Array of social platform configurations |
| variant | "color" | "monochrome" | "color" | Icon style applied to all icons in the group |
| size | number | 24 | Icon size in pixels applied to all icons |
| gap | number | 16 | Space between icons in pixels |
| className | string | - | Additional CSS classes for the container |
Examples
Color Variant
Loading...
Monochrome Variant
Loading...
