The term "build tool" might be scary. It brings to mind fancy command line tools requiring configuration and weird system dependencies that break when you look at them wrong. Sometimes build tools are like that, and we'll go there in this series. But really a build tool is just something to help make your process easier. Automate something that you were previously doing by hand.

IcoMoon, in that sense, is a build tool. It was (is) a popular tool for building custom icon fonts. It's wonderful for that. I support any tool that encourages front end devs to create customized, streamlined assets for just what they need rather than including the kitchen sink (every icon on earth) and just using bits of it. IcoMoon isn't just for @font-face icon fonts though, it can output SVG defs blocks, which it calls an SVG sprite (also a perfectly acceptable term).

Basically you click around on the icons you want and then export it and you get a perfect SVG defs block to use. Note that they aren't using <symbol> yet, and I'm not sure why, but that means you'll need to include viewBox and accessibility stuff on your own as you implement them. Sign up for an account there, and you can save the project, meaning you can come back and remove/add stuff as needed rather than starting from scratch. That really makes it a build tool.

Important to know about IcoMoon: you can add your own SVG. You aren't limited to what you see in the default app. You can get SVG from elsewhere and just add it there and it'll save with your project. You could use IcoMoon as a build tool with only your own custom SVG and it would still be useful.

Comments

  1. User Avatar
    Chris Clarke
    Permalink to comment#

    icomoon uses symbol now – they must have been listening :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag