Socially Icnic

Beautify the Social Web   |   By Fleech Media

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.

Single Font

In a single font, we include all custom built pictographyic social media icons.

No Javascript

Deal with less compatibity stress because Socially Iconic doesn't use Javascript.

LESS Pre-Processor

LESS is more. Customize to your hearts content with simple less file.

Infinite Scalability

Vector font + CSS means every icon and button looks great at any size.

Perfect on Retina

All icons and buttons are vector and CSS based and looks great on high-res.

Fully Compatible

Designed and coded to work with all frameworks.

Standard Shape

si

Rounded Shape

si si-rounded

Circle Shape

si si-circle

Rectangle Shape

si si-rectangle

Diamond Shape

si si-diamond

Parallelogram Shape

si si-parallelogram

Small Size

si si-small

Standard Size

si

Large Size

si si-large

White Background

si si-rounded si-bg-white

Grey Background

si si-circle

Black Background

si si-rounded si-bg-black

Red Background

si si-rounded si-bg-red

Blue Background

si si-rounded si-bg-blue

Green Background

si si-rounded si-bg-green

Standard Shadow

si si-rounded si-shadow si-bg-white

Lifted Shadow

si si-rounded si-shadow si-lifted si-bg-white

Curved Shadow

si si-rounded si-shadow si-curved si-bg-white

Cubizer

si si-circle si-cubizer si-bg-white

Tooltip

si si-rounded si-shadow si-bg-blue si-tooltip

Long Shadow

si si-rounded si-long-shadow si-bg-white

Zoom In

si si-bordered si-zoomin si-bg-white

Zoom Out

si si-bordered si-zoomout si-bg-white

No Transition

si si-bordered si-no-transition si-bg-white

Victoria

si si-bordered si-victoria

Thar

si si-bordered si-thar

Raise

si si-bordered si-raise

Drop

si si-bordered si-drop

Horizontal With Labels

si si-bordered si-showlabel

Stack With Labels

si si-bordered si-stacked si-showlabel

Horizontal Slide Out

si si-bordered si-slideout

Vertical Slide Out

si si-bordered si-stacked si-slideout

Icons Fixed Left

si si-bordered si-bg-white si-stacked si-fixed-left

Icons Fixed Right

si si-bordered si-bg-white si-stacked si-fixed-right

Icons Fixed Top

si si-bordered si-bg-white si-fixed-top

Icons Fixed Bottom

si si-bordered si-bg-white si-fixed-bottom

162 Icons and Growing

Our library is consistently growing. You can now choose from over 162 social media icons.

Get Started

Setting up Socially Iconic is very simple. To start, download or fork/pull the Github repo. Inside the download file, you will find all the contents that make up the Socially Iconic demo. Note: In the download file, you will also find the less and css files. If you want to edit the LESS file, you will need a compiler. No edit is needed if you prefer to use any styles and icons included in the demo.

Adding Socially Iconic to your Website

Link Socially Iconic to your website using the following HTML inside of your <head></head>

<link href="css/sociallyiconic.css" rel="stylesheet" media="all">

Using Socially Iconic

In this kit, all icons are displayed using the unordered list format. The class used inside of the <ul> determines the style applied to all of the icons. The use of Socially Iconic is triggered with the si class. To prevent conflict, all style classes are prepended by si-. See below for the list of available style classes.

The definition for each specific icon and it's branding color is defined by the corresponding class. The branding color is defined inside of the <a> tag where as the icon is defined with the <i>. To prevent conflict, each icon classes are prepended with iconic-.

Each icon is also accompanied by a label. Labels are not required and are hidden by default. The labels will only show when si-showlabel or si-slideout styles are used.

Example:

<ul class="si si-rounded si-bg-green">
   <li><a href="#" class="facebook"><span><i class="iconic-facebook"></i></span><span class="si-label">Facebook</span></a></li>
   <li><a href="#" class="twitter"><span><i class="iconic-twitter"></i></span><span class="si-label">Twitter</span></a></li>
   <li><a href="#" class="google-plus"><span><i class="iconic-google-plus"></i></span><span class="si-label">Google+</span></a></li>
   <li><a href="#" class="linkedin"><span><i class="iconic-linkedin"></i></span><span class="si-label">LinkedIn</span></a></li>
   <li><a href="#" class="dribbble"><span><i class="iconic-dribbble"></i></span><span class="si-label">Dribbble</span></a></li>
</ul>

Download Socially Iconic

Socially Iconic is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.
All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Fleech Media (creator of Socially Iconic), nor vice versa.