Social Media icons & buttons

Vue Bootstrap Social Media icons & buttons - free examples & tutorial

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

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

Sample brands

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

Edit in sandbox 
        
            
          <template>

            <!-- Social Buttons -->
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(59, 89, 152);">
              <MDBIcon iconStyle="fab" icon="facebook-f"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(85, 172, 238);">
              <MDBIcon iconStyle="fab" icon="twitter"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(221, 75, 57);">
              <MDBIcon iconStyle="fab" icon="google"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(172, 43, 172);">
              <MDBIcon iconStyle="fab" icon="instagram"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(0, 130, 202);">
              <MDBIcon iconStyle="fab" icon="linkedin-in"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(198, 17, 24);">
              <MDBIcon iconStyle="fab" icon="pinterest"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(76, 117, 163);">
              <MDBIcon iconStyle="fab" icon="vk"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(255, 172, 68);">
              <MDBIcon iconStyle="fab" icon="stack-overflow"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(237, 48, 47);">
              <MDBIcon iconStyle="fab" icon="youtube"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(72, 20, 73);">
              <MDBIcon iconStyle="fab" icon="slack-hash"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(51, 51, 51);">
              <MDBIcon iconStyle="fab" icon="github"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(236, 74, 137);">
              <MDBIcon iconStyle="fab" icon="dribbble"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(255, 69, 0);">
              <MDBIcon iconStyle="fab" icon="reddit-alien"></MDBIcon>
            </MDBBtn>
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(37, 211, 102);">
              <MDBIcon iconStyle="fab" icon="whatsapp"></MDBIcon>
            </MDBBtn>
          </template>
          
        
    
        
            
          <script>
            import {
              MDBBtn,
              MDBIcon,
              MDBBadge
             } from "mdb-vue-ui-kit";
          
            export default {
              name: "App",
              components: {
                MDBBtn,
                MDBIcon,
                MDBBadge
              }
            }; 
          </script>

Floating social

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

Edit in sandbox 
        
            
          <template>
            <!-- Floating social -->
            <MDBBtn tag="a" color="primary" href="#!" floating size="lg" style="background-color: rgb(172, 43, 172);">
              <MDBIcon iconStyle="fab" icon="instagram"></MDBIcon>
            </MDBBtn>
          </template>
          
        
    
        
            
          <script>
            import {
              MDBBtn,
              MDBIcon,
              MDBBadge
             } from "mdb-vue-ui-kit";
          
            export default {
              name: "App",
              components: {
                MDBBtn,
                MDBIcon,
                MDBBadge
              }
            }; 
          </script>

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

            <!-- Text -->
            <MDBBtn tag="a" color="primary" href="#!" style="background-color: rgb(85, 172, 238);">
              <MDBIcon iconStyle="fab" icon="twitter" class="me-2"></MDBIcon>Twitter
            </MDBBtn>
          </template>
          
        
    
        
            
          <script>
            import {
              MDBBtn,
              MDBIcon,
              MDBBadge
             } from "mdb-vue-ui-kit";
          
            export default {
              name: "App",
              components: {
                MDBBtn,
                MDBIcon,
                MDBBadge
              }
            }; 
          </script>

Notifications

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

8
Edit in sandbox 
        
            
          <template>
            <!-- Notifications -->
            <MDBBtn class="position-relative" tag="a" color="primary" href="#!" style="background-color: rgb(59, 89, 152);">
              <MDBIcon iconStyle="fab" icon="facebook-f"></MDBIcon>
              <MDBBadge color="danger" class="ms-2">8</MDBBadge>
            </MDBBtn>
      
            <!-- 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>
          </template>
          
        
    
        
            
          <script>
            import {
              MDBBtn,
              MDBIcon,
              MDBBadge
             } from "mdb-vue-ui-kit";
          
            export default {
              name: "App",
              components: {
                MDBBtn,
                MDBIcon,
                MDBBadge
              }
            }; 
          </script>
24H 00M 00S

Get one of the limited daily offers for AI Bundles with 98% OFF for our Black Days Sale!