Simple answer is don't...

There are better ways to use and manage SVG icons on the web than icon fonts now. This is something I have only recently learnt myself as I used to always use icon fonts, and had the same issues you are having.

Here is a great article on the subject: https://medium.com/etsy-design/etsys-evolving-icon-system-41c55a639be2#.1qi975bx8

there's also a list of useful resources on implementation at the bottom of that article.

Every time you're exporting a font from Icomoon, you have a .json file as backup.

We had recently run into issues growing our icon library at Jotform, so we're making the switch to SVG as well.

With SVG, I think it's <symbol> or bust. But once you have that setup, it's a breeze to work with them. We are working with React + Webpack, so we're using svg-sprite-loader but there are other npm libraries that work with task runners. I highly suggest using svg sprites with symbols. It basically offers everything an icon font can and more.

I had written about it if you'd like to give it a read: Our Icon Workflow

Hey hey! First time commenter so go easy on me.

I personally use Symbols for Sketch if you don't mind getting a little dirty with the command line.

All of the nitty gritty is handled through sketch, you can name your artboards the unicode required as well as a class name. That will stop your pesky glyphs moving about. Then hammer in a command and pow! It's exported in all the flavours you need! Give it a try and holla at me if you need help getting to grips with the nitty gritty.

Yes, people in the comments will say "don't", but if you absolutely must because of cross browser requirements, do it with a gulp task.

I use gulp-iconfont which will watch a directory for svgs and generate a font and matching css/scss file according to your template. That way you can namespace it as well, like .dn-icon--comment for a comment icon in a Designer News project.

Hey Parker.

If you have SVGs that you need to use as a webfont, then Iconical is a great option. It hasn't had an update since 2015, but still works for me.

On a side note, Iconjar has recently come out of beta and is an awesome app for organising your icons in general. It can import webfonts (and retain the unicode) but turns them into SVGs. I suppose you'd just need to be careful when adding/updating your set to not affect the unicodes.

Both are pretty great apps to add to the toolbelt for fonts.

Hope that helps!

FontCustom is a command line tool for compiling SVGs into a font https://github.com/FontCustom/fontcustom

Personally I prefer SVG Sprites (https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques)

I use Gulp to watch a folder with gulp-svgmin (https://github.com/ben-eb/gulp-svgmin) to clean up the SVG code and gulp-svg-symbols (https://github.com/Hiswe/gulp-svg-symbols) to compile all the SVGs in the folder into a single file.

You can put everything into one file, or break them into smaller files if not every symbol needs to be available on first load of the site.

Some time ago i switched to svg - workflow. Basically you have your artboards with the icons (keep the names clean and semantic!) and export a folder full of svgs. That should be all from your side, the dev team has some options from now on: - create a svg spritesheet (best solution) with a taskrunner and implement with the syntax or (better) create (react)modules - create a css spritesheet with gulpicon/grunticon and work with classes, the same way as with iconfonts All the solutions have enough possible fallbacks, but that shouldn't be your job to manage the right dev workflow.

I've been using Fontastic for a while now, and it works great. no editing tools like icomoon, though.

Otherwise, there's several apps like iconbuilder that will build an icon font from a folder of svgs. Most are not quite user friendly. One I have in my bookmarks but have yet to try is MyIcons.

I'm in love with Icomoon, building my icon library in Figma and import them as svg into icomoon is so easy and reliable. I'm using Chrome and never had a single problem importing/exporting my icon font (it's been more than 6 month now) :)

Had to pick up icon font driven apps from designers who have left the company.

What a complete nightmare extracting the icons back out again. Much prefer SVG workflow.