Get Social Icon Set - Social Media Font

Social icons are a necessity for UX & UI designers. That's why we built a minimal social icon set, then compiled it into a social media font. We've named it the Get Social Icon Set and it's free for all you designer types out there.

Why Use the Get Social Icon Set?

In one word - Uniformity. By staying up to date on the current logos of major social media sites and keeping them all in one place, we create a time saver for reference around the office. Whether you need to drop a PNG into a mockup or fully skin a projects UX with SVG vectors, we've got you covered. We've kept those images easily accessible on Github. For web developers we've also taken the social icon set and compiled the source as a font.

Why Use the Get Social Media Font?

The largest advantages of using a social media font is it's speed and flexibility. One item (the font) means far less connections then all those images. Plus, the smaller file size means faster loading of webpages. Designers will also notice that serving a social media font allows you to utilize all the flexibility of CSS. Make your images huge or downsize them for mobile devices - The result will still be crystal clear social media icons styled how ever you like. Although some frameworks include their own icons, they rarely include social media icons - The Get Social Icon Set bridges that gap.

Using a Social Icon Set on your Computer

To use on your computer simply download, then place the font in your library. The specifics are different for every computer, but in my case I'd just locate the .ttf file (since I use "True Type Fonts"), then place it in HomeDirectory/Library/Fonts. Now creating perfectly sharp social media icons in Photoshop (or any program) means selecting the font. That's it!

Using a Social Media Font on your Website

Include the css in your stylesheet by including the CSS provided. This can be done by adding the stylesheet included, but ideally you should just copy the style into your own existing stylesheet. Once you've included the CSS info and social media font onto your website, all you need to do is call the code and customize it to your liking.

If you wanted to include a Twitter icon for example, all you'd need to do is type <i class="gsicon-twitter"></i> and you're good to go. If you want to customize the icon simply adjust the CSS to your taste. The size, color, padding, border, text-shadow, background etc. can all be used to make the icons look how ever you want.

Thanks for stopping by & please feel free to share!