Social buttons

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

Finder component

Type: basic

Result
HTML

<!-- 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>

Type: solid

Result
HTML

<!-- 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>

Type: translucent

Result
HTML

<!-- 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>

Type: border

Result
HTML

<!-- 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>

Round shape

Result
HTML

<!-- 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>

Sizing

Result
HTML

<!-- 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>

Light version

Result
HTML

<!-- 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>