Buy now
Social buttons
Display links to your social network accounts with these icon buttons.
Finder component
Type: basic
<!-- Airbnb -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-airbnb"></i>
</a>
<!-- Behance -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-behance"></i>
</a>
<!-- Discord -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-discord"></i>
</a>
<!-- Dribbble -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-dribbble"></i>
</a>
<!-- Dropbox -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-dropbox"></i>
</a>
<!-- Facebook square -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-facebook-square"></i>
</a>
<!-- Facebook -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-facebook"></i>
</a>
<!-- Foursquare -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-foursquare"></i>
</a>
<!-- GitHub -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-github"></i>
</a>
<!-- Google Drive -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-google-drive"></i>
</a>
<!-- Google Play -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-google-play"></i>
</a>
<!-- Google -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-google"></i>
</a>
<!-- Hangouts -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-hangouts"></i>
</a>
<!-- Instagram -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-instagram"></i>
</a>
<!-- LinkedIn -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-linkedin"></i>
</a>
<!-- Medium -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-medium"></i>
</a>
<!-- Messenger -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-messenger"></i>
</a>
<!-- Odnoklassniki -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-odnoklassniki"></i>
</a>
<!-- PayPal -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-paypal"></i>
</a>
<!-- Pinterest -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-pinterest"></i>
</a>
<!-- RSS -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-rss"></i>
</a>
<!-- Skype -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-skype"></i>
</a>
<!-- Slack -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-slack"></i>
</a>
<!-- Snapchat -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-snapchat"></i>
</a>
<!-- SoundCloud -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-soundcloud"></i>
</a>
<!-- Telegram circle -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-telegram-circle"></i>
</a>
<!-- Telegram -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-telegram"></i>
</a>
<!-- TikTok -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-tiktok"></i>
</a>
<!-- Tumblr -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-tumblr"></i>
</a>
<!-- Twitch -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-twitch"></i>
</a>
<!-- Twitter -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-twitter"></i>
</a>
<!-- Viber -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-viber"></i>
</a>
<!-- Vimeo -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-vimeo"></i>
</a>
<!-- VK -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-vk"></i>
</a>
<!-- WeChat -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-wechat"></i>
</a>
<!-- WhatsApp -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-whatsapp"></i>
</a>
<!-- XING -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-xing"></i>
</a>
<!-- YouTube -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-youtube"></i>
</a>
<!-- Email -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-email"></i>
</a>
<!-- Phone -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-phone"></i>
</a>// Airbnb
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-airbnb
// Behance
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-behance
// Discord
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-discord
// Dribbble
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-dribbble
// Dropbox
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-dropbox
// Facebook square
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-facebook-square
// Facebook
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-facebook
// Foursquare
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-foursquare
// GitHub
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-github
// Google Drive
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-google-drive
// Google Play
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-google-play
// Google
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-google
// Hangouts
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-hangouts
// Instagram
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-instagram
// LinkedIn
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-linkedin
// Medium
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-medium
// Messenger
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-messenger
// Odnoklassniki
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-odnoklassniki
// PayPal
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-paypal
// Pinterest
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-pinterest
// RSS
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-rss
// Skype
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-skype
// Slack
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-slack
// Snapchat
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-snapchat
// SoundCloud
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-soundcloud
// Telegram circle
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-telegram-circle
// Telegram
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-telegram
// TikTok
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-tiktok
// Tumblr
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-tumblr
// Twitch
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-twitch
// Twitter
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-twitter
// Viber
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-viber
// Vimeo
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-vimeo
// VK
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-vk
// WeChat
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-wechat
// WhatsApp
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-whatsapp
// XING
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-xing
// YouTube
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-youtube
// Email
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-mail
// Phone
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-phone
Type: solid
<!-- Airbnb -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-airbnb"></i>
</a>
<!-- Behance -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-behance"></i>
</a>
<!-- Discord -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-discord"></i>
</a>
<!-- Dribbble -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-dribbble"></i>
</a>
<!-- Dropbox -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-dropbox"></i>
</a>
<!-- Facebook square -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-facebook-square"></i>
</a>
<!-- Facebook -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-facebook"></i>
</a>
<!-- Foursquare -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-foursquare"></i>
</a>
<!-- GitHub -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-github"></i>
</a>
<!-- Google Drive -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-google-drive"></i>
</a>
<!-- Google Play -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-google-play"></i>
</a>
<!-- Google -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-google"></i>
</a>
<!-- Hangouts -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-hangouts"></i>
</a>
<!-- Instagram -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-instagram"></i>
</a>
<!-- LinkedIn -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-linkedin"></i>
</a>
<!-- Medium -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-medium"></i>
</a>
<!-- Messenger -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-messenger"></i>
</a>
<!-- Odnoklassniki -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-odnoklassniki"></i>
</a>
<!-- PayPal -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-paypal"></i>
</a>
<!-- Pinterest -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-pinterest"></i>
</a>
<!-- RSS -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-rss"></i>
</a>
<!-- Skype -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-skype"></i>
</a>
<!-- Slack -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-slack"></i>
</a>
<!-- Snapchat -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-snapchat"></i>
</a>
<!-- SoundCloud -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-soundcloud"></i>
</a>
<!-- Telegram circle -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-telegram-circle"></i>
</a>
<!-- Telegram -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-telegram"></i>
</a>
<!-- TikTok -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-tiktok"></i>
</a>
<!-- Tumblr -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-tumblr"></i>
</a>
<!-- Twitch -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-twitch"></i>
</a>
<!-- Twitter -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-twitter"></i>
</a>
<!-- Viber -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-viber"></i>
</a>
<!-- Vimeo -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-vimeo"></i>
</a>
<!-- VK -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-vk"></i>
</a>
<!-- WeChat -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-wechat"></i>
</a>
<!-- WhatsApp -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-whatsapp"></i>
</a>
<!-- XING -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-xing"></i>
</a>
<!-- YouTube -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-youtube"></i>
</a>
<!-- Email -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-email"></i>
</a>
<!-- Phone -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-phone"></i>
</a>// Airbnb
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-airbnb
// Behance
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-behance
// Discord
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-discord
// Dribbble
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-dribbble
// Dropbox
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-dropbox
// Facebook square
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-facebook-square
// Facebook
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-facebook
// Foursquare
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-foursquare
// GitHub
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-github
// Google Drive
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-google-drive
// Google Play
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-google-play
// Google
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-google
// Hangouts
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-hangouts
// Instagram
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-instagram
// LinkedIn
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-linkedin
// Medium
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-medium
// Messenger
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-messenger
// Odnoklassniki
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-odnoklassniki
// PayPal
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-paypal
// Pinterest
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-pinterest
// RSS
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-rss
// Skype
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-skype
// Slack
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-slack
// Snapchat
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-snapchat
// SoundCloud
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-soundcloud
// Telegram circle
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-telegram-circle
// Telegram
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-telegram
// TikTok
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-tiktok
// Tumblr
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-tumblr
// Twitch
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-twitch
// Twitter
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-twitter
// Viber
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-viber
// Vimeo
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-vimeo
// VK
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-vk
// WeChat
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-wechat
// WhatsApp
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-whatsapp
// XING
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-xing
// YouTube
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-youtube
// Email
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-mail
// Phone
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-phone
Type: translucent
<!-- Airbnb -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-airbnb"></i>
</a>
<!-- Behance -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-behance"></i>
</a>
<!-- Discord -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-discord"></i>
</a>
<!-- Dribbble -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-dribbble"></i>
</a>
<!-- Dropbox -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-dropbox"></i>
</a>
<!-- Facebook square -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-facebook-square"></i>
</a>
<!-- Facebook -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-facebook"></i>
</a>
<!-- Foursquare -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-foursquare"></i>
</a>
<!-- GitHub -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-github"></i>
</a>
<!-- Google Drive -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-google-drive"></i>
</a>
<!-- Google Play -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-google-play"></i>
</a>
<!-- Google -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-google"></i>
</a>
<!-- Hangouts -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-hangouts"></i>
</a>
<!-- Instagram -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-instagram"></i>
</a>
<!-- LinkedIn -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-linkedin"></i>
</a>
<!-- Medium -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-medium"></i>
</a>
<!-- Messenger -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-messenger"></i>
</a>
<!-- Odnoklassniki -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-odnoklassniki"></i>
</a>
<!-- PayPal -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-paypal"></i>
</a>
<!-- Pinterest -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-pinterest"></i>
</a>
<!-- RSS -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-rss"></i>
</a>
<!-- Skype -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-skype"></i>
</a>
<!-- Slack -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-slack"></i>
</a>
<!-- Snapchat -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-snapchat"></i>
</a>
<!-- SoundCloud -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-soundcloud"></i>
</a>
<!-- Telegram circle -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-telegram-circle"></i>
</a>
<!-- Telegram -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-telegram"></i>
</a>
<!-- TikTok -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-tiktok"></i>
</a>
<!-- Tumblr -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-tumblr"></i>
</a>
<!-- Twitch -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-twitch"></i>
</a>
<!-- Twitter -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-twitter"></i>
</a>
<!-- Viber -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-viber"></i>
</a>
<!-- Vimeo -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-vimeo"></i>
</a>
<!-- VK -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-vk"></i>
</a>
<!-- WeChat -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-wechat"></i>
</a>
<!-- WhatsApp -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-whatsapp"></i>
</a>
<!-- XING -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-xing"></i>
</a>
<!-- YouTube -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-youtube"></i>
</a>
<!-- Email -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-email"></i>
</a>
<!-- Phone -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-phone"></i>
</a>// Airbnb
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-airbnb
// Behance
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-behance
// Discord
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-discord
// Dribbble
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-dribbble
// Dropbox
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-dropbox
// Facebook square
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-facebook-square
// Facebook
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-facebook
// Foursquare
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-foursquare
// GitHub
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-github
// Google Drive
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-google-drive
// Google Play
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-google-play
// Google
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-google
// Hangouts
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-hangouts
// Instagram
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-instagram
// LinkedIn
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-linkedin
// Medium
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-medium
// Messenger
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-messenger
// Odnoklassniki
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-odnoklassniki
// PayPal
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-paypal
// Pinterest
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-pinterest
// RSS
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-rss
// Skype
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-skype
// Slack
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-slack
// Snapchat
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-snapchat
// SoundCloud
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-soundcloud
// Telegram circle
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-telegram-circle
// Telegram
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-telegram
// TikTok
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-tiktok
// Tumblr
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-tumblr
// Twitch
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-twitch
// Twitter
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-twitter
// Viber
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-viber
// Vimeo
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-vimeo
// VK
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-vk
// WeChat
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-wechat
// WhatsApp
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-whatsapp
// XING
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-xing
// YouTube
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-youtube
// Email
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-mail
// Phone
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-phone
Type: border
<!-- Airbnb -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-airbnb"></i>
</a>
<!-- Behance -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-behance"></i>
</a>
<!-- Discord -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-discord"></i>
</a>
<!-- Dribbble -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-dribbble"></i>
</a>
<!-- Dropbox -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-dropbox"></i>
</a>
<!-- Facebook square -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-facebook-square"></i>
</a>
<!-- Facebook -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-facebook"></i>
</a>
<!-- Foursquare -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-foursquare"></i>
</a>
<!-- GitHub -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-github"></i>
</a>
<!-- Google Drive -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-google-drive"></i>
</a>
<!-- Google Play -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-google-play"></i>
</a>
<!-- Google -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-google"></i>
</a>
<!-- Hangouts -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-hangouts"></i>
</a>
<!-- Instagram -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-instagram"></i>
</a>
<!-- LinkedIn -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-linkedin"></i>
</a>
<!-- Medium -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-medium"></i>
</a>
<!-- Messenger -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-messenger"></i>
</a>
<!-- Odnoklassniki -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-odnoklassniki"></i>
</a>
<!-- PayPal -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-paypal"></i>
</a>
<!-- Pinterest -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-pinterest"></i>
</a>
<!-- RSS -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-rss"></i>
</a>
<!-- Skype -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-skype"></i>
</a>
<!-- Slack -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-slack"></i>
</a>
<!-- Snapchat -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-snapchat"></i>
</a>
<!-- SoundCloud -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-soundcloud"></i>
</a>
<!-- Telegram circle -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-telegram-circle"></i>
</a>
<!-- Telegram -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-telegram"></i>
</a>
<!-- TikTok -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-tiktok"></i>
</a>
<!-- Tumblr -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-tumblr"></i>
</a>
<!-- Twitch -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-twitch"></i>
</a>
<!-- Twitter -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-twitter"></i>
</a>
<!-- Viber -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-viber"></i>
</a>
<!-- Vimeo -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-vimeo"></i>
</a>
<!-- VK -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-vk"></i>
</a>
<!-- WeChat -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-wechat"></i>
</a>
<!-- WhatsApp -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-whatsapp"></i>
</a>
<!-- XING -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-xing"></i>
</a>
<!-- YouTube -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-youtube"></i>
</a>
<!-- Email -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-email"></i>
</a>
<!-- Phone -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-phone"></i>
</a>// Airbnb
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-airbnb
// Behance
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-behance
// Discord
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-discord
// Dribbble
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-dribbble
// Dropbox
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-dropbox
// Facebook square
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-facebook-square
// Facebook
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-facebook
// Foursquare
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-foursquare
// GitHub
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-github
// Google Drive
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-google-drive
// Google Play
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-google-play
// Google
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-google
// Hangouts
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-hangouts
// Instagram
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-instagram
// LinkedIn
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-linkedin
// Medium
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-medium
// Messenger
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-messenger
// Odnoklassniki
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-odnoklassniki
// PayPal
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-paypal
// Pinterest
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-pinterest
// RSS
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-rss
// Skype
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-skype
// Slack
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-slack
// Snapchat
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-snapchat
// SoundCloud
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-soundcloud
// Telegram circle
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-telegram-circle
// Telegram
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-telegram
// TikTok
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-tiktok
// Tumblr
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-tumblr
// Twitch
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-twitch
// Twitter
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-twitter
// Viber
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-viber
// Vimeo
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-vimeo
// VK
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-vk
// WeChat
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-wechat
// WhatsApp
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-whatsapp
// XING
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-xing
// YouTube
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-youtube
// Email
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-mail
// Phone
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-phone
Round shape
<!-- Round solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm rounded-circle">
<i class="fi-instagram"></i>
</a>
<!-- Round translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs rounded-circle">
<i class="fi-instagram"></i>
</a>
<!-- Round border icon button -->
<a href="#" class="btn btn-icon btn-light border btn-xs rounded-circle">
<i class="fi-instagram"></i>
</a>// Round solid icon button
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm.rounded-circle
i.fi-instagram
// Round translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs.rounded-circle
i.fi-instagram
// Round border icon button
a(href="#").btn.btn-icon.btn-light.border.btn-xs.rounded-circle
i.fi-instagram
Sizing
<!-- Extra small basic icon button -->
<a href="#" class="btn btn-link py-1 px-2">
<i class="fi-dribbble"></i>
</a>
<!-- Small basic icon button -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
<i class="fi-dribbble"></i>
</a>
<!-- Normal basic icon button -->
<a href="#" class="btn btn-link fs-4 py-1 px-2">
<i class="fi-dribbble"></i>
</a>
<!-- Large basic icon button -->
<a href="#" class="btn btn-link fs-3 py-1 px-2">
<i class="fi-dribbble"></i>
</a>
<!-- Extra small solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary btn-xxs shadow-sm">
<i class="fi-twitter"></i>
</a>
<!-- Small solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
<i class="fi-twitter"></i>
</a>
<!-- Normal solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary btn-sm shadow-sm">
<i class="fi-twitter"></i>
</a>
<!-- Large solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary shadow-sm">
<i class="fi-twitter"></i>
</a>
<!-- Extra small translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xxs">
<i class="fi-skype"></i>
</a>
<!-- Small translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
<i class="fi-skype"></i>
</a>
<!-- Normal translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-sm">
<i class="fi-skype"></i>
</a>
<!-- Large translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary">
<i class="fi-skype"></i>
</a>
<!-- Extra small border icon button -->
<a href="#" class="btn btn-icon btn-light border btn-xxs">
<i class="fi-google"></i>
</a>
<!-- Small border icon button -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
<i class="fi-google"></i>
</a>
<!-- Normal border icon button -->
<a href="#" class="btn btn-icon btn-light border btn-sm">
<i class="fi-google"></i>
</a>
<!-- Large border icon button -->
<a href="#" class="btn btn-icon btn-light border">
<i class="fi-google"></i>
</a>// Extra small basic icon button
a(href="#").btn.btn-link.py-1.px-2
i.fi-dribbble
// Small basic icon button
a(href="#").btn.btn-link.fs-lg.py-1.px-2
i.fi-dribbble
// Normal basic icon button
a(href="#").btn.btn-link.fs-4.py-1.px-2
i.fi-dribbble
// Large basic icon button
a(href="#").btn.btn-link.fs-3.py-1.px-2
i.fi-dribbble
// Extra small solid icon button
a(href="#").btn.btn-icon.btn-light-primary.btn-xxs.shadow-sm
i.fi-twitter
// Small solid icon button
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
i.fi-twitter
// Normal solid icon button
a(href="#").btn.btn-icon.btn-light-primary.btn-sm.shadow-sm
i.fi-twitter
// Large solid icon button
a(href="#").btn.btn-icon.btn-light-primary.shadow-sm
i.fi-twitter
// Extra small translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xxs
i.fi-skype
// Small translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
i.fi-skype
// Normal translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary.btn-sm
i.fi-skype
// Large translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary
i.fi-skype
// Extra small border icon button
a(href="#").btn.btn-icon.btn-light.border.btn-xxs
i.fi-google
// Small border icon button
a(href="#").btn.btn-icon.btn-light.border.btn-xs
i.fi-google
// Normal border icon button
a(href="#").btn.btn-icon.btn-light.border.btn-sm
i.fi-google
// Large border icon button
a(href="#").btn.btn-icon.btn-light.border
i.fi-google
Light version
<!-- Basic light icon button -->
<a href="#" class="btn btn-link btn-light fs-lg py-1 px-2">
<i class="fi-facebook"></i>
</a>
<!-- Translucent light icon button -->
<a href="#" class="btn btn-icon btn-translucent-light btn-xs">
<i class="fi-facebook"></i>
</a>
<!-- Border light icon button -->
<a href="#" class="btn btn-icon btn-outline-light border-light btn-xs">
<i class="fi-facebook"></i>
</a>// Basic light icon button
a(href="#").btn.btn-link.btn-light.fs-lg.py-1.px-2
i.fi-facebook
// Translucent light icon button
a(href="#").btn.btn-icon.btn-translucent-light.btn-xs
i.fi-facebook
// Border light icon button
a(href="#").btn.btn-icon.btn-outline-light.border-light.btn-xs
i.fi-facebook