SocialIcon

content

An SVG icon component supporting 8+ social platforms: GitHub, Twitter/X, LinkedIn, Behance, Dribbble, Instagram, YouTube, and Website.

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { SocialIcon } from "piece-ui";

2Usage

Basic usage

tsx

1import { SocialIcon } from "piece-ui";
2
3export default function Example() {
4  return (
5    <div className="flex gap-4">
6      <SocialIcon platform="github" href="https://github.com" size={24} />
7      <SocialIcon platform="twitter" href="https://twitter.com" size={24} />
8      <SocialIcon platform="linkedin" href="https://linkedin.com" size={24} />
9      <SocialIcon platform="dribbble" href="https://dribbble.com" size={24} />
10    </div>
11  );
12}

3Props

Prop	Type	Default	Description
`platform`req	`"github" \| "twitter" \| "linkedin" \| "behance" \| "dribbble" \| "instagram" \| "youtube" \| "website"`	—	The social platform to render an icon for.
`size`	`number`	`24`	Icon size in pixels.
`color`	`string`	—	Icon fill/stroke color.
`href`	`string`	—	Wraps the icon in an anchor tag when provided.

NoiseBackground

SectionWrapper