Social buttons

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

Around component

Solid buttons

<!-- Airbnb -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-airbnb">
  <i class="ai-airbnb"></i>
</a>

<!-- Behance -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-behance">
  <i class="ai-behance"></i>
</a>

<!-- Blogger -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-blogger">
  <i class="ai-blogger"></i>
</a>

<!-- CodePen -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-codepen">
  <i class="ai-codepen"></i>
</a>

<!-- Discord -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-discord">
  <i class="ai-discord"></i>
</a>

<!-- Disqus -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-disqus">
  <i class="ai-disqus"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-dribbble">
  <i class="ai-dribbble"></i>
</a>

<!-- Dropbox -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-dropbox">
  <i class="ai-dropbox"></i>
</a>

<!-- Evernote -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-evernote">
  <i class="ai-evernote"></i>
</a>

<!-- Facebook -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-facebook">
  <i class="ai-facebook"></i>
</a>

<!-- Flickr -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-flickr">
  <i class="ai-flickr"></i>
</a>

<!-- Foursquare -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-foursquare">
  <i class="ai-foursquare"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-github">
  <i class="ai-github"></i>
</a>

<!-- Google -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-google">
  <i class="ai-google"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-hangouts">
  <i class="ai-hangouts"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-instagram">
  <i class="ai-instagram"></i>
</a>

<!-- Kickstarter -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-kickstarter">
  <i class="ai-kickstarter"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-linkedin">
  <i class="ai-linkedin"></i>
</a>

<!-- Medium -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-medium">
  <i class="ai-medium"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-messenger">
  <i class="ai-messenger"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-odnoklassniki">
  <i class="ai-odnoklassniki"></i>
</a>

<!-- Patreon -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-patreon">
  <i class="ai-patreon"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-pinterest">
  <i class="ai-pinterest"></i>
</a>

<!-- Quora -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-quora">
  <i class="ai-quora"></i>
</a>

<!-- Reddit -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-reddit">
  <i class="ai-reddit"></i>
</a>

<!-- Skype -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-skype">
  <i class="ai-skype"></i>
</a>

<!-- Slack -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-slack">
  <i class="ai-slack"></i>
</a>

<!-- Snapchat -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-snapchat">
  <i class="ai-snapchat"></i>
</a>

<!-- SoundCloud -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-soundcloud">
  <i class="ai-soundcloud"></i>
</a>

<!-- Spotify -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-spotify">
  <i class="ai-spotify"></i>
</a>

<!-- Stack Overflow -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-stack-overflow">
  <i class="ai-stack-overflow"></i>
</a>

<!-- Steam -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-steam">
  <i class="ai-steam"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-telegram">
  <i class="ai-telegram"></i>
</a>

<!-- TikTok -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-tiktok">
  <i class="ai-tiktok"></i>
</a>

<!-- Tinder -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-tinder">
  <i class="ai-tinder"></i>
</a>

<!-- Trello -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-trello">
  <i class="ai-trello"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-tumblr">
  <i class="ai-tumblr"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-twitch">
  <i class="ai-twitch"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-twitter">
  <i class="ai-twitter"></i>
</a>

<!-- Viber -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-viber">
  <i class="ai-viber"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-vimeo">
  <i class="ai-vimeo"></i>
</a>

<!-- VKontakte -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-vk">
  <i class="ai-vk"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-wechat">
  <i class="ai-wechat"></i>
</a>

<!-- WhatsApp -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-whatsapp">
  <i class="ai-whatsapp"></i>
</a>

<!-- WordPress
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-wordpress">
  <i class="ai-wordpress"></i>
</a>

<!-- Xing -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-xing">
  <i class="ai-xing"></i>
</a>

<!-- Yelp -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-yelp">
  <i class="ai-yelp"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-youtube">
  <i class="ai-youtube"></i>
</a>

<!-- Zoom -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-zoom">
  <i class="ai-zoom"></i>
</a>

// Airbnb
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-airbnb
  i.ai-airbnb

// Behance
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-behance
  i.ai-behance

// Blogger
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-blogger
  i.ai-blogger

// CodePen
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-codepen
  i.ai-codepen

// Discord
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-discord
  i.ai-discord

// Disqus
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-disqus
  i.ai-disqus

// Dribbble
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-dribbble
  i.ai-dribbble

// Dropbox
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-dropbox
  i.ai-dropbox

// Evernote
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-evernote
  i.ai-evernote

// Facebook
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-facebook
  i.ai-facebook

// Flickr
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-flickr
  i.ai-flickr

// Foursquare
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-foursquare
  i.ai-foursquare

// GitHub
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-github
  i.ai-github

// Google
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-google
  i.ai-google

// Hangouts
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-hangouts
  i.ai-hangouts

// Instagram
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-instagram
  i.ai-instagram

// Kickstarter
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-kickstarter
  i.ai-kickstarter

// LinkedIn
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-linkedin
  i.ai-linkedin

// Medium
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-medium
  i.ai-medium

// Messenger
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-messenger
  i.ai-messenger

// Odnoklassniki
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-odnoklassniki
  i.ai-odnoklassniki

// Patreon
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-patreon
  i.ai-patreon

// Pinterest
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-pinterest
  i.ai-pinterest

// Quora
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-quora
  i.ai-quora

// Reddit
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-reddit
  i.ai-reddit

// Skype
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-skype
  i.ai-skype

// Slack
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-slack
  i.ai-slack

// Snapchat
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-snapchat
  i.ai-snapchat

// SoundCloud
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-soundcloud
  i.ai-soundcloud

// Spotify
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-spotify
  i.ai-spotify

// Stack Overflow
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-stack-overflow
  i.ai-stack-overflow

// Steam
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-steam
  i.ai-steam

// Telegram
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-telegram
  i.ai-telegram

// TikTok
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-tiktok
  i.ai-tiktok

// Tinder
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-tinder
  i.ai-tinder

// Trello
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-trello
  i.ai-trello

// Tumblr
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-tumblr
  i.ai-tumblr

// Twitch
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-twitch
  i.ai-twitch

// Twitter
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-twitter
  i.ai-twitter

// Viber
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-viber
  i.ai-viber

// Vimeo
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-vimeo
  i.ai-vimeo

// VKontakte
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-vk
  i.ai-vk

// WeChat
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-wechat
  i.ai-wechat

// WhatsApp
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-whatsapp
  i.ai-whatsapp

// WordPress
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-wordpress
  i.ai-wordpress

// Xing
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-xing
  i.ai-xing

// Yelp
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-yelp
  i.ai-yelp

// YouTube
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-youtube
  i.ai-youtube

// Zoom
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-zoom
  i.ai-zoom

Outline buttons

<!-- Airbnb -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-airbnb">
  <i class="ai-airbnb"></i>
</a>

<!-- Behance -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-behance">
  <i class="ai-behance"></i>
</a>

<!-- Blogger -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-blogger">
  <i class="ai-blogger"></i>
</a>

<!-- CodePen -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-codepen">
  <i class="ai-codepen"></i>
</a>

<!-- Discord -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-discord">
  <i class="ai-discord"></i>
</a>

<!-- Disqus -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-disqus">
  <i class="ai-disqus"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-dribbble">
  <i class="ai-dribbble"></i>
</a>

<!-- Dropbox -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-dropbox">
  <i class="ai-dropbox"></i>
</a>

<!-- Evernote -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-evernote">
  <i class="ai-evernote"></i>
</a>

<!-- Facebook -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-facebook">
  <i class="ai-facebook"></i>
</a>

<!-- Flickr -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-flickr">
  <i class="ai-flickr"></i>
</a>

<!-- Foursquare -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-foursquare">
  <i class="ai-foursquare"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-github">
  <i class="ai-github"></i>
</a>

<!-- Google -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-google">
  <i class="ai-google"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-hangouts">
  <i class="ai-hangouts"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-instagram">
  <i class="ai-instagram"></i>
</a>

<!-- Kickstarter -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-kickstarter">
  <i class="ai-kickstarter"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-linkedin">
  <i class="ai-linkedin"></i>
</a>

<!-- Medium -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-medium">
  <i class="ai-medium"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-messenger">
  <i class="ai-messenger"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-odnoklassniki">
  <i class="ai-odnoklassniki"></i>
</a>

<!-- Patreon -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-patreon">
  <i class="ai-patreon"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-pinterest">
  <i class="ai-pinterest"></i>
</a>

<!-- Quora -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-quora">
  <i class="ai-quora"></i>
</a>

<!-- Reddit -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-reddit">
  <i class="ai-reddit"></i>
</a>

<!-- Skype -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-skype">
  <i class="ai-skype"></i>
</a>

<!-- Slack -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-slack">
  <i class="ai-slack"></i>
</a>

<!-- Snapchat -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-snapchat">
  <i class="ai-snapchat"></i>
</a>

<!-- SoundCloud -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-soundcloud">
  <i class="ai-soundcloud"></i>
</a>

<!-- Spotify -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-spotify">
  <i class="ai-spotify"></i>
</a>

<!-- Stack Overflow -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-stack-overflow">
  <i class="ai-stack-overflow"></i>
</a>

<!-- Steam -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-steam">
  <i class="ai-steam"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-telegram">
  <i class="ai-telegram"></i>
</a>

<!-- TikTok -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-tiktok">
  <i class="ai-tiktok"></i>
</a>

<!-- Tinder -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-tinder">
  <i class="ai-tinder"></i>
</a>

<!-- Trello -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-trello">
  <i class="ai-trello"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-tumblr">
  <i class="ai-tumblr"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-twitch">
  <i class="ai-twitch"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-twitter">
  <i class="ai-twitter"></i>
</a>

<!-- Viber -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-viber">
  <i class="ai-viber"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-vimeo">
  <i class="ai-vimeo"></i>
</a>

<!-- VKontakte -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-vk">
  <i class="ai-vk"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-wechat">
  <i class="ai-wechat"></i>
</a>

<!-- WhatsApp -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-whatsapp">
  <i class="ai-whatsapp"></i>
</a>

<!-- WordPress
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-wordpress">
  <i class="ai-wordpress"></i>
</a>

<!-- Xing -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-xing">
  <i class="ai-xing"></i>
</a>

<!-- Yelp -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-yelp">
  <i class="ai-yelp"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-youtube">
  <i class="ai-youtube"></i>
</a>

<!-- Zoom -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-zoom">
  <i class="ai-zoom"></i>
</a>

// Airbnb
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-airbnb
  i.ai-airbnb

// Behance
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-behance
  i.ai-behance

// Blogger
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-blogger
  i.ai-blogger

// CodePen
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-codepen
  i.ai-codepen

// Discord
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-discord
  i.ai-discord

// Disqus
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-disqus
  i.ai-disqus

// Dribbble
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-dribbble
  i.ai-dribbble

// Dropbox
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-dropbox
  i.ai-dropbox

// Evernote
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-evernote
  i.ai-evernote

// Facebook
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-facebook
  i.ai-facebook

// Flickr
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-flickr
  i.ai-flickr

// Foursquare
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-foursquare
  i.ai-foursquare

// GitHub
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-github
  i.ai-github

// Google
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-google
  i.ai-google

// Hangouts
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-hangouts
  i.ai-hangouts

// Instagram
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-instagram
  i.ai-instagram

// Kickstarter
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-kickstarter
  i.ai-kickstarter

// LinkedIn
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-linkedin
  i.ai-linkedin

// Medium
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-medium
  i.ai-medium

// Messenger
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-messenger
  i.ai-messenger

// Odnoklassniki
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-odnoklassniki
  i.ai-odnoklassniki

// Patreon
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-patreon
  i.ai-patreon

// Pinterest
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-pinterest
  i.ai-pinterest

// Quora
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-quora
  i.ai-quora

// Reddit
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-reddit
  i.ai-reddit

// Skype
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-skype
  i.ai-skype

// Slack
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-slack
  i.ai-slack

// Snapchat
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-snapchat
  i.ai-snapchat

// SoundCloud
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-soundcloud
  i.ai-soundcloud

// Spotify
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-spotify
  i.ai-spotify

// Stack Overflow
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-stack-overflow
  i.ai-stack-overflow

// Steam
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-steam
  i.ai-steam

// Telegram
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-telegram
  i.ai-telegram

// TikTok
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-tiktok
  i.ai-tiktok

// Tinder
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-tinder
  i.ai-tinder

// Trello
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-trello
  i.ai-trello

// Tumblr
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-tumblr
  i.ai-tumblr

// Twitch
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-twitch
  i.ai-twitch

// Twitter
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-twitter
  i.ai-twitter

// Viber
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-viber
  i.ai-viber

// Vimeo
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-vimeo
  i.ai-vimeo

// VKontakte
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-vk
  i.ai-vk

// WeChat
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-wechat
  i.ai-wechat

// WhatsApp
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-whatsapp
  i.ai-whatsapp

// WordPress
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-wordpress
  i.ai-wordpress

// Xing
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-xing
  i.ai-xing

// Yelp
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-yelp
  i.ai-yelp

// YouTube
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-youtube
  i.ai-youtube

// Zoom
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-zoom
  i.ai-zoom

Shape

<!-- Solid square button -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-dribbble rounded-0">
  <i class="ai-dribbble"></i>
</a>

<!-- Solid rounded button -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-dribbble">
  <i class="ai-dribbble"></i>
</a>

<!-- Solid circle button -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-dribbble rounded-circle">
  <i class="ai-dribbble"></i>
</a>

<!-- Outline square button -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-skype rounded-0">
  <i class="ai-skype"></i>
</a>

<!-- Outline rounded button -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-skype">
  <i class="ai-skype"></i>
</a>

<!-- Outline circle button -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-skype rounded-circle">
  <i class="ai-skype"></i>
</a>

// Solid square button
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-dribbble.rounded-0
  i.ai-dribbble

// Solid rounded button
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-dribbble
  i.ai-dribbble

// Solid circle button
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-dribbble.rounded-circle
  i.ai-dribbble

// Outline square button
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-skype.rounded-0
  i.ai-skype

// Outline rounded button
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-skype
  i.ai-skype

// Outline circle button
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-skype.rounded-circle
  i.ai-skype

Size

<!-- Large solid button -->
<a href="#" class="btn btn-secondary btn-icon btn-lg btn-linkedin">
  <i class="ai-linkedin"></i>
</a>

<!-- Regular solid button -->
<a href="#" class="btn btn-secondary btn-icon btn-linkedin">
  <i class="ai-linkedin"></i>
</a>

<!-- Small solid button -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-linkedin">
  <i class="ai-linkedin"></i>
</a>

<!-- Large outline button -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-lg btn-twitch">
  <i class="ai-twitch"></i>
</a>

<!-- Regular outline button -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-twitch">
  <i class="ai-twitch"></i>
</a>

<!-- Small outline button -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-twitch">
  <i class="ai-twitch"></i>
</a>

// Large solid button
a(href="#").btn.btn-secondary.btn-icon.btn-lg.btn-linkedin
  i.ai-linkedin

// Regular solid button
a(href="#").btn.btn-secondary.btn-icon.btn-linkedin
  i.ai-linkedin

// Small solid button
a(href="#").btn.btn-secondary.btn-icon.btn-sm.btn-linkedin
  i.ai-linkedin

// Large outline button
a(href="#").btn.btn-outline-secondary.btn-icon.btn-lg.btn-twitch
  i.ai-twitch

// Regular outline button
a(href="#").btn.btn-outline-secondary.btn-icon.btn-twitch
  i.ai-twitch

// Small outline button
a(href="#").btn.btn-outline-secondary.btn-icon.btn-sm.btn-twitch
  i.ai-twitch

Customize theme

Colors

Typography (1rem = 16px)

Borders / Rounding

Menu

Content

Components

Utilities

Social buttons

Solid buttons

Outline buttons

Shape

Size