1. Freebies
  2. Icons
  3. Get Social Icon Set
Get Social Icon Set & Social Media Font

Get Social Icon Set & Social Media Font

Social icons are a necessity. 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.

Every website must have a presence on the major social media platforms. Including those links on your website allows visitors to stay in touch. Designers used to spend hours creating social media links that matched a website, but with some advancements that step is a breeze. The Get Social Icon Set allows you to simply include a few lines then use the social media icons just like any other font.

Why Use the Get Social Icon Set?

Download SVGs

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?

View Demo

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.

Get Social Features the Following Icons...
  • Behance behance
  • Bing bing
  • Bitbucket bitbucket
  • Blogger blogger
  • Chrome chrome
  • Codepen codepen
  • CC-Remix cc-remix
  • CC-Zero cc-zero
  • CC-BY cc-by
  • CC-CC cc-cc
  • CC-NC-EU cc-nc-eu
  • CC-NC-JP cc-nc-jp
  • CC-NC cc-nc
  • CC-ND cc-nd
  • CC-PD cc-pd
  • CC-SA cc-sa
  • CC-Sampling-Plus cc-sampling-plus
  • CC-Sampling cc-sampling
  • CC-Share cc-share
  • CSS3 css3
  • CSS3 Box css3-box
  • Digg digg
  • Disqus disqus
  • DeviantArt deviantart
  • Dribbble dribbble
  • Dropbox dropbox
  • Drupal drupal
  • Ello ello
  • Etsy etsy
  • Evernote evernote
  • Facebook facebook
  • Messenger facebook-messanger
  • Firefox firefox
  • Flickr flickr
  • Foursquare foursquare
  • Forrst forrst
  • Github github
  • Google google
  • Google+ google-plus
  • Google Drive google-drive
  • Grooveshark grooveshark
  • Houzz houzz
  • HTML5 html5
  • HTML5 Box html5-box
  • iCloud icloud
  • Instagram instagram
  • Internet Explorer ie
  • Joomla joomla
  • Last.fm lastfm
  • LinkedIn linkedin
  • Meerkat meerkat
  • Myspace myspace
  • Opera opera
  • PayPal paypal
  • Periscope periscope
  • Pinterest facebook
  • Pocket pocket
  • Reddit reddit
  • RSS rss
  • Safari safari
  • Slack slack
  • Snapchat snapchat
  • Skype skype
  • Spotify spotify
  • StackOverflow stack-overflow
  • StumbleUpon stumbleupon
  • SoundCloud soundcloud
  • Tumblr tumblr
  • Twitter twitter
  • Vimeo vimeo
  • Vine vine
  • VK vk
  • Whatsapp whatsapp
  • Wikipedia wikipedia
  • WordPress wordpress
  • Yelp yelp
  • YouTube youtube
  • Zerply zerply
  • 500px 500px
  • Generic Tribar tribar
  • * New* Updated

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.

Get Social Icon Set - Sample
License: SIL OFL 1.1 - URL: http://scripts.sil.org/OFL. Please note HaeckDesign has no affiliation with any of the companies listed. If a representative would like a logo removed, just contact us.
Thanks for stopping by and please feel free to share!

Related Articles
  • Best Background Patterns & Generators
    Every decent designer gets tons of use out of their best background patterns. Slick website backgrounds and realistic Photoshop images both require quality seamless textures. Start your collection with the best!
    Best Background Patterns & Generators
  • Best Social Media Icons Ever
    There are an insane amount of social media icons out there, but you usually just need something simple & clean.
    Best Social Media Icons Ever
  • Pinterest Branding and Marketing Strategy
    This Pinterest tutorial will help build your Pinterest marketing and branding strategy... and also has a few tips for using it effectively.
    Pinterest Branding and Marketing Strategy
  • Social Stamps - Icon Set
    We've created a colorful set of social stamps, themed with a postal style. They're available for free download and a great way to send all your visitors in the right direction.
    Social Stamps - Icon Set
  • Top Sources for Free Font Families
    Font resources are often neglected on projects, leaving designers with a clear problem. Free font families help bridge that gap allowing you to bring a unique design to life until you're ready to commit to a premium font family.
    Top Sources for Free Font Families
Written By:
Matthew Haeck

Greetings, I'm the lead designer and resident full stack web developer at Haeck Design. A majority of my time is spent creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade. (Matthew Haeck Bio Page)

Haeck Design - Stamp Logo