Collection of hand-picked free HTML and CSS social media icon code examples from Codepen, GitHub and other resources. Update of October 2021 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

Author

  • Nour Ibram

Links

Made with

  • HTML / CSS

About a code

3D Social Media Button

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Swarup Kumar Kuila

Links

Made with

  • HTML / CSS

About a code

Social Animation

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

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, font-awesome-animation.css

Author

  • Kevin Miranda

Links

Made with

  • HTML / CSS (SCSS)

About a code

Glass Effect Social Media Buttons with Neon Glow

A CSS only implementation of glass-like neon glow buttons with text gradients & box-shadows.

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

Responsive: no

Dependencies: -

Author

  • Stockin

Links

Made with

  • HTML / CSS

About a code

Social Links

CSS only animation for social links.

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

Responsive: no

Dependencies: font-awesome.css

Demo image: Dark Social Icons Dark Social Icons - GIF Demo

Author

  • Metty

Links

Made with

  • HTML / CSS

About the code

Dark Social Icons

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

Dependencies: font-awesome.css

Author

  • Akshay

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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