12

How do I manage a growing Icon Web Font? No more Icomoon please.

over 3 years ago from

Hey guys,

So as my team continues to work on new products, we obviously run into a need for more icons. Different projects need require different actions etc.

I've come here because I want a great solution for managing a group of svgs that I can edit and export as .ttf, .woff, .woff2 etc... That way I can hand that to my dev team and they stay happy. The uni code cant change otherwise it makes their lives annoying and I get hated on.

Anyone out there using a better solution? I have taken a small attempt at using mini glyphs to import svgs, but resizing is annoying.

Also, I know Icomoon exists. Its just super unreliable. If one click when using the delete tool can delete my entire icon library.... I dont want to use that product. Also I have had to start from scratch multiple times after logging in and my library mysteriously disappearing.

22 comments

  • Todd Padwick, over 3 years ago

    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.

    5 points
    • Christopher Alan, over 3 years ago

      +1 for this! Great article and agree icon fonts are good for designing fast but shouldn't be used on the web anymore. Too many people (like myself) have webfonts turned off on mobile devices to save bandwidth and speed up loading times so pages constantly look out of whack.

      1 point
  • Stefano TirloniStefano Tirloni, over 3 years ago

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

    4 points
    • Tiago DuarteTiago Duarte, over 3 years ago

      This. Whenever you'd like to get all your icons back, if you happen to delete them, you just drag and drop the .json file into Icomoon and it's like nothing happened. Awesome feature!

      0 points
  • Ege GörgülüEge Görgülü, over 3 years ago

    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

    2 points
  • Tyrell JamesTyrell James, over 3 years ago

    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.

    1 point
  • Tait BrownTait Brown, over 3 years ago

    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.

    1 point
  • Marcel M., over 3 years ago

    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) :)

    1 point
  • Richard SisonRichard Sison, over 3 years ago

    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!

    1 point
  • Matt RintoulMatt Rintoul, over 3 years ago

    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.

    0 points
  • Evgeny BeckerEvgeny Becker, over 3 years ago

    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.

    0 points
  • Kemie GuaidaKemie Guaida, over 3 years ago

    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.

    0 points
  • John PJohn P, over 3 years ago

    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.

    0 points