Collection of hand-picked free HTML and CSS social media icon code examples from codepen and other resources. Update of November 2018 collection. 4 new items.

Related Articles

  1. CSS Icons and Icon Sets
  2. CSS Dotted Menu Icons
  3. CSS Hamburger Menu Icons
  4. CSS Weather Icons
Demo image: Dark Social Icons Dark Social Icons - GIF Demo

Author

  • Metty

Made with

  • HTML / CSS

About the code

Dark Social Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Author

  • Akshay

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Fancy Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Social Media Icons Social Media Icons - GIF Demo

Author

  • matt henley

Made with

  • HTML / CSS (SCSS)

About the code

Social Media Icons

Social media icons with hover and inverse actions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: 3D - CSS Social Tiles 3D - CSS Social Tiles - GIF Demo

Author

  • Stockin

Made with

  • HTML / CSS

About the code

3D - CSS Social Tiles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Media Icons Social Media Icons - GIF Demo

Author

  • Stockin

Made with

  • HTML / CSS

About the code

Social Media Icons

Floating social media icons in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: The Social Drawer The Social Drawer - GIF Demo

Author

  • Nour Saud

Made with

  • HTML / CSS (SCSS)

About the code

The Social Drawer

Just another drawer for your social links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Social Icons Social Icons - GIF Demo

Author

  • Miguel Cast

Made with

  • HTML / CSS (SCSS)

About the code

Social Icons

Social icons with vision 3D effect in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Buttons Social Buttons - GIF Demo

Author

  • Dariusz Syncerek

Made with

  • HTML / CSS (SCSS)

About the code

Social Buttons

Pure CSS social buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS3 Social Buttons Vol.2 CSS3 Social Buttons Vol.2 - GIF Demo

Author

  • fox_hover

Made with

  • HTML / CSS (SCSS)

About the code

CSS3 Social Buttons Vol.2

Social buttons with CSS3 transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS3 Social Buttons Vol.1 CSS3 Social Buttons Vol.1 - GIF Demo

Author

  • fox_hover

Made with

  • HTML / CSS (SCSS)

About the code

CSS3 Social Buttons Vol.1

Social buttons with CSS3 transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Only CSS Direction-Aware Cube Social Links Only CSS Direction-Aware Cube Social Links - GIF Demo

Author

  • Gabrielle Wee

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Only CSS Direction-Aware Cube Social Links

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Thea

Made with

  • HTML / CSS

About the code

Social Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Social Buttons with Tooltips Social Buttons with Tooltips - GIF Demo

Author

  • Luis Espinosa

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Social Buttons with Tooltips

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: ionicons.css

Demo image: Social Buttons With Icon Fonts

Author

  • David Pottrell

Made with

  • HTML / CSS

About a code

Social Buttons With Icon Fonts

Another set of social buttons for anyone to use/take inspiration from. This set takes advantage of Font Awesome icon pack.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: Social Connect Social Connect - GIF Demo

Author

  • Anthony Koch

Made with

  • HTML / CSS / JavaScript

About the code

Social Connect

This is a design I found on Dribbble made by Paul Flavius Nechita. It's a simple design, but it's one of my favorites. I'll have to work for a bit to get the box shadows the way it shows in the picture.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: ionicons.css

Demo image: Clean Social Buttons Clean Social Buttons - GIF Demo

Author

  • Michael Rossi

Made with

  • HTML / CSS (Less)

About the code

Clean Social Buttons

Free HTML and CSS social buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Stylish Social Buttons Stylish Social Buttons - GIF Demo

Author

  • Chris Deacy

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Stylish Social Buttons

A few cool social buttons with smooth animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: SVG Social Icons SVG Social Icons - GIF Demo

Author

  • Kevin Dewar

Made with

  • HTML / CSS (SCSS)

About the code

SVG Social Icons

Round social icons in SVG, HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Social Links Social Links - GIF Demo

Author

  • Sazzad

Made with

  • HTML / CSS

About the code

Social Links

HTML and CSS social diamond links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Media Icons Social Media Icons - GIF Demo

Author

  • Kieran Hunter

Made with

  • HTML / CSS

About the code

Social Media Icons

Social media hover icons with pop-up titles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Media Icons Social Media Icons - GIF Demo

Author

  • Stefan Göllner

Made with

  • HTML / CSS (SCSS)

About the code

Social Media Icons

Social media icon reveal with transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Flip Cards Social Flip Cards - GIF Demo

Author

  • Charlotte Dann

Made with

  • HTML / CSS (SCSS)

About the code

Social Flip Cards

Messing around with 3d transforms and delayed transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -