Social Media icons & buttons

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

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

        
            
              import React from 'react';
              import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <>
                    <MDBBtn className='m-1' style={{ backgroundColor: '#3b5998' }} href='#'>
                      <MDBIcon fab icon='facebook-f' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#55acee' }} href='#'>
                      <MDBIcon fab icon='twitter' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#dd4b39' }} href='#'>
                      <MDBIcon fab icon='google' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#ac2bac' }} href='#'>
                      <MDBIcon fab icon='instagram' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#0082ca' }} href='#'>
                      <MDBIcon fab icon='linkedin-in' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#c61118' }} href='#'>
                      <MDBIcon fab icon='pinterest' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#4c75a3' }} href='#'>
                      <MDBIcon fab icon='vk' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#ffac44' }} href='#'>
                      <MDBIcon fab icon='stack-overflow' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#ed302f' }} href='#'>
                      <MDBIcon fab icon='youtube' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#481449' }} href='#'>
                      <MDBIcon fab icon='slack-hash' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#333333' }} href='#'>
                      <MDBIcon fab icon='github' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#ec4a89' }} href='#'>
                      <MDBIcon fab icon='dribbble' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#ff4500' }} href='#'>
                      <MDBIcon fab icon='reddit-alien' />
                    </MDBBtn>
        
                    <MDBBtn className='m-1' style={{ backgroundColor: '#25d366' }} href='#'>
                      <MDBIcon fab icon='whatsapp' />
                    </MDBBtn>
                  </>
                );
              }

Floating social

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

        
            
              import React from 'react';
              import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <MDBBtn size='lg' floating style={{ backgroundColor: '#ac2bac' }} href='#'>
                    <MDBIcon fab icon='instagram' />
                  </MDBBtn>
                );
              }

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 
        
            
              import React from 'react';
              import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <MDBBtn style={{ backgroundColor: '#55acee' }} href='#'>
                    <MDBIcon className='me-2' fab icon='twitter' /> Twitter
                  </MDBBtn>
                );
              }

Notifications

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

8 
        
            
              import React from 'react';
              import { MDBBadge, MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <>
                    <MDBBtn style={{ backgroundColor: '#3b5998' }} href='#'>
                      <MDBIcon fab icon='facebook-f' />
                      <MDBBadge color='danger' className='ms-2'>
                        8
                      </MDBBadge>
                    </MDBBtn>
        
                    <button
                      type='button'
                      className='btn btn-primary position-relative mx-3'
                      style={{ backgroundColor: '#ac2bac' }}
                    >
                      <i className='fab fa-instagram'></i>
                      <MDBBadge pill color='danger' className='position-absolute top-0 start-100 translate-middle'>
                        +99 <span className='visually-hidden'>unread messages</span>
                      </MDBBadge>
                    </button>
        
                    <button type='button' className='btn btn-primary position-relative' style={{ backgroundColor: '#55acee' }}>
                      Twitter <i className='fab fa-twitter ms-1'></i>
                      <MDBBadge
                        pill
                        color='danger'
                        className='position-absolute top-0 start-100 translate-middle border border-light p-2'
                      >
                        <span className='visually-hidden'>unread messages</span>
                      </MDBBadge>
                    </button>
                  </>
                );
              }