Skip to main content Accessibility Feedback

Free Social Icon Font

A free, pre-styled font for serving pixel-perfect icons on any screen.

Discontinued: The Social Icon Font has been replaced by the Using Icon Fonts tutorial, which provides updated and more future-friendly techniques.

Go Code Things, the free WordPress theme I released last week, includes an icon font with many of the common social media icons you might want.

If you’d like to use the font on your current website, today you can!

This is an image file. The actual icons look a lot crisper!


Why a font? #

Icon fonts have a few advantages over images. Because the icons are a font, they look crisp at any size and resolution – even on retina displays. They can be styled using CSS – colors, hover effects, gradients, drop shadows and more.

If you choose the right font, they’re actually pretty small (the one I use is just 8 kb), and it’s downloaded by the browser as a single file for all of your icons, so it speeds up website performance. And they’re supported all the way back to IE 4.

The icons themselves were created by IcoMoon, and I used Font Squirrel to convert them into a web embeddable format. I also added styling, including branded colors, and instructions on how to use them.

The font is licensed under Creative Commons Attribution-ShareAlike 3.0 Unported.

How to Use This Font #

  1. Download the file using the link at the top of this page, and then unzip the file.
  2. Drag the “Fonts” folder into the root directory for your website, or if you’re using WordPress, the root directory for the theme. (Alternatively, you can drag the fonts folder elsewhere and update the urls under @font-face.)
  3. Copy and paste the included CSS into your stylesheet. Feel free to modify as you see fit.
  4. To include an icon on your site, simply add the tag <i class="icon SYMBOL"></i> to your HTML, replacing the word “SYMBOL” with the name of the icon you would like to use. For example, to insert a Facebook icon, you would use the tag <i class="icon facebook"></i>.

🔥 Level-up your JavaScript skills! All of the Vanilla JS Pocket Guides have been updated for ES6 with new methods, techniques, and browser APIs. Learn more →

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips