Buy now
Social buttons
Display links to your social network accounts with these icon buttons.
Around component
Type: solid
<!-- Facebook -->
<a href="#" class="social-btn sb-facebook">
<i class="fe-facebook"></i>
</a>
<!-- Twitter -->
<a href="#" class="social-btn sb-twitter">
<i class="fe-twitter"></i>
</a>
<!-- Instagram -->
<a href="#" class="social-btn sb-instagram">
<i class="fe-instagram"></i>
</a>
<!-- Google -->
<a href="#" class="social-btn sb-google">
<i class="fe-google"></i>
</a>
<!-- LinkedIn -->
<a href="#" class="social-btn sb-linkedin">
<i class="fe-linkedin"></i>
</a>
<!-- Pinterest -->
<a href="#" class="social-btn sb-pinterest">
<i class="fe-pinterest"></i>
</a>
<!-- Tumblr -->
<a href="#" class="social-btn sb-tumblr">
<i class="fe-tumblr"></i>
</a>
<!-- Behance -->
<a href="#" class="social-btn sb-behance">
<i class="fe-behance"></i>
</a>
<!-- Dribbble -->
<a href="#" class="social-btn sb-dribbble">
<i class="fe-dribbble"></i>
</a>
<!-- VKontakte -->
<a href="#" class="social-btn sb-vk">
<i class="fe-vk"></i>
</a>
<!-- Odnoklassniki -->
<a href="#" class="social-btn sb-odnoklassniki">
<i class="fe-odnoklassniki"></i>
</a>
<!-- Skype -->
<a href="#" class="social-btn sb-skype">
<i class="fe-skype"></i>
</a>
<!-- Hangouts -->
<a href="#" class="social-btn sb-hangouts">
<i class="fe-hangouts"></i>
</a>
<!-- Messenger -->
<a href="#" class="social-btn sb-messenger">
<i class="fe-messenger"></i>
</a>
<!-- Viber -->
<a href="#" class="social-btn sb-viber">
<i class="fe-viber"></i>
</a>
<!-- Telegram -->
<a href="#" class="social-btn sb-telegram">
<i class="fe-telegram"></i>
</a>
<!-- YouTube -->
<a href="#" class="social-btn sb-youtube">
<i class="fe-youtube"></i>
</a>
<!-- Figma -->
<a href="#" class="social-btn sb-figma">
<i class="fe-figma"></i>
</a>
<!-- Vimeo -->
<a href="#" class="social-btn sb-vimeo">
<i class="fe-vimeo"></i>
</a>
<!-- WeChat -->
<a href="#" class="social-btn sb-wechat">
<i class="fe-wechat"></i>
</a>
<!-- GitHub -->
<a href="#" class="social-btn sb-github">
<i class="fe-github"></i>
</a>
<!-- GitLab -->
<a href="#" class="social-btn sb-gitlab">
<i class="fe-gitlab"></i>
</a>
<!-- PayPal -->
<a href="#" class="social-btn sb-paypal">
<i class="fe-paypal"></i>
</a>
<!-- Slack -->
<a href="#" class="social-btn sb-slack">
<i class="fe-slack"></i>
</a>
<!-- Trello -->
<a href="#" class="social-btn sb-trello">
<i class="fe-trello"></i>
</a>
<!-- Twitch -->
<a href="#" class="social-btn sb-twitch">
<i class="fe-twitch"></i>
</a>
<!-- RSS -->
<a href="#" class="social-btn sb-rss">
<i class="fe-rss"></i>
</a>// Facebook
a(href="#").social-btn.sb-facebook
i.fe-facebook
// Twitter
a(href="#").social-btn.sb-twitter
i.fe-twitter
// Instagram
a(href="#").social-btn.sb-instagram
i.fe-instagram
// Google
a(href="#").social-btn.sb-google
i.fe-google
// LinkedIn
a(href="#").social-btn.sb-linkedin
i.fe-linkedin
// Pinterest
a(href="#").social-btn.sb-pinterest
i.fe-pinterest
// Tumblr
a(href="#").social-btn.sb-tumblr
i.fe-tumblr
// Behance
a(href="#").social-btn.sb-behance
i.fe-behance
// Dribbble
a(href="#").social-btn.sb-dribbble
i.fe-dribbble
// VKontakte
a(href="#").social-btn.sb-vk
i.fe-vk
// Odnoklassniki
a(href="#").social-btn.sb-odnoklassniki
i.fe-odnoklassniki
// Skype
a(href="#").social-btn.sb-skype
i.fe-skype
Hangouts
a(href="#").social-btn.sb-hangouts
i.fe-hangouts
// Messenger
a(href="#").social-btn.sb-messenger
i.fe-messenger
// Viber
a(href="#").social-btn.sb-viber
i.fe-viber
// Telegram
a(href="#").social-btn.sb-telegram
i.fe-telegram
// YouTube
a(href="#").social-btn.sb-youtube
i.fe-youtube
// Figma
a(href="#").social-btn.sb-figma
i.fe-figma
// Vimeo
a(href="#").social-btn.sb-vimeo
i.fe-vimeo
// WeChat
a(href="#").social-btn.sb-wechat
i.fe-wechat
// GitHub
a(href="#").social-btn.sb-github
i.fe-github
// GitLab
a(href="#").social-btn.sb-gitlab
i.fe-gitlab
// PayPal
a(href="#").social-btn.sb-paypal
i.fe-paypal
// Slack
a(href="#").social-btn.sb-slack
i.fe-slack
// Trello
a(href="#").social-btn.sb-trello
i.fe-trello
// Twitch
a(href="#").social-btn.sb-twitch
i.fe-twitch
// RSS
a(href="#").social-btn.sb-rss
i.fe-rss
Type: outline
<!-- Facebook -->
<a href="#" class="social-btn sb-outline sb-facebook">
<i class="fe-facebook"></i>
</a>
<!-- Twitter -->
<a href="#" class="social-btn sb-outline sb-twitter">
<i class="fe-twitter"></i>
</a>
<!-- Instagram -->
<a href="#" class="social-btn sb-outline sb-instagram">
<i class="fe-instagram"></i>
</a>
<!-- Google -->
<a href="#" class="social-btn sb-outline sb-google">
<i class="fe-google"></i>
</a>
<!-- LinkedIn -->
<a href="#" class="social-btn sb-outline sb-linkedin">
<i class="fe-linkedin"></i>
</a>
<!-- Pinterest -->
<a href="#" class="social-btn sb-outline sb-pinterest">
<i class="fe-pinterest"></i>
</a>
<!-- Tumblr -->
<a href="#" class="social-btn sb-outline sb-tumblr">
<i class="fe-tumblr"></i>
</a>
<!-- Behance -->
<a href="#" class="social-btn sb-outline sb-behance">
<i class="fe-behance"></i>
</a>
<!-- Dribbble -->
<a href="#" class="social-btn sb-outline sb-dribbble">
<i class="fe-dribbble"></i>
</a>
<!-- VKontakte -->
<a href="#" class="social-btn sb-outline sb-vk">
<i class="fe-vk"></i>
</a>
<!-- Odnoklassniki -->
<a href="#" class="social-btn sb-outline sb-odnoklassniki">
<i class="fe-odnoklassniki"></i>
</a>
<!-- Skype -->
<a href="#" class="social-btn sb-outline sb-skype">
<i class="fe-skype"></i>
</a>
<!-- Hangouts -->
<a href="#" class="social-btn sb-outline sb-hangouts">
<i class="fe-hangouts"></i>
</a>
<!-- Messenger -->
<a href="#" class="social-btn sb-outline sb-messenger">
<i class="fe-messenger"></i>
</a>
<!-- Viber -->
<a href="#" class="social-btn sb-outline sb-viber">
<i class="fe-viber"></i>
</a>
<!-- Telegram -->
<a href="#" class="social-btn sb-outline sb-telegram">
<i class="fe-telegram"></i>
</a>
<!-- YouTube -->
<a href="#" class="social-btn sb-outline sb-youtube">
<i class="fe-youtube"></i>
</a>
<!-- Figma -->
<a href="#" class="social-btn sb-outline sb-figma">
<i class="fe-figma"></i>
</a>
<!-- Vimeo -->
<a href="#" class="social-btn sb-outline sb-vimeo">
<i class="fe-vimeo"></i>
</a>
<!-- WeChat -->
<a href="#" class="social-btn sb-outline sb-wechat">
<i class="fe-wechat"></i>
</a>
<!-- GitHub -->
<a href="#" class="social-btn sb-outline sb-github">
<i class="fe-github"></i>
</a>
<!-- GitLab -->
<a href="#" class="social-btn sb-outline sb-gitlab">
<i class="fe-gitlab"></i>
</a>
<!-- PayPal -->
<a href="#" class="social-btn sb-outline sb-paypal">
<i class="fe-paypal"></i>
</a>
<!-- Slack -->
<a href="#" class="social-btn sb-outline sb-slack">
<i class="fe-slack"></i>
</a>
<!-- Trello -->
<a href="#" class="social-btn sb-outline sb-trello">
<i class="fe-trello"></i>
</a>
<!-- Twitch -->
<a href="#" class="social-btn sb-outline sb-twitch">
<i class="fe-twitch"></i>
</a>
<!-- RSS -->
<a href="#" class="social-btn sb-outline sb-rss">
<i class="fe-rss"></i>
</a>// Facebook
a(href="#").social-btn.sb-outline.sb-facebook
i.fe-facebook
// Twitter
a(href="#").social-btn.sb-outline.sb-twitter
i.fe-twitter
// Instagram
a(href="#").social-btn.sb-outline.sb-instagram
i.fe-instagram
// Google
a(href="#").social-btn.sb-outline.sb-google
i.fe-google
// LinkedIn
a(href="#").social-btn.sb-outline.sb-linkedin
i.fe-linkedin
// Pinterest
a(href="#").social-btn.sb-outline.sb-pinterest
i.fe-pinterest
// Tumblr
a(href="#").social-btn.sb-outline.sb-tumblr
i.fe-tumblr
// Behance
a(href="#").social-btn.sb-outline.sb-behance
i.fe-behance
// Dribbble
a(href="#").social-btn.sb-outline.sb-dribbble
i.fe-dribbble
// VKontakte
a(href="#").social-btn.sb-outline.sb-vk
i.fe-vk
// Odnoklassniki
a(href="#").social-btn.sb-outline.sb-odnoklassniki
i.fe-odnoklassniki
// Skype
a(href="#").social-btn.sb-outline.sb-skype
i.fe-skype
Hangouts
a(href="#").social-btn.sb-outline.sb-hangouts
i.fe-hangouts
// Messenger
a(href="#").social-btn.sb-outline.sb-messenger
i.fe-messenger
// Viber
a(href="#").social-btn.sb-outline.sb-viber
i.fe-viber
// Telegram
a(href="#").social-btn.sb-outline.sb-telegram
i.fe-telegram
// YouTube
a(href="#").social-btn.sb-outline.sb-youtube
i.fe-youtube
// Figma
a(href="#").social-btn.sb-outline.sb-figma
i.fe-figma
// Vimeo
a(href="#").social-btn.sb-outline.sb-vimeo
i.fe-vimeo
// WeChat
a(href="#").social-btn.sb-outline.sb-wechat
i.fe-wechat
// GitHub
a(href="#").social-btn.sb-outline.sb-github
i.fe-github
// GitLab
a(href="#").social-btn.sb-outline.sb-gitlab
i.fe-gitlab
// PayPal
a(href="#").social-btn.sb-outline.sb-paypal
i.fe-paypal
// Slack
a(href="#").social-btn.sb-outline.sb-slack
i.fe-slack
// Trello
a(href="#").social-btn.sb-outline.sb-trello
i.fe-trello
// Twitch
a(href="#").social-btn.sb-outline.sb-twitch
i.fe-twitch
// RSS
a(href="#").social-btn.sb-outline.sb-rss
i.fe-rss
Round shape
<!-- Round solid button -->
<a href="#" class="social-btn sb-round sb-facebook">
<i class="fe-facebook"></i>
</a>
<!-- Round outline button -->
<a href="#" class="social-btn sb-round sb-outline sb-facebook">
<i class="fe-facebook"></i>
</a>// Round solid button
a(href="#").social-btn.sb-round.sb-facebook
i.fe-facebook
// Round outline button
a(href="#").social-btn.sb-round.sb-outline.sb-facebook
i.fe-facebook
Sizing
<!-- Solid large button -->
<a href="#" class="social-btn sb-dribbble sb-lg">
<i class="fe-dribbble"></i>
</a>
<!-- Solid medium button -->
<a href="#" class="social-btn sb-dribbble">
<i class="fe-dribbble"></i>
</a>
<!-- Solid small button -->
<a href="#" class="social-btn sb-dribbble sb-sm">
<i class="fe-dribbble"></i>
</a>
<!-- Outline large button -->
<a href="#" class="social-btn sb-instagram sb-outline sb-lg">
<i class="fe-instagram"></i>
</a>
<!-- Outline medium button -->
<a href="#" class="social-btn sb-instagram sb-outline">
<i class="fe-instagram"></i>
</a>
<!-- Outline small button -->
<a href="#" class="social-btn sb-instagram sb-outline sb-sm">
<i class="fe-instagram"></i>
</a>
<!-- Round solid large button -->
<a href="#" class="social-btn sb-skype sb-round sb-lg">
<i class="fe-skype"></i>
</a>
<!-- Round solid medium button -->
<a href="#" class="social-btn sb-skype sb-round">
<i class="fe-skype"></i>
</a>
<!-- Round solid small button -->
<a href="#" class="social-btn sb-skype sb-round sb-sm">
<i class="fe-skype"></i>
</a>
<!-- Round outline large button -->
<a href="#" class="social-btn sb-pinterest sb-round sb-outline sb-lg">
<i class="fe-pinterest"></i>
</a>
<!-- Round outline medium button -->
<a href="#" class="social-btn sb-pinterest sb-round sb-outline">
<i class="fe-pinterest"></i>
</a>
<!-- Round outline small button -->
<a href="#" class="social-btn sb-pinterest sb-round sb-outline sb-sm">
<i class="fe-pinterest"></i>
</a>// Solid large button
a(href="#").social-btn.sb-dribbble.sb-lg
i.fe-dribbble
// Solid medium button
a(href="#").social-btn.sb-dribbble
i.fe-dribbble
// Solid small button
a(href="#").social-btn.sb-dribbble.sb-sm
i.fe-dribbble
// Outline large button
a(href="#").social-btn.sb-instagram.sb-outline.sb-lg
i.fe-instagram
// Outline medium button
a(href="#").social-btn.sb-instagram.sb-outline
i.fe-instagram
// Outline small button
a(href="#").social-btn.sb-instagram.sb-outline.sb-sm
i.fe-instagram
// Round solid large button
a(href="#").social-btn.sb-skype.sb-round.sb-lg
i.fe-skype
// Round solid medium button
a(href="#").social-btn.sb-skype.sb-round
i.fe-skype
// Round solid small button
a(href="#").social-btn.sb-skype.sb-round.sb-sm
i.fe-skype
// Round outline large button
a(href="#").social-btn.sb-pinterest.sb-round.sb-outline.sb-lg
i.fe-pinterest
// Round outline medium button
a(href="#").social-btn.sb-pinterest.sb-round.sb-outline
i.fe-pinterest
// Round outline small button
a(href="#").social-btn.sb-pinterest.sb-round.sb-outline.sb-sm
i.fe-pinterest
Light version
<!-- Solid light button -->
<a href="#" class="social-btn sb-facebook sb-light">
<i class="fe-facebook"></i>
</a>
<!-- Outline light button -->
<a href="#" class="social-btn sb-outline sb-facebook sb-light">
<i class="fe-facebook"></i>
</a>// Solid light button
a(href="#").social-btn.sb-facebook.sb-light
i.fe-facebook
// Outline light button
a(href="#").social-btn.sb-outline.sb-facebook.sb-light
i.fe-facebook