Social Media icons & buttons

Bootstrap Social Media icons & buttons - examples & tutorial

Social Media icons & Social Buttons with Bootstrap 5. Facebook, Twitter, Google, Instagram, LinkedIn, Pinterest, YouTube, GitHub, WhatsApp, Slack, Reddit & more

To learn more read Icons Docs & Buttons Docs.

Icons

Icons of some of the most popular social media. To find more have a look at Icon Search.

Edit in sandbox 
        
            
          <!-- Facebook -->
          <i class="fab fa-facebook-f"></i>

          <!-- Twitter -->
          <i class="fab fa-twitter"></i>

          <!-- Google -->
          <i class="fab fa-google"></i>

          <!-- Instagram -->
          <i class="fab fa-instagram"></i>

          <!-- Linkedin -->
          <i class="fab fa-linkedin-in"></i>

          <!-- Pinterest -->
          <i class="fab fa-pinterest"></i>

          <!-- Vkontakte -->
          <i class="fab fa-vk"></i>

          <!-- Stack overflow -->
          <i class="fab fa-stack-overflow"></i>

          <!-- Youtube -->
          <i class="fab fa-youtube"></i>

          <!-- Slack -->
          <i class="fab fa-slack-hash"></i>

          <!-- Github -->
          <i class="fab fa-github"></i>

          <!-- Dribbble -->
          <i class="fab fa-dribbble"></i>

          <!-- Reddit -->
          <i class="fab fa-reddit-alien"></i>

          <!-- Whatsapp -->
          <i class="fab fa-whatsapp"></i>

Brand colors & size

By using size classes you can change the size of the icons.

Use inline CSS to add brand colors.

Edit in sandbox 
        
            
      <!-- Facebook -->
      <i class="fab fa-facebook-f fa-2x" style="color: #3b5998;"></i>

      <!-- Twitter -->
      <i class="fab fa-twitter fa-2x" style="color: #55acee;"></i>

      <!-- Google -->
      <i class="fab fa-google fa-2x" style="color: #dd4b39;"></i>

      <!-- Instagram -->
      <i class="fab fa-instagram fa-2x" style="color: #ac2bac;"></i>

      <!-- Linkedin -->
      <i class="fab fa-linkedin-in fa-2x" style="color: #0082ca;"></i>

      <!-- Pinterest -->
      <i class="fab fa-pinterest fa-2x" style="color: #c61118;"></i>

      <!-- Vkontakte -->
      <i class="fab fa-vk fa-2x" style="color: #4c75a3;"></i>

      <!-- Stack overflow -->
      <i class="fab fa-stack-overflow fa-2x" style="color: #ffac44;"></i>

      <!-- Youtube -->
      <i class="fab fa-youtube fa-2x" style="color: #ed302f;"></i>

      <!-- Slack -->
      <i class="fab fa-slack-hash fa-2x" style="color: #481449;"></i>

      <!-- Github -->
      <i class="fab fa-github fa-2x" style="color: #333333;"></i>

      <!-- Dribbble -->
      <i class="fab fa-dribbble fa-2x" style="color: #ec4a89;"></i>

      <!-- Reddit -->
      <i class="fab fa-reddit-alien fa-2x" style="color: #ff4500;"></i>

      <!-- Whatsapp -->
      <i class="fab fa-whatsapp fa-2x" style="color: #25d366;"></i>

Social buttons

Combining our icons and custom colors you can create social buttons. Combining our icons and custom colors you can create social buttons. See all available icons in our icons search (check "brands" to filter brand icons).

In the example below, we place a Facebook icon <i class="fab fa-facebook-f"></i> inside the button and set a background-color to #3B5998 (facebook brand color).

Edit in sandbox 
        
            
          <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #3b5998;" href="#!" role="button"
            ><i class="fab fa-facebook-f"></i
          ></a>

Sample brands

A few the most popular brands in form of social buttons.

Edit in sandbox 
        
            
            <!-- Facebook -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #3b5998;" href="#!" role="button"
              ><i class="fab fa-facebook-f"></i
            ></a>

            <!-- Twitter -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #55acee;" href="#!" role="button"
              ><i class="fab fa-twitter"></i
            ></a>

            <!-- Google -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #dd4b39;" href="#!" role="button"
              ><i class="fab fa-google"></i
            ></a>

            <!-- Instagram -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #ac2bac;" href="#!" role="button"
              ><i class="fab fa-instagram"></i
            ></a>

            <!-- Linkedin -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #0082ca;" href="#!" role="button"
              ><i class="fab fa-linkedin-in"></i
            ></a>

            <!-- Pinterest -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #c61118;" href="#!" role="button"
              ><i class="fab fa-pinterest"></i
            ></a>

            <!-- Vkontakte -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #4c75a3;" href="#!" role="button"
              ><i class="fab fa-vk"></i
            ></a>

            <!-- Stack overflow -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #ffac44;" href="#!" role="button"
              ><i class="fab fa-stack-overflow"></i
            ></a>

            <!-- Youtube -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #ed302f;" href="#!" role="button"
              ><i class="fab fa-youtube"></i
            ></a>

            <!-- Slack -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #481449;" href="#!" role="button"
              ><i class="fab fa-slack-hash"></i
            ></a>

            <!-- Github -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #333333;" href="#!" role="button"
              ><i class="fab fa-github"></i
            ></a>

            <!-- Dribbble -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #ec4a89;" href="#!" role="button"
              ><i class="fab fa-dribbble"></i
            ></a>

            <!-- Reddit -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #ff4500;" href="#!" role="button"
              ><i class="fab fa-reddit-alien"></i
            ></a>

            <!-- Whatsapp -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #25d366;" href="#!" role="button"
              ><i class="fab fa-whatsapp"></i
            ></a>

Floating social

By adding .btn-floating class you can create a nice, floating social button.

Edit in sandbox 
        
            
            <a
           data-mdb-ripple-init class="btn btn-primary btn-lg btn-floating"
              style="background-color: #ac2bac;"
              href="#!"
              role="button"
              ><i class="fab fa-instagram"></i
            ></a>

Text

You don't need to use only an icon. You can add text to the button. Remember to add some spacing classes (for example .me-2) to provide a proper space between icon and text.

Twitter
Edit in sandbox 
        
            
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #55acee;" href="#!" role="button"
              ><i class="fab fa-twitter me-2"></i>Twitter</a
            >

Only icon

By removing button classes and replacing background-color with color you can create minimalistic, clickable icons.

Edit in sandbox 
        
            
            <!-- Facebook -->
            <a style="color: #3b5998;" href="#!" role="button"
              ><i class="fab fa-facebook-f fa-lg"></i
            ></a>

            <!-- Twitter -->
            <a style="color: #55acee;" href="#!" role="button"
              ><i class="fab fa-twitter fa-lg"></i
            ></a>

            <!-- Google -->
            <a style="color: #dd4b39;" href="#!" role="button"
              ><i class="fab fa-google fa-lg"></i
            ></a>

            <!-- Instagram -->
            <a style="color: #ac2bac;" href="#!" role="button"
              ><i class="fab fa-instagram fa-lg"></i
            ></a>

Notifications

By using a badge you can create a button with a notification to provide a counter.

8
Edit in sandbox 
        
            
            <!-- Facebook -->
            <a data-mdb-ripple-init class="btn btn-primary" style="background-color: #3b5998;" href="#!" role="button"
              ><i class="fab fa-facebook-f"></i><span class="badge bg-danger ms-2">8</span></a
            >
            <!-- Instagram -->
            <button data-mdb-button-init
              type="button"
              data-mdb-ripple-init class="btn btn-primary position-relative"
              data-mdb-ripple-unbound="true"
              style="background-color: #ac2bac;"
            >
              <i class="fab fa-instagram"></i>
              <span
                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                >+99 <span class="visually-hidden">unread messages</span></span
              >
            </button>

            <!-- Twitter -->
            <button data-mdb-button-init
              type="button"
              data-mdb-ripple-init class="btn btn-primary position-relative"
              data-mdb-ripple-unbound="true"
              style="background-color: #55acee;"
            >
              Twitter <i class="fab fa-twitter ms-1"></i>
              <span
                class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"
                ><span class="visually-hidden">unread messages</span></span
              >
            </button>