Socially Iconic is a set of commonly used social media icons that is built into a font.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Socially Iconic

Socially Iconic is a set of commonly used social media icons that is built into a font. This font icons kit provides you a selection of simple and easy to use css styles that can easily integrate into a selection of templates and designs. Coded using LESS technology, you can easily customize the kit to take it ever further. It is lightweight and looks wonderful on retina devices.


How to Use

Socially Iconic can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to. Refer to index.html for sample.

What's Included

The project consists of the following folders and files:


  • /css/sociallyiconic-codes.css - List of icon codes and respective classes.
  • /css/sociallyiconic-ie7-codes.css - IE7 support code for icon font.
  • /css/sociallyiconic-ie.css - IE8+ support code for icon font.
  • /css/sociallyiconic.css - Generated stylesheet for less file.
  • /css/style.css - Generic page styling. Does not affect icons.


  • /css/sociallyiconic.less - Development version of sociallyiconic.css in LESS flavours
  • /css/sociallyiconic-branding.less - Brands and their official colors


  • /font/sociallyiconic.eot - Embedded OpenType for Socially Iconic.
  • /font/sociallyiconic.svg - Scalable Vector Graphics for Socially Iconic.
  • /font/sociallyiconic.ttf - TrueType font (raster font format) for Socially Iconic.
  • /font/sociallyiconic.woff - Web Open Font Format for Socially Iconic.


  • index.html - Demonstrates all Socially Iconic effects.

Development Stage

The kit is currently in development. It was originally developed by FWPolice. Now in development by Gravit GmbH.