Join James Williamson for an in-depth discussion in this video Choosing existing icons, part of Creating Icon Fonts for the Web.
We'll start creating our first icon font, by using IcoMoon's font icon generator. Now these types of services are fantastic, because they allow you to build custom icon fonts, even if you're not really able or even want to design the icons yourself. So we'll start by navigating to IcoMoon.io, and then I'm going to click on the Launch App link in the upper right hand corner here. And that's going to take us right to the IcoMoon font generator. Okay, so, the first thing you are greeted with is a series of icons, and these are from the IcoMoon collection.
If I close this, I can see that we actually have several collections that are loaded up here by default. I have IcoMoons, Linecons, if I open that one, I can sort of see that set. Eighty Shades, and I'm free to pick and choose any of these icons that I want. In fact, there are additional icon sets that are available to us. If I click on this More Icon Sets, I can see the ones that are loaded already, that they have a check mark beside it, and as I scroll through, I see other sets that I can choose from. Now, not all of these are free, you'll notice for example that we have a couple here in the say purchase beside it.
So a lot of them are open source, some of them are not. You also really want to make sure that you read the license for each one of these, so that you know whether or not you can use it the way that you're wanting to use this. Now anytime you see a set that you want to add, all you have to do is click Add. I'm going to do that to the media icons here, or meteocons I should say. So again some meteorological symbols added to mine. There we go. And as soon as I do that, I notice that now in addition to the ones that were already there, I have my meteorological ones as well.
So I'm just going to open up a couple of these. I'm going to open up Meteocons, we'll do IcoMoon, and I want one with a different grid size, so I'm going to do Entypo as well. This one has some really great icons in it. Okay, excellent. Okay, so now all I have to do is select the ones that I want for my custom icon font. I do that using the tools up top. We have Select, Remove, Move and Edit, and we'll take a look at Edit here in just a moment. So, let's say I just click a couple of these, and it doesn't matter which ones you click, I'm going to click say, the Home icon, I like this pen, that's really nice, maybe I need a book, and perhaps a folder here.
So I've got that, and I'm going to scroll down to my Entypo ones, and I'm going to select a few of those. Maybe this bell, maybe a bullhorn, and then because I wanted them, I'll go up and choose a couple of the meteorological ones as well. Maybe some rain, it may be some sun. There we go. Right? So you can select as many of these as you want, and of course, the more icons that you select, the more you're going to have in your font. Now, I want to point out that in addition to just selecting these and adding them to your font, you can also edit these if you want.
We do have a limited amount of editing control of these. So if I click, say, Edit, for example, and I click this compass icon here, that brings this up in the icon editor. Now, this is a very minimal type of editor, there's not a lot we can do here. Now if you think you're going to make a big change to this, you can duplicate it, which I'm just going to hit Duplicate, and it will create a new version of it. And then I can grab this with the Edit tool, and go to town and not worry about messing with the original one. Okay, so what can I do? Well, I can rotate these if I think it looked better pointing a different way, I could do that.
I can flip them horizontally and vertically, although with a round icon, it's not really showing you a lot, so maybe I should have picked a different icon. I can also scale this down and make it smaller if I want, or I can make it larger. This is extremely helpful with certain icon sets, because you'll have some that are just bigger than others. I can also move this, so I wanted to scale it down and move to the left a little bit, I could do that as well. I could also change the grid that this is based off of. This is based off a 16 base grid. I can go up to 32, I can go down to 16. There's some that's going to be based off of ten, 20, that sort of thing. So, I can go up to 32 for example, and you can see that it will change the grid.
Now, what's really interesting about this, is let's say I can increase the canvas width to give myself some additional space. And I can scale this glyph up, move it around, and make the glyph itself actually larger, and that's very helpful, because you have some icon sets, where the icons are, by default, smaller than others. So, if you're having trouble with that when you're downloading your icon font, you can come in here and edit them and sort of resize them. Okay, now we also have the ability to download this file. So if you wanted to you could download this particular icon as an SVG file, edit it, and then use the Replace command here to replace the artwork with what you edited, or even just brand new artwork.
Okay. So, I am going to close the editor here, grab the Selection tool again, and select my new glyph. Now, you don't need to do anything else to make these a part of your font set. If they are highlighted, you've already loaded them into your font. I love the ability that we have here to mix and match icons from various sets. It allows you to really have a lot of creative freedom over exactly which icons you are going to be using, and it also allows you to make a smaller font. So instead of having to download several different icon fonts to get the icons you need, you can just grab the ones that you want, which is really cool.
So now that we have selected some of these existing icons to get it started, I'm going to show you how to add your own art work, next.
Note: Glyphs Mini is only available on the Mac.
- What is an icon font?
- Searching options for creating icon fonts
- Choosing existing icons from an online service
- Setting up your font-creation workspace
- Drawing curves
- Creating compound paths
- Exporting glyphs
- Setting glyph properties
- Simplifying paths
- Exporting your icon font
- Using Font Squirrel to generate web fonts
- Testing icon fonts