Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# 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