30+ CSS Fancy Social Icons

CSS Social Icons – Are you looking for CSS Social Icons, If yes then in this post I am going to share hand-picked CSS Social Icons for you. You can use these social share jquery and css plugins on your website to share your website page or content which improve social traffic to boot organic rank and help visitor to share their content with friends and family.

CSS Social Icons

Following are the list of CSS Social Icons.

Floating Social Icons DEMO

 Floating Social Icons

Simple floating social icons using html and css. – By JonDCarey


Rotating Social Icons on Page Scroll DEMO

 Rotating Social Icons on Page Scroll

The code for the scotch.io tutorial: Rotating Social Icons on Page Scroll – By chrisoncode


Social Icons in a Horizontal List DEMO

 Social Icons in a Horizontal List

Horizontal list with font-awesome icons. – By webercoder



Animated Social Icons DEMO

 Animated Social Icons

Social icons made for my landing page http://ryanbishop.me/ – By ryanbishop


Social Icons – Hover Slide Transition DEMO

 Social Icons - Hover Slide Transition

Social icons built using a sprite sheet and CSS transitioning. – By dante


Social Icons (SVG Sprite + Image Replacement) DEMO

 Social Icons (SVG Sprite + Image Replacement)

Here’s a clean and semantic way to add social icons to your web page. It makes use of a SVG sprite, Image replacement, and a PNG fallback technique. – By robbyklein


Social Icon Hover Boxes DEMO

 Social Icon Hover Boxes

– By icutpeople


Social icons with Sass maps DEMO

 Social icons with Sass maps

– By blustemy



Social Icon Buttons DEMO

 Social Icon Buttons

Social icon buttons with smooth hover state animations. – By chrissteurer


Animated social icons DEMO

 Animated social icons

Some some good ol’ social icons for a client project. Made with svg sprites – By uberux


SCSS Social Icons Flat DEMO

 SCSS Social Icons Flat

Some social icons with hover and active states using SCSS – By mattsince87


Social Icons Hover Effect DEMO

 Social Icons Hover Effect

Social Icons Hover Effect – By mikghnson


Social icons hover effect DEMO

 Social icons hover effect

– By -n3veR


Social Icons with Long Shadow DEMO

 Social Icons with Long Shadow

Social Icons with Long Shadow full html5 and css3 – By di10


Social Icons DEMO

 Social Icons

Round social sharing buttons – By thalseth



fixed social icons DEMO

 fixed social icons

this is fixed social icons. – By 97lazare


Social Icon Animation DEMO

 Social Icon Animation

Jump up and fill background with brand color. – By berdejitendra


Animated Social Icons DEMO

 Animated Social Icons

Pure CSS Animated Social Icons Forked from http://codepen.io/LukyVj/pen/bDaGK – By heathriel


Ripple social icon DEMO

 Ripple social icon

– By quilljou


Round rollover social icons DEMO

 Round rollover social icons

little guys I’m saving for later – By Cutcopy



Letterpress social icons DEMO

 Letterpress social icons

Letterpress styled social icons. See credits for further reading about CSS stuff. This is for Chrome only. – By Hornebom


Social Icon Light Show DEMO

 Social Icon Light Show

A simple way to iterate through a set of social icons, animating each one in sequence, for a specified interval. – By danne931


social icons DEMO

 social icons

social icon css animations – By angeal185


Pure Social icons with no images DEMO

 Pure Social icons with no images

Create social icons using FontAwesome and no images! For a complete list of Icons you can use, go to Font Awesome Icons – By f1ss1on


Flex flexbox social icons DEMO

 Flex flexbox social icons

Create a long row of social icons using Font Awesome and use flex-wrap to make it responsive for mobile so icons do not shrink. – By macloo


Social icons DEMO

 Social icons

From an excellent work of Rovane Durso – By LukyVj



Social Icons – SCSS Example DEMO

 Social Icons - SCSS Example

– By azizarslan


Font Awesome Rounded Social Icons DEMO

 Font Awesome Rounded Social Icons

Using the Font Awesome facebook, twitter and linked in icons rounded with a nice shadow and inverted color on mouse over. – By kruxor


SVG Social Icon CSS Transition DEMO

 SVG Social Icon CSS Transition

A mini animated hover effect with SVG social icons. – By biancanegron


Slide Out Social Icon Buttons DEMO

 Slide Out Social Icon Buttons

Social icons that appear tucked away and invisible initially by placing them inside the “back face” of a DIV and setting the DIV to “backface-visibility: hidden”. To reveal the icons, the DIV is flipped to show its backside containing the icons. – By georgec


Bat Signal Social Icons DEMO

 Bat Signal Social Icons

Why do we fall? Or make super-useless box-shadow social icons? – By ocarinaoftw



Social Icons DEMO

 Social Icons

– By ehermanson


Social Icons On Hover DEMO

 Social Icons On Hover

Brand logo’s show on :hover. – By danmalarkey


Blogger Author Bio box with Social icons DEMO

 Blogger Author Bio box with Social icons

author bio box in blogger with social icons. the article : http://www.ar1web.com/2015/12/blogger-author-bio-box-with-social-icons.html – By ihussam


Bootstrap 4 Footer with Social icons DEMO

 Bootstrap 4 Footer with Social icons

– By NamiqNamaz


I Hope you liked Hand-picked list of CSS Fancy Social Icons, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.