Social Icons

pnpm dlx @sikka/naseem add social-icons

npx @sikka/naseem add social-icons

yarn dlx @sikka/naseem add social-icons

bunx --bun @sikka/naseem add social-icons

Usage

Import social icons from the social-icons barrel:

import { XformerlyTwitter, LinkedIn, Instagram, WhatsApp } from "@/components/naseem-ui/icons/social-icons"

export default function Example() {
  return (
    <div className="flex gap-4">
      <XformerlyTwitter className="h-6 w-6" />
      <LinkedIn className="h-6 w-6" />
      <Instagram className="h-6 w-6" />
      <WhatsApp className="h-6 w-6" />
    </div>
  )
}

Icon	Component	Import
X / Twitter	`XformerlyTwitter`	`@/components/naseem-ui/icons/social-icons`
LinkedIn	`LinkedIn`	`@/components/naseem-ui/icons/social-icons`
Instagram	`Instagram`	`@/components/naseem-ui/icons/social-icons`
WhatsApp	`WhatsApp`	`@/components/naseem-ui/icons/social-icons`

You can also import individual icons directly:

import { XformerlyTwitter } from "@/components/naseem-ui/icons/x"

Examples

import { XformerlyTwitter, LinkedIn } from "@/components/naseem-ui/icons/social-icons"

export function SocialLinks() {
  return (
    <div className="flex items-center gap-4">
      <a href="https://twitter.com" aria-label="X / Twitter">
        <XformerlyTwitter className="h-5 w-5 hover:text-primary transition-colors" />
      </a>
      <a href="https://linkedin.com" aria-label="LinkedIn">
        <LinkedIn className="h-5 w-5 hover:text-primary transition-colors" />
      </a>
    </div>
  )
}

Colored Icons

<div className="flex items-center gap-4">
  <XformerlyTwitter className="h-8 w-8 text-black dark:text-white" />
  <LinkedIn className="h-8 w-8 text-blue-600" />
  <Instagram className="h-8 w-8 text-pink-600" />
  <WhatsApp className="h-8 w-8 text-green-500" />
</div>

Button with Icon

import { Button } from "@/components/ui/button"
import { XformerlyTwitter } from "@/components/naseem-ui/icons/social-icons"

<Button variant="outline" size="icon">
  <XformerlyTwitter className="h-5 w-5" />
</Button>

Props

All icon components accept standard SVG props:

Prop	Type	Description
`className`	`string`	CSS classes for styling (size, color, etc.)
`style`	`React.CSSProperties`	Inline styles
`width`	`string \| number`	SVG width attribute
`height`	`string \| number`	SVG height attribute
`fill`	`string`	SVG fill color
`stroke`	`string`	SVG stroke color

Best Practices

Accessibility

Always provide accessible labels when using icons as links or buttons:

<button aria-label="Share on Twitter">
  <XformerlyTwitter className="h-5 w-5" />
</button>

<a href="https://linkedin.com" aria-label="Visit our LinkedIn">
  <LinkedIn className="h-6 w-6" />
</a>

Sizing

Use Tailwind's utility classes for consistent sizing:

<XformerlyTwitter className="h-5 w-5" />
<XformerlyTwitter className="h-6 w-6" />

Color

Icons inherit the current text color by default. Use text-* classes to customize:

<div className="text-primary">
  <XformerlyTwitter className="h-6 w-6" />
</div>

<XformerlyTwitter className="h-6 w-6 text-blue-500" />

File Structure

components/naseem-ui/icons/
├── social-icons.tsx   # Barrel re-exports (X, LinkedIn, Instagram, WhatsApp)
├── x.tsx              # X (formerly Twitter) icon
├── linkedin.tsx       # LinkedIn icon
├── instagram.tsx      # Instagram icon
└── whatsapp.tsx       # WhatsApp icon

Social Icons

On this page