Socials

Add links to social media platforms with branded icons

npm create webcore@latest add Socials

Use the Socials component to add social links to your page with visually recognizable branded icons. They improve accessibility as users can easily recognize social media brands, and they also save space compared to using text while providing an improved visual look. The icons are provided by Icons8. All icons are 24x24 by default.

<Socials links={[
    'https://twitter.com',
    'https://facebook.com',
    'https://youtube.com'
]} />

The component expects a single links prop that defines an array of social media links. Based on the link, the component will automatically render the correct social media icon. If you use an unsupported platform, the component render the following fallback icon:

<Socials links={['https://webcoreui.dev']} />

To change the fallback icon, you can update the website.svg file in your icons folder.

Size and Colors

The Socials component uses the Icon component, meaning you can use the size, theme, and color props to set the size of icons and customize their colors.

<Socials links={['https://x.com']} size={26} />
<Socials links={['https://x.com']} size={28} />
<Socials links={['https://x.com']} size={30} />
<Socials links={['https://x.com']} size={32} />

<Socials links={['https://x.com']} theme="info" />
<Socials links={['https://x.com']} theme="success" />
<Socials links={['https://x.com']} theme="warning" />
<Socials links={['https://x.com']} theme="alert" />

<Socials links={['https://x.com']} color="#32e3a0" />
<Socials links={['https://x.com']} color="#32cae3" />
<Socials links={['https://x.com']} color="#ad74f7" />
<Socials links={['https://x.com']} color="#ff89aa" />

Supported Platforms

The component supports the following list of platforms out of the box:

You can find additional social media icons on Icons8. If you need to extend the component, simply add the icons into your icons folder, then reference it inside iconMap.ts. Make sure that the name of the import matches the domain of the platform. For example, to add an icon for Tumblr, your import must be called tumblr:

...
import tumblr from './icons/tumblr.svg?raw'

export const iconMap = {
    ...,
    tumblr
}

API

type SocialsProps = {
    links: string[]
    className?: string
} & Omit<IconProps, 'type' | 'iconSet'>