Social Media icons & buttons

Bootstrap Social Media icons & buttons - examples & tutorial

Social Media icons & buttons built 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. 


          <!-- 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.


          <!-- 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>

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). 


          <a 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. 


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

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

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

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

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

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

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

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

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

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

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

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

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

            <!-- Whatsapp -->
            <a 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. 


            <a
              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 

            <a 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. 


            <!-- 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 

            <!-- Facebook -->
            <a 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
              type="button"
              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
              type="button"
              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>