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?

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...
  • Apple apple
  • 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
  • Digg digg
  • Disqus disqus
  • DeviantArt deviantart
  • Dribbble dribbble
  • Dropbox dropbox
  • Drupal drupal
  • Edge edge
  • Ello ello
  • Etsy etsy
  • Evernote evernote
  • Facebook facebook
  • Messenger facebook-messanger
  • Firefox firefox
  • Flickr flickr
  • Flipboard flipboard
  • Foursquare foursquare
  • Github github
  • Gitlab gitlab
  • Google google
  • Google Drive google-drive
  • Houzz houzz
  • HTML5 html5
  • HTML5 Box html5-box
  • iCloud icloud
  • Instagram instagram
  • Joomla joomla
  • lastfm
  • LinkedIn linkedin
  • Mailchimp mailchimp
  • Medium medium
  • Mix mix
  • Myspace myspace
  • Opera opera
  • Patreon patreon
  • PayPal paypal
  • Pinterest facebook
  • Pocket pocket
  • Quora quora
  • Reddit reddit
  • RSS rss
  • Safari safari
  • Slack slack
  • Snapchat snapchat
  • Skype skype
  • Spotify spotify
  • StackOverflow stack-overflow
  • SoundCloud soundcloud
  • Telegram telegram
  • TikTok tiktok
  • Tumblr tumblr
  • Twitch twitch
  • Twitter twitter
  • Ubuntu ubuntu
  • Vimeo vimeo
  • VK vk
  • Whatsapp whatsapp
  • Wikipedia wikipedia
  • WordPress wordpress
  • X x
  • Yelp yelp
  • YouTube youtube
  • 500px 500px
  • Generic Tribar tribar
  • * New

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: CC0 1.0 - URL: HaeckDesign has no official affiliation with any company listed & will happily remove upon request.
Thanks for stopping by & please feel free to share!
  • Published:
  • Author:
  • Category: icons
  • Share:
  • Title: Get Social Icon Set - Social Media Font
  • Summary: Social icons are a necessity. So we built a minimal social icon set, then compiled it into a social media font. Meet the Get Social Icon Set.
Signup for Linode & Get $100 Credit Donate A Coffee
Latest Design & Development News
If you love web development, graphic design, or tech tools, be sure to visit our blog for tons of helpful info.