Responsive Social Icons

Responsive social icons are flexible, resolution independent social icons ready to use. They are supported by almost all browsers, and can be customized to match your needs easily.

How to use them

Add social-icons.css and add the classes .social-icon to the elements you want to convert on a social icon.

Last step is to add a class modifier to indicate wich social network the icon is.

<a href="#" target="_blank" class="social-icon social-icon--facebook"></a>

And that's all.

View the full list of examples.

Social Networks Supported

• Facebook (.social-icon--facebook)
• Twitter (.social-icon--twitter)
• Youtube (.social-icon--youtube)
• Instagram (.social-icon--instagram)
• Linkedin (.social-icon--linkedin)
• Tumblr (.social-icon--tumblr)
• Email (.social-icon--email)
• Snapchat (.social-icon--snapchat)

Browser support

Any browser that supports SVG, that is almost all.

• IE9+
• Firefox 38+
• Chrome 31+
• Safari 7.1+
• Opera 30+
• iOS Safari 7.1+
• Android Broswer 4.4+
• Chrome for Android 42+