Social buttons

Display links to your social network accounts with these icon buttons.

Finder component

Variant: basic

import SocialButton from '../components/SocialButton'

<SocialButton href='#' brand='airbnb' />
<SocialButton href='#' brand='behance' />
<SocialButton href='#' brand='discord' />
<SocialButton href='#' brand='dribbble' />
<SocialButton href='#' brand='dropbox' />
<SocialButton href='#' brand='facebook-square' />
<SocialButton href='#' brand='facebook' />
<SocialButton href='#' brand='foursquare' />
<SocialButton href='#' brand='github' />
<SocialButton href='#' brand='google-drive' />
<SocialButton href='#' brand='google-play' />
<SocialButton href='#' brand='google' />
<SocialButton href='#' brand='hangouts' />
<SocialButton href='#' brand='instagram' />
<SocialButton href='#' brand='linkedin' />
<SocialButton href='#' brand='medium' />
<SocialButton href='#' brand='messenger' />
<SocialButton href='#' brand='odnoklassniki' />
<SocialButton href='#' brand='paypal' />
<SocialButton href='#' brand='pinterest' />
<SocialButton href='#' brand='rss' />
<SocialButton href='#' brand='skype' />
<SocialButton href='#' brand='slack' />
<SocialButton href='#' brand='snapchat' />
<SocialButton href='#' brand='soundcloud' />
<SocialButton href='#' brand='telegram-circle' />
<SocialButton href='#' brand='telegram' />
<SocialButton href='#' brand='tiktok' />
<SocialButton href='#' brand='tumblr' />
<SocialButton href='#' brand='twitch' />
<SocialButton href='#' brand='twitter' />
<SocialButton href='#' brand='viber' />
<SocialButton href='#' brand='vimeo' />
<SocialButton href='#' brand='vk' />
<SocialButton href='#' brand='wechat' />
<SocialButton href='#' brand='whatsapp' />
<SocialButton href='#' brand='xing' />
<SocialButton href='#' brand='youtube' />
<SocialButton href='#' brand='mail' />
<SocialButton href='#' brand='phone' />

Variant: solid

import SocialButton from '../components/SocialButton'

<SocialButton href='#' variant='solid' brand='airbnb' />
<SocialButton href='#' variant='solid' brand='behance' />
<SocialButton href='#' variant='solid' brand='discord' />
<SocialButton href='#' variant='solid' brand='dribbble' />
<SocialButton href='#' variant='solid' brand='dropbox' />
<SocialButton href='#' variant='solid' brand='facebook-square' />
<SocialButton href='#' variant='solid' brand='facebook' />
<SocialButton href='#' variant='solid' brand='foursquare' />
<SocialButton href='#' variant='solid' brand='github' />
<SocialButton href='#' variant='solid' brand='google-drive' />
<SocialButton href='#' variant='solid' brand='google-play' />
<SocialButton href='#' variant='solid' brand='google' />
<SocialButton href='#' variant='solid' brand='hangouts' />
<SocialButton href='#' variant='solid' brand='instagram' />
<SocialButton href='#' variant='solid' brand='linkedin' />
<SocialButton href='#' variant='solid' brand='medium' />
<SocialButton href='#' variant='solid' brand='messenger' />
<SocialButton href='#' variant='solid' brand='odnoklassniki' />
<SocialButton href='#' variant='solid' brand='paypal' />
<SocialButton href='#' variant='solid' brand='pinterest' />
<SocialButton href='#' variant='solid' brand='rss' />
<SocialButton href='#' variant='solid' brand='skype' />
<SocialButton href='#' variant='solid' brand='slack' />
<SocialButton href='#' variant='solid' brand='snapchat' />
<SocialButton href='#' variant='solid' brand='soundcloud' />
<SocialButton href='#' variant='solid' brand='telegram-circle' />
<SocialButton href='#' variant='solid' brand='telegram' />
<SocialButton href='#' variant='solid' brand='tiktok' />
<SocialButton href='#' variant='solid' brand='tumblr' />
<SocialButton href='#' variant='solid' brand='twitch' />
<SocialButton href='#' variant='solid' brand='twitter' />
<SocialButton href='#' variant='solid' brand='viber' />
<SocialButton href='#' variant='solid' brand='vimeo' />
<SocialButton href='#' variant='solid' brand='vk' />
<SocialButton href='#' variant='solid' brand='wechat' />
<SocialButton href='#' variant='solid' brand='whatsapp' />
<SocialButton href='#' variant='solid' brand='xing' />
<SocialButton href='#' variant='solid' brand='youtube' />
<SocialButton href='#' variant='solid' brand='mail' />
<SocialButton href='#' variant='solid' brand='phone' />

Variant: translucent

import SocialButton from '../components/SocialButton'

<SocialButton href='#' variant='translucent' brand='airbnb' />
<SocialButton href='#' variant='translucent' brand='behance' />
<SocialButton href='#' variant='translucent' brand='discord' />
<SocialButton href='#' variant='translucent' brand='dribbble' />
<SocialButton href='#' variant='translucent' brand='dropbox' />
<SocialButton href='#' variant='translucent' brand='facebook-square' />
<SocialButton href='#' variant='translucent' brand='facebook' />
<SocialButton href='#' variant='translucent' brand='foursquare' />
<SocialButton href='#' variant='translucent' brand='github' />
<SocialButton href='#' variant='translucent' brand='google-drive' />
<SocialButton href='#' variant='translucent' brand='google-play' />
<SocialButton href='#' variant='translucent' brand='google' />
<SocialButton href='#' variant='translucent' brand='hangouts' />
<SocialButton href='#' variant='translucent' brand='instagram' />
<SocialButton href='#' variant='translucent' brand='linkedin' />
<SocialButton href='#' variant='translucent' brand='medium' />
<SocialButton href='#' variant='translucent' brand='messenger' />
<SocialButton href='#' variant='translucent' brand='odnoklassniki' />
<SocialButton href='#' variant='translucent' brand='paypal' />
<SocialButton href='#' variant='translucent' brand='pinterest' />
<SocialButton href='#' variant='translucent' brand='rss' />
<SocialButton href='#' variant='translucent' brand='skype' />
<SocialButton href='#' variant='translucent' brand='slack' />
<SocialButton href='#' variant='translucent' brand='snapchat' />
<SocialButton href='#' variant='translucent' brand='soundcloud' />
<SocialButton href='#' variant='translucent' brand='telegram-circle' />
<SocialButton href='#' variant='translucent' brand='telegram' />
<SocialButton href='#' variant='translucent' brand='tiktok' />
<SocialButton href='#' variant='translucent' brand='tumblr' />
<SocialButton href='#' variant='translucent' brand='twitch' />
<SocialButton href='#' variant='translucent' brand='twitter' />
<SocialButton href='#' variant='translucent' brand='viber' />
<SocialButton href='#' variant='translucent' brand='vimeo' />
<SocialButton href='#' variant='translucent' brand='vk' />
<SocialButton href='#' variant='translucent' brand='wechat' />
<SocialButton href='#' variant='translucent' brand='whatsapp' />
<SocialButton href='#' variant='translucent' brand='xing' />
<SocialButton href='#' variant='translucent' brand='youtube' />
<SocialButton href='#' variant='translucent' brand='mail' />
<SocialButton href='#' variant='translucent' brand='phone' />

Variant: border

import SocialButton from '../components/SocialButton'

<SocialButton href='#' variant='border' brand='airbnb' />
<SocialButton href='#' variant='border' brand='behance' />
<SocialButton href='#' variant='border' brand='discord' />
<SocialButton href='#' variant='border' brand='dribbble' />
<SocialButton href='#' variant='border' brand='dropbox' />
<SocialButton href='#' variant='border' brand='facebook-square' />
<SocialButton href='#' variant='border' brand='facebook' />
<SocialButton href='#' variant='border' brand='foursquare' />
<SocialButton href='#' variant='border' brand='github' />
<SocialButton href='#' variant='border' brand='google-drive' />
<SocialButton href='#' variant='border' brand='google-play' />
<SocialButton href='#' variant='border' brand='google' />
<SocialButton href='#' variant='border' brand='hangouts' />
<SocialButton href='#' variant='border' brand='instagram' />
<SocialButton href='#' variant='border' brand='linkedin' />
<SocialButton href='#' variant='border' brand='medium' />
<SocialButton href='#' variant='border' brand='messenger' />
<SocialButton href='#' variant='border' brand='odnoklassniki' />
<SocialButton href='#' variant='border' brand='paypal' />
<SocialButton href='#' variant='border' brand='pinterest' />
<SocialButton href='#' variant='border' brand='rss' />
<SocialButton href='#' variant='border' brand='skype' />
<SocialButton href='#' variant='border' brand='slack' />
<SocialButton href='#' variant='border' brand='snapchat' />
<SocialButton href='#' variant='border' brand='soundcloud' />
<SocialButton href='#' variant='border' brand='telegram-circle' />
<SocialButton href='#' variant='border' brand='telegram' />
<SocialButton href='#' variant='border' brand='tiktok' />
<SocialButton href='#' variant='border' brand='tumblr' />
<SocialButton href='#' variant='border' brand='twitch' />
<SocialButton href='#' variant='border' brand='twitter' />
<SocialButton href='#' variant='border' brand='viber' />
<SocialButton href='#' variant='border' brand='vimeo' />
<SocialButton href='#' variant='border' brand='vk' />
<SocialButton href='#' variant='border' brand='wechat' />
<SocialButton href='#' variant='border' brand='whatsapp' />
<SocialButton href='#' variant='border' brand='xing' />
<SocialButton href='#' variant='border' brand='youtube' />
<SocialButton href='#' variant='border' brand='mail' />
<SocialButton href='#' variant='border' brand='phone' />

Round shape

import SocialButton from '../components/SocialButton'

{/* Round solid social button */}
<SocialButton href='#' variant='solid' brand='instagram' roundedCircle />

{/* Round solid social button */}
<SocialButton href='#' variant='translucent' brand='instagram' roundedCircle />

{/* Round solid social button */}
<SocialButton href='#' variant='border' brand='instagram' roundedCircle />

Sizing

import SocialButton from '../components/SocialButton'

{/* Small basic social button */}
<SocialButton href='#' brand='dribbble' size='sm' />

{/* Normal basic social button */}
<SocialButton href='#' brand='dribbble' />

{/* Large basic social button */}
<SocialButton href='#' brand='dribbble' size='lg' />

{/* Extra large basic social button */}
<SocialButton href='#' brand='dribbble' size='xl' />

{/* Small solid social button */}
<SocialButton href='#' brand='twitter' variant='solid' size='sm' />

{/* Normal solid social button */}
<SocialButton href='#' brand='twitter' variant='solid' />

{/* Large solid social button */}
<SocialButton href='#' brand='twitter' variant='solid' size='lg' />

{/* Extra large solid social button */}
<SocialButton href='#' brand='twitter' variant='solid' size='xl' />

{/* Small translucent social button */}
<SocialButton href='#' brand='skype' variant='translucent' size='sm' />

{/* Normal translucent social button */}
<SocialButton href='#' brand='skype' variant='translucent' />

{/* Large translucent social button */}
<SocialButton href='#' brand='skype' variant='translucent' size='lg' />

{/* Extra large translucent social button */}
<SocialButton href='#' brand='skype' variant='translucent' size='xl' />

{/* Small border social button */}
<SocialButton href='#' brand='google' variant='border' size='sm' />

{/* Normal border social button */}
<SocialButton href='#' brand='google' variant='border' />

{/* Large border social button */}
<SocialButton href='#' brand='google' variant='border' size='lg' />

{/* Extra large border social button */}
<SocialButton href='#' brand='google' variant='border' size='xl' />

Light version

import SocialButton from '../components/SocialButton'

{/* Light basic social button */}
<SocialButton href='#' brand='facebook' light />

{/* Light solid social button */}
<SocialButton href='#' brand='facebook' variant='solid' light />

{/* Light translucent social button */}
<SocialButton href='#' brand='facebook' variant='translucent' light />

{/* Light border social button */}
<SocialButton href='#' brand='facebook' variant='border' light />