Display links to your social network accounts with these icon buttons.
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' />
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' />
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' />
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' />
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 />
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' />
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 />