0

I look around the web, and there are a lot of tutorials on how to create icons, but my question is, how do you unify the icons into a set using illustrator?

So here's the problem: I am a UI Designer, and icon creation is kind of a side job when needed. A lot of times, I use fontello to pick the ones I want. Development then use the fonticons like fonts onto the UI -- More often than not, I have to custom create them.

The icon creation part isn't the hard part, the hard part seems to be unifying them into a set. The sizing seem to be all different when they're converted into fonts even if we set them to all, say, 12px, due to the padding around the artboard. How do you account for that? Just enlarging the icons to the max artboard size either width or height?

But how do you account for the different shapes that appear to be bigger or smaller, for example, an icon (like the save floppy icon) where width and height can go to the maximum length due to the square nature of it, versus like, the refresh icon (circle outline with arrow sticking out). If I push both of them to the edge, the refresh icon will look smaller.

Is there a way to measure it, and account for all these problems?

Edit with example at the bottom (not my icon set but a font icon set from the web -- apologize to the author for not crediting, i don't know whose it belongs to)

icons

I put a grid on it (imagine the red lines are individual artboard in illustrator). Notice how some icons are at the edge and some has padding/space around it. The question is, what is the rule, if any, with sizing, if I convert them into fonts using some generator like fontello?

Edit 2: A screenshot on fontello. When I make the artboard the edge of the icons, width or height. My icons seem obviously bigger than the default ones at fontello. So it seems like there may be some rule other people follow that I don't know about and I shouldn't be creating the icon to the edge of the artboard.

fontello

  • pictures would help with this one. – D.Mas Jul 7 '16 at 17:07
  • @D.Mas pictures added. – CleverNode Jul 7 '16 at 18:04
  • I'm not sure I totally understand the problem... Is it that you're exporting your icons using some font creation service and the icons are actually coming out at incorrect sizes? Or are the sizes as intended but they appear different relative to each other because they have a different visual weight? – Cai Jul 7 '16 at 18:04
  • 1
    Have you read the fontello faq re illustrator artboards? – Cai Jul 7 '16 at 18:13
1

It probably has to do with the way you're importing/exporting them. Try exporting them with a transparent rectangle as a background. That way they'll all have the same base size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.