20 CSS Social Media Icons
Collection of hand-picked free HTML and CSS social media icon and button code examples.
About the code
Dark Social Icons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
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
About the code
Social Media 3D Ghost Buttons
These 3D ghost buttons are designed using just HTML and CSS. Hover over these buttons to see the 3D effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
About the code
3D - CSS Social Tiles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.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
About the code
The Social Drawer
Just another drawer for your social links.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
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
About the code
Social Buttons
Pure CSS social buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
About the code
CSS3 Social Buttons Vol.2
Social buttons with CSS3 transition
s.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
About the code
CSS3 Social Buttons Vol.1
Social buttons with CSS3 transition
s.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
About the code
Only CSS Direction-Aware Cube Social Links
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Social Buttons with Tooltips
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: ionicons.css
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
About the code
Clean Social Buttons
Free HTML and CSS social buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
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
About the code
SVG Social Icons
Round social icons in SVG, HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Social Links
HTML and CSS social diamond links.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.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
About the code
Social Media Icons
Social media icon reveal with transition
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
About the code
Social Flip Cards
Messing around with 3d transform
s and delayed transition
s.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -