Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding
Around UI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

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" aria-label="Airbnb">
  <i class="ai-airbnb"></i>
</a>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- X -->
<a href="#" class="btn btn-secondary btn-icon btn-sm btn-x" aria-label="X">
  <i class="ai-x"></i>
</a>

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

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

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

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

Outline buttons

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- X -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-x" aria-label="X">
  <i class="ai-x"></i>
</a>

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

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

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

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

Shape

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

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

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

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

<!-- Outline rounded button -->
<a href="#" class="btn btn-outline-secondary btn-icon btn-sm btn-skype" aria-label="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" aria-label="Skype">
  <i class="ai-skype"></i>
</a>

Size

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

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

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

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

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

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