Join Over 20,000 Designers and Get My Free Design Tools

Get access to my email newsletter and all of my exclusive design tools, assets, Genesis child themes and more.

Get Free Access
Get Free Access


    • David,
      You definitely want to watch how big your font files are but I found icon fonts much lighter than PNGs or GIFs.

      It’s important to limit the number of icon sets you include in your website. So, if you have 50 icons and they are in 5 different sets, combine them all together and include as one set. That’s the beauty of service.

  1. Thanks Rafal. This demystified it somewhat for me as I’ve never actually created an icon but have been thinking in that direction. I appreciate the help.

    Also, I’ve been using this site:

    It allows you to pick and choose icons from several leading icon fonts (font awesome, entypo, and more) and create a single, smaller font file. It generates the CSS and and allows you to customize the selectors, too.

  2. Hi Rafal,
    This looks great – but I can’t get it to work. I’m experimenting with Fontastic icons, rather than make my own at this point, but I don’t quite understand how it works.

    I have copied the fonts folder that I downloaded into my WordPress theme folder, and copied the CSS into my style sheet. Then I pasted into a widget – but nothing displays. Am I doing something wrong?

    Thanks for your help.

  3. Hello,
    Nice, but how can I associate an icon to a specific char ? In my project we need to create a very specific font with symbols (phonetic related). Each symbol should correspond to a specific char. The goal is to create a web platform with a part where we find the text (latin) and its phonetic translation.
    What’s the best way to do that ?


  4. One question. How to have your icon font (and each icon within the font) the same size of the font you use for normal text? I often see that the icon in my icon-font don’t align vertically with the text in a button for example.

    I also read that you crop the icon before exporting it in SVG format, is this the trick?

    Thanks for your advise. Very appreciate.

    • Hey Pierre,
      I didn’t really think about it because I usually position icons manually. The size of your SVG files doesn’t really matter, but make sure to have square dimensions and that all icons are similar in size and positioned in the center. You may want to experiment with leaving more or less space around them. Every font is also different, so it may take some time to find the right spot.

  5. Hey Rafal, thanks for explaining such a useful tool. I was looking for one and here found it.

    One question,as you said in the end of your article that ‘You may find some rendering issues in different browsers..’. Is it only with icons which we create using fontastic tool or is it similar as with other icon fonts like fonawsome, flaticon etc.

    Would be helpful if you can shed some light on such rendering issues which you experienced and if found any solution?

    Although very helpful and well explained. Thanks!

    • Ravi,
      The rendering issue is something that appears for all fonts no matter if you use fontastic tool or fontawesome. A good thing about fontastic is that it generates CSS code with some fixes for most of that issues. Anyway, the differences are very subtle and in modern browsers it’s not a big problem anymore.

  6. Uploading my own SVG’s after designing and saving like you mentioned results in error prone images once inside Has anyone had issues getting the SVG’s to look right after fontastic?

  7. Beautiful tutorial, very easy to understand. I am new to fonts creation. I am wondering what size or dimensions of the icon you created in Adobe Illustrator.

    What’s the right width and height, must it be solid black? Please throw more light on that.

    • Because it’s a vector, the size doesn’t really matter. I think it can be any solid color, but it also doesn’t really matter because it’s something that you change later with your CSS.

  8. Hi! Thank you for introducing Fontastic! I’ve tried it but when I installed it on my computer so I could use it on my Photoshop CC, it worked…but when I tried it again (minutes later) I can’t select my font anymore. Do you know how to fix this?

  9. The “upload icon” nav item is no longer offered. Kind of breaks the entire purpose of this. Only offers existing icons from a library to use.

    • Hi Jenn,

      I’m currently using the “upload icon” function. You need to first make an account and then you’ll see next to the home link in the nav is “Add more icons” link. That page is where you can import your SVG’s.

Leave a Reply

Your email address will not be published. Required fields are marked *