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">
  <i class="bx bxl-facebook"></i>
</a>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Outline buttons

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Shape

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

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

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

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

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

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

Sizing

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

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

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

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

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