Silicon Silicon UI Kit
 Buy now

Social buttons

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

Silicon component

Solid buttons

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

<!-- Twitter -->
<a href="#" class="btn btn-icon btn-secondary btn-twitter" aria-label="Twitter">
  <i class="bx bxl-twitter"></i>
</a>

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

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

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

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

<!-- Pinterest -->
<a href="#" class="btn btn-icon btn-secondary btn-pinterest" aria-label="Pinterest">
  <i class="bx bxl-pinterest-alt"></i>
</a>

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

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

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

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

<!-- Discord -->
<a href="#" class="btn btn-icon btn-secondary btn-discord" aria-label="Discord">
  <i class="bx bxl-discord-alt"></i>
</a>

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

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

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

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

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

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

<!-- Odnoklassniki -->
<a href="#" class="btn btn-icon btn-secondary btn-ok" aria-label="Odnoklassniki">
  <i class="bx bxl-ok-ru"></i>
</a>

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

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

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

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

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

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

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

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

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

<!-- GitLab -->
<a href="#" class="btn btn-icon btn-secondary btn-gitlab" aria-label="GitLab">
  <i class="bx bxl-gitlab"></i>
</a>

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

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

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

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

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

<!-- Product Hunt -->
<a href="#" class="btn btn-icon btn-secondary btn-product-hunt" aria-label="Product Hunt">
  <i class="bx bxl-product-hunt"></i>
</a>

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

<!-- Airbnb -->
<a href="#" class="btn btn-icon btn-secondary btn-airbnb" aria-label="Airbnb">
  <i class="bx bxl-airbnb"></i>
</a>

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

<!-- TripAdvisor -->
<a href="#" class="btn btn-icon btn-secondary btn-trip-advisor" aria-label="TripAdvisor">
  <i class="bx bxl-trip-advisor"></i>
</a>

Outline buttons

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

<!-- Twitter -->
<a href="#" class="btn btn-icon btn-outline-secondary btn-twitter" aria-label="Twitter">
  <i class="bx bxl-twitter"></i>
</a>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Odnoklassniki -->
<a href="#" class="btn btn-icon btn-outline-secondary btn-ok" aria-label="Odnoklassniki">
  <i class="bx bxl-ok-ru"></i>
</a>

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

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

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

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

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

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

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

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

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

<!-- GitLab -->
<a href="#" class="btn btn-icon btn-outline-secondary btn-gitlab" aria-label="GitLab">
  <i class="bx bxl-gitlab"></i>
</a>

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

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

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

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

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

<!-- Product Hunt -->
<a href="#" class="btn btn-icon btn-outline-secondary btn-product-hunt" aria-label="Product Hunt">
  <i class="bx bxl-product-hunt"></i>
</a>

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

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

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

<!-- TripAdvisor -->
<a href="#" class="btn btn-icon btn-outline-secondary btn-trip-advisor" aria-label="TripAdvisor">
  <i class="bx bxl-trip-advisor"></i>
</a>

Shape

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

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

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

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

<!-- Outline rounded button -->
<a href="#" class="btn btn-icon btn-outline-secondary btn-skype" aria-label="Skype">
  <i class="bx bxl-skype"></i>
</a>

<!-- Outline circle button -->
<a href="#" class="btn btn-icon btn-outline-secondary btn-skype rounded-circle" aria-label="Skype">
  <i class="bx bxl-skype"></i>
</a>

Sizing

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

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

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

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

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