SocialIcons

Circular icon buttons for social media links. Available in multiple types with hover and focus states.

When to use

check_circleWhen to use

  • For linking to social media profiles
  • In profile headers or footers
  • When showing a row of social links
  • For brand/identity icons

cancelWhen not to use

  • For navigation (use NavItem instead)
  • For actions (use Button instead)
  • When you need text alongside the icon

All Types

Default

Logo
LinkedIn
Medium
Emplifi
Chodilove

Hover States

All Types

Logo
LinkedIn
Medium
Emplifi
Chodilove

Focus States

Examples

Logo
LinkedIn

Usage

tsx
import { SocialIcons } from '@/components/SocialIcons';

// Different types
<SocialIcons type="logo" aria-label="Vilkus logo" />
<SocialIcons type="linkedin" aria-label="LinkedIn" />
<SocialIcons type="medium" aria-label="Medium" />

// As link
<SocialIcons 
  type="linkedin" 
  href="https://linkedin.com/in/username"
  aria-label="LinkedIn profile"
/>

Props

PropTypeDefaultDescription
type'logo' | 'linkedin' | 'medium' | 'emplifi' | 'chodilove''logo'Social platform type
hoverbooleanfalseControlled hover state
aria-labelstring—Accessible label for screen readers

Accessibility

  • Always provide aria-label for screen readers
  • Uses <a> element when href is provided
  • Focus state is clearly visible with border highlight
  • Supports keyboard navigation