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-Samp-Plus cc-sampling-plus
  • CC-Sampling cc-sampling
  • CC-Share cc-share
  • CSS3 css3
  • CSS3 Box css3-box
  • Delicious delicious
  • 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
  • Flipboard flipboard
  • 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
  • Medium medium
  • Meerkat meerkat
  • Myspace myspace
  • Opera opera
  • Patreon patreon
  • PayPal paypal
  • Periscope periscope
  • Pinterest facebook
  • Pocket pocket
  • Quora quora
  • Reddit reddit
  • RSS rss
  • Safari safari
  • Slack slack
  • Snapchat snapchat
  • Skype skype
  • Spotify spotify
  • StackOverflow stack-overflow
  • StumbleUpon stumbleupon
  • SoundCloud soundcloud
  • Tumblr tumblr
  • Twitch twitch
  • 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. HaeckDesign has no official affiliation with any company listed & will happily remove upon request.
Thanks for stopping by & please feel free to share!


Written By: Matthew Haeck - Lead designer and resident full stack web developer at Haeck Design, Matthew spends a majority of his time creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade. (About Matthew Haeck)
Related Posts