Every website needs social media icons, we have covered the most beautiful animated social media icon snippets with support of the Bootstrap 4 framework. This page you will get different types of social media icons with on-hover animation and different positions including website footer, header, sidebar sticky which look cool on your bootstrap website.
Bootstrap 4 Social Media Icons

Pure CSS social media icons

Direction Aware Tiles using clip-path Pure CSS
  • Author Name:
    Elmer Balbins
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    N/A
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

3D Social Media Animated Links

Using scss mixins and 3d transforms to make social links with a cool hover effect to show usernames
  • Author Name:
    Austin Dudas
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    N/A
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social icon hover animation

Instagram, Twitter, LinkedIn, Codepen, Facebook, Dribbble, Github, Stack Overflow, social media icons with on hover animation
  • Author Name:
    Brandon Ward
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    N/A
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social Media Footer

Facebook, Instagram, Twitter, LinkedIn, Youtube social media icons with on hover animation
  • Author Name:
    Rúben Silva
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    N/A
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social Icons Splash Effect

SVG splash hover Effect in social media icons.
  • Author Name:
    Anton Korzhuk
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS JavaScript
  • Dependencies:
    jQuery, TweenMax.min.js, MorphSVGPlugin.min.js
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social Share Button Set

Social media icons with on hover animation and like counter in facebook, twitter, pinterest.
Bootstrap 4 Social Media Icons

Social Buttons

Social media icons hover to open like counter.
  • Author Name:
    TORGADDON
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    N/A
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Fixed Social Icons

CSS position fixed social media icons hover to show names.
  • Author Name:
    lazare
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.min.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social Slides

Social media icons on hover slide and show text.
  • Author Name:
    Gonzalo Fuentes
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    N/A
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social button

Social media with CSS hover effect.
  • Author Name:
    Jens Motyka
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    N/A
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Bubbling Icons

Social media Bubbling effect with JavaScript.
Bootstrap 4 Social Media Icons

Spin Social Icons with bootstrap

Social media spin effect with CSS.
  • Author Name:
    Petros Manisiotis
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    N/A
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social Media Icons

Just little social media buttons with nice animations
  • Author Name:
    Petros Manisiotis
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Stylish Social Buttons

Cool hover animations on social media buttons.
  • Author Name:
    Chris Deacy
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Responsive CSS Social Media Buttons

Border hover animations on social media buttons.
  • Author Name:
    Benjamin Vilina
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css, animate.min.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

CSS Social Media Icons - Round Style 1

Rounded social media icons using CSS3 hover and font awesome library.
  • Author Name:
    Valli
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social Nav

Different style social media icons and CSS3 hover.
  • Author Name:
    Vineeth.TR
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Social Icons

Social media icons and CSS3 hover.
  • Author Name:
    Torleif Halseth
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Bootstrap social icons

Social media sign in buttons and CSS3 hover.
  • Author Name:
    Angeal
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

CSS Social Media Icons

Social Media Icons using Pure CSS and font awesome library.
  • Author Name:
    Muhammet Hayran
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Simple social buttons

Social Media buttons with simple hover.
  • Author Name:
    Adonis K
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes
Bootstrap 4 Social Media Icons

Custom Share Boxes

Custom Facebook, Twitter, LinkedIn and Pinterest share boxes (with count) using FontAwesome and Open Sans Fonts.
  • Author Name:
    Ciprian
  • Code:
    Demo / Code Link
  • Using:
    HTML-CSS
  • Dependencies:
    font-awesome.css
  • Browser Compatibility:
    Chrome, Safari, Firefox, Edge
  • Responsive:
    Yes