6 ms·

Mastering the Basics of Icon Design

192 points by adrian_mrd 5y ago

danvayn 5y ago
This is a great blog for beginners. And I'm really happy to see thenounproject on here! I was extremely lucky to get a chance to work with them a long time ago -- they're an awesome company with an awesome product. They deserve all the success in the world :)
monitron 5y ago
Seeing the whole process from sketch to completed icon was extremely helpful. It can be extremely daunting to look at the polished works of art that are completed designs; I get the feeling that they sprang fully formed into the world. I'm no graphic artist but this makes the whole process seem more accessible for me to dabble in. Thanks!
- duopixel 5y ago
  If you found it interesting you may like a free web game I created two years ago... https://boolean.method.ac https://boolean.method.ac
  - RobertKerans 5y ago
    This is great! Very nice indeed, good to have alongside kerntype and similar.
  - TheRealNGenius 5y ago
    This is very well made, your other projects as well!
- micromacrofoot 5y ago
  Even if you see someone who can instantly produce wonderful looking sketches, remember that they're not producing it on the spot... it took years.
lxe 5y ago
If anyone is wondering, that's an airpod, I think.
- Animats 5y ago
  Oh, you mean an iDweeb.
- JKCalhoun 5y ago
  Ceci n’est pas une airpod
- brink 5y ago
  Oh thank God I'm not the only one.
- Cockbrand 5y ago
  Given that the title promises "Mastering", I'd somewhat expect less ambiguity in the icons' shapes.
- briefcomment 5y ago
  I thought it was trying to be a door handle
atoav 5y ago
When I learned graphics from a typsetter it went a bit like this: First lesson: A white A4 paper and one black square of fixed size. You are allowed to move and rotate. Afterwards you have to explain your compositions. Second lesson: you are allowed to scale the black square now. Third lesson: two squares Fourth lesson: three squares, colors are allowed now Fifth lesson: Circles are allowed now Etc. We talked about fonts and type only a year in, but the stuff I learned in the first five lessons was peobably the most valuable stuff I learned about graphics ever.
- RobertKerans 5y ago
  That's similar to my experience, it seems so trivial when you describe it to people, but it's ridiculously useful. Just a recommendation for anyone reading the comments & wants this kind of base level knowledge, Visual Grammar by Christian Leborg is this, basically, it's an excellent book, can normally get it dirt cheap off Amazon or wherever but link from publishers: https://papress.com/collections/design-browse-books/products/visual-grammar https://papress.com/collections/design-browse-books/products...
  - zubspace 5y ago
    I would honestly like to know, what is so groundbreaking in this book? After looking through the pages I feel in no way wiser than I was before. The article of this thread at least has some practical tips and guidelines, what to look out for when designing small icons.
    - RobertKerans 5y ago
      Its not groundbreaking, it's just a condensed package of foundational knowledge that you'd be expected to understand implicitly. It's just a nice overview, all in one short book, that's all. It's a different category of thing. The article is a technical overview of the way a single designer creates icons with a specific tool. The book isn't practical tips [well it is, but not at all the same] If you're not interested in designing and just want to, say, add some icons to a set and call it a day, then that's fine It's just, if you want to actually get very good at...anything I guess, there are base level skills and knowledge that you have to be able to unconsciously apply. eg for a similar field, when learning to draw, you need to understand perspective, composition, effect of light. You do things like draw people without looking at the paper, over and over and over again. Or draw light hitting solids: spheres or cubes or pyramids. That's kinda the bulk of what you do for quite a long time. And I think that basically applies to most fields. If you are not that interested in mastering it, then just following a step by step tutorial will get you a result, but it's just not the same thing -- there's nothing wrong with it, it just is what it is. Edit: I think the article is great! I really liked the explanation of his process, it's really useful, I don't want to trivialise it. In-depth breakdowns of process by skilled people who know what they are doing are great
karaterobot 5y ago
The mistake most beginners make is not viewing the icon at close to its intended size throughout the illustration process. SVG icons scale, sure, but human perception doesn't, so if you're zoomed in while drawing it, and don't look at it at smaller sizes until you're done, chances are you'll have made an icon that doesn't look very good. You have to draw it while zoomed in, but check it at the smallest reasonable size pretty much constantly. One reason (as he points out in the article) is that you'll probably have included too many details, and it just looks like noise when you zoom out. Another reason is that if you're not extremely careful, and aware of your intended resolution, you'll make an icon with a lot of aliasing. Aliasing often reads as blurry edges, especially on diagonal lines, and makes the icon look amateurish. You can tell a professional icon, because it's crisp and clean when displayed. The other thing to keep in mind is that icons, like logos, are all about recognizable silhouettes. Icons need to be "readable" at the edge of the user's vision, not just when stared at dead on. For the same reason, you don't want them to rely on color, or small details, otherwise they just won't work as well.
- crazygringo 5y ago
  > You can tell a professional icon, because it's crisp and clean when displayed. I've got to disagree with that part -- these days you have no control over pixel alignment or blurry edges. Both OS-level and browser-level zoom is the norm, not the exception, which means your icon edges will usually straddle pixels. And on retina-level displays, the alignment/blur doesn't really matter anyways. Designing icons to some fixed pixel grid in order to achieve "crispness" is a relic from a 72dpi or 96dpi past that is in the process of entirely disappearing. So it's not something to worry about anymore, and certainly not something that separates "professional" icons from non-professional ones.
  - kitsunesoba 5y ago
    I’m not sure that I agree. I use a normal DPI external display (2560x1440 27”) everyday for work and will probably continue to for many years to come, and desktop apps that use icons that weren’t made with to look decent at lower DPIs look really, really bad on it. It makes the app they’re used in feel amateur. I don’t think these monitors are uncommon, either. Especially for office and education use, normal DPI monitors still have far better bang for buck than 4K+ monitors do, and 1920x1080 and 2560x1440 in particular are popular with anybody who uses their machine to also play games because those resolutions are for more reasonable to drive than 4K+. It’ll be great once we’re in the “HiDPI by default” era but that’s still several years out.
jfengel 5y ago
Does Inkscape have equivalents to these operations?
- RobertKerans 5y ago
  Yep, all vector drawing applications [that are any use] have boolean operations (add, subtract, intersect, difference plus normally a few variations on these). The one the writer is talking about in Illustrator is the shape builder tool, which is very neat, abstracts away the above, lets you build up complex shapes from primitives a bit more quickly and naturally (it can both add and subtract), that specifically I'm not sure about, it's been a long time since I used Inksacape & I don't know what the feature set is currently like (or how easy plugins are to write, as if they're easy enough I'd expect something similar to that to have been written, it's a really nice feature of Illustrator). But you can definitely do all he talks about just with boolean operations.
zwieback 5y ago
This is a very nice and useful article but how do you design a Windows 95-style icon? I remember trying and trying and mine always looked like crap. I stared in wonder and amazement at the masterpieces of that era and just couldn't reproduce anything similar.
- Animats 5y ago
  It helps to be Susan Kare, who did both the original Mac icons and many of the original Windows icons. She used graph paper and pencils to set individual pixels. Every pixel counts in her icon work. It's easy to make icons if they're big. It's tiny, informative ones that are hard. (Her web site, "kare.com", is gone. There is a copy at "https://web.archive.org/web/20210403001323/http://kare.com/ https://web.archive.org/web/20210403001323/http://kare.com/")
  - CharlesW 5y ago
    FYI, her portfolio is now at https://www.behance.net/susankare https://www.behance.net/susankare, while her shop/main site is at https://kareprints.com/ https://kareprints.com/.
- peterburkimsher 5y ago
  If you'd like to experiment, I gathered a load of old Mac 32x23 icons: https://github.com/iconpush/iconpush.github.io/tree/master/PNGs32x32x32 https://github.com/iconpush/iconpush.github.io/tree/master/P... I also built a visual search tool, though it's not particularly useful. The text search is a little better. https://iconpush.github.io https://iconpush.github.io I wrote some documentation about how I gathered the icons too. https://iconpush.github.io/docs.html https://iconpush.github.io/docs.html
  - zwieback 5y ago
    Very nice, thanks!
deleted 5y ago
[deleted]
paulryanrogers 5y ago
Always interesting to see how another artist works. The technique they demostrarte is very stroke dependent. My preference is for sharper edges and less uniformity. Though my uni professor taught us to exercise a lot of different styles to avoid getting stuck on one.
peterburkimsher 5y ago
The Noun Project has been really useful to me, especially for finding good icons with permissive licensing. I'm impressed at how well artists can express a concept with a few lines! I've also thought about how to communicate actions, effectively making The Verb Project. Usually there's an input and output, sometimes storage or feedback loops too. Most of my basic shell scripts are written to convert data from one format to another. I made a standard icon format: a diagonally-divided icon with the input on the top left, and the output on the bottom right. For example, GPSToGalileo will take GPS coordinates as an input, generate a KML file, and open it with Galileo (Guru) offline maps. Or iMessageToCalendar. Or ClockBible. Or NotesToText. Having designed icons, I then put them as links on my (jailbroken) iPhone homescreen, to trigger these scripts. Having an auto-generator for icons could make some command-line tools much more accessible for non-technical users.
deleted 5y ago
[deleted]
lukaszkups 5y ago
ah, thenounproject - I've uploaded couple icons there years ago, and still receive from time to time an extra $10 for them. I really wish to find more time and create more icons - any success stories among HNers with thenounproject maybe?
Cockbrand 5y ago
The earbud icon in the article's header image (center row, 3rd from the right) looks fairly NSFW at first glance, at least for eternal 15-year-olds like myself.
ChrisMarshallNY 5y ago
This is a very useful article. He has a few Illustrator techniques that are helpful. Icon design is really difficult. Simple is hard. A good rule of thumb, for me, is that I always begin my illustrations in vector; usually with Illustrator. If possible I keep them as vector. An icon should always work as monochrome; preferably pure black-and white. Color should be “icing on the cake.” An icon should be immediately recognizable, even when very small or fuzzy, and in monochrome. Not so easy.

192 points by adrian_mrd 5y ago

This is a great blog for beginners. And I'm really happy to see thenounproject on here! I was extremely lucky to get a chance to work with them a long time ago -- they're an awesome company with an awesome product. They deserve all the success in the world :)

monitron 5y ago

Seeing the whole process from sketch to completed icon was extremely helpful. It can be extremely daunting to look at the polished works of art that are completed designs; I get the feeling that they sprang fully formed into the world. I'm no graphic artist but this makes the whole process seem more accessible for me to dabble in. Thanks!

duopixel 5y ago
If you found it interesting you may like a free web game I created two years ago... https://boolean.method.ac https://boolean.method.ac
- RobertKerans 5y ago
  This is great! Very nice indeed, good to have alongside kerntype and similar.
- TheRealNGenius 5y ago
  This is very well made, your other projects as well!
micromacrofoot 5y ago
Even if you see someone who can instantly produce wonderful looking sketches, remember that they're not producing it on the spot... it took years.

lxe 5y ago

If anyone is wondering, that's an airpod, I think.

Animats 5y ago
Oh, you mean an iDweeb.
JKCalhoun 5y ago
Ceci n’est pas une airpod
brink 5y ago
Oh thank God I'm not the only one.
Cockbrand 5y ago
Given that the title promises "Mastering", I'd somewhat expect less ambiguity in the icons' shapes.
briefcomment 5y ago
I thought it was trying to be a door handle

atoav 5y ago

When I learned graphics from a typsetter it went a bit like this: First lesson: A white A4 paper and one black square of fixed size. You are allowed to move and rotate. Afterwards you have to explain your compositions. Second lesson: you are allowed to scale the black square now. Third lesson: two squares Fourth lesson: three squares, colors are allowed now Fifth lesson: Circles are allowed now Etc. We talked about fonts and type only a year in, but the stuff I learned in the first five lessons was peobably the most valuable stuff I learned about graphics ever.

RobertKerans 5y ago
That's similar to my experience, it seems so trivial when you describe it to people, but it's ridiculously useful. Just a recommendation for anyone reading the comments & wants this kind of base level knowledge, Visual Grammar by Christian Leborg is this, basically, it's an excellent book, can normally get it dirt cheap off Amazon or wherever but link from publishers: https://papress.com/collections/design-browse-books/products/visual-grammar https://papress.com/collections/design-browse-books/products...
- zubspace 5y ago
  I would honestly like to know, what is so groundbreaking in this book? After looking through the pages I feel in no way wiser than I was before. The article of this thread at least has some practical tips and guidelines, what to look out for when designing small icons.
  - RobertKerans 5y ago
    Its not groundbreaking, it's just a condensed package of foundational knowledge that you'd be expected to understand implicitly. It's just a nice overview, all in one short book, that's all. It's a different category of thing. The article is a technical overview of the way a single designer creates icons with a specific tool. The book isn't practical tips [well it is, but not at all the same] If you're not interested in designing and just want to, say, add some icons to a set and call it a day, then that's fine It's just, if you want to actually get very good at...anything I guess, there are base level skills and knowledge that you have to be able to unconsciously apply. eg for a similar field, when learning to draw, you need to understand perspective, composition, effect of light. You do things like draw people without looking at the paper, over and over and over again. Or draw light hitting solids: spheres or cubes or pyramids. That's kinda the bulk of what you do for quite a long time. And I think that basically applies to most fields. If you are not that interested in mastering it, then just following a step by step tutorial will get you a result, but it's just not the same thing -- there's nothing wrong with it, it just is what it is. Edit: I think the article is great! I really liked the explanation of his process, it's really useful, I don't want to trivialise it. In-depth breakdowns of process by skilled people who know what they are doing are great

karaterobot 5y ago

The mistake most beginners make is not viewing the icon at close to its intended size throughout the illustration process. SVG icons scale, sure, but human perception doesn't, so if you're zoomed in while drawing it, and don't look at it at smaller sizes until you're done, chances are you'll have made an icon that doesn't look very good. You have to draw it while zoomed in, but check it at the smallest reasonable size pretty much constantly. One reason (as he points out in the article) is that you'll probably have included too many details, and it just looks like noise when you zoom out. Another reason is that if you're not extremely careful, and aware of your intended resolution, you'll make an icon with a lot of aliasing. Aliasing often reads as blurry edges, especially on diagonal lines, and makes the icon look amateurish. You can tell a professional icon, because it's crisp and clean when displayed. The other thing to keep in mind is that icons, like logos, are all about recognizable silhouettes. Icons need to be "readable" at the edge of the user's vision, not just when stared at dead on. For the same reason, you don't want them to rely on color, or small details, otherwise they just won't work as well.

crazygringo 5y ago
> You can tell a professional icon, because it's crisp and clean when displayed. I've got to disagree with that part -- these days you have no control over pixel alignment or blurry edges. Both OS-level and browser-level zoom is the norm, not the exception, which means your icon edges will usually straddle pixels. And on retina-level displays, the alignment/blur doesn't really matter anyways. Designing icons to some fixed pixel grid in order to achieve "crispness" is a relic from a 72dpi or 96dpi past that is in the process of entirely disappearing. So it's not something to worry about anymore, and certainly not something that separates "professional" icons from non-professional ones.
- kitsunesoba 5y ago
  I’m not sure that I agree. I use a normal DPI external display (2560x1440 27”) everyday for work and will probably continue to for many years to come, and desktop apps that use icons that weren’t made with to look decent at lower DPIs look really, really bad on it. It makes the app they’re used in feel amateur. I don’t think these monitors are uncommon, either. Especially for office and education use, normal DPI monitors still have far better bang for buck than 4K+ monitors do, and 1920x1080 and 2560x1440 in particular are popular with anybody who uses their machine to also play games because those resolutions are for more reasonable to drive than 4K+. It’ll be great once we’re in the “HiDPI by default” era but that’s still several years out.

jfengel 5y ago

Does Inkscape have equivalents to these operations?

RobertKerans 5y ago
Yep, all vector drawing applications [that are any use] have boolean operations (add, subtract, intersect, difference plus normally a few variations on these). The one the writer is talking about in Illustrator is the shape builder tool, which is very neat, abstracts away the above, lets you build up complex shapes from primitives a bit more quickly and naturally (it can both add and subtract), that specifically I'm not sure about, it's been a long time since I used Inksacape & I don't know what the feature set is currently like (or how easy plugins are to write, as if they're easy enough I'd expect something similar to that to have been written, it's a really nice feature of Illustrator). But you can definitely do all he talks about just with boolean operations.

zwieback 5y ago

This is a very nice and useful article but how do you design a Windows 95-style icon? I remember trying and trying and mine always looked like crap. I stared in wonder and amazement at the masterpieces of that era and just couldn't reproduce anything similar.

Animats 5y ago
It helps to be Susan Kare, who did both the original Mac icons and many of the original Windows icons. She used graph paper and pencils to set individual pixels. Every pixel counts in her icon work. It's easy to make icons if they're big. It's tiny, informative ones that are hard. (Her web site, "kare.com", is gone. There is a copy at "https://web.archive.org/web/20210403001323/http://kare.com/ https://web.archive.org/web/20210403001323/http://kare.com/")
- CharlesW 5y ago
  FYI, her portfolio is now at https://www.behance.net/susankare https://www.behance.net/susankare, while her shop/main site is at https://kareprints.com/ https://kareprints.com/.
peterburkimsher 5y ago
If you'd like to experiment, I gathered a load of old Mac 32x23 icons: https://github.com/iconpush/iconpush.github.io/tree/master/PNGs32x32x32 https://github.com/iconpush/iconpush.github.io/tree/master/P... I also built a visual search tool, though it's not particularly useful. The text search is a little better. https://iconpush.github.io https://iconpush.github.io I wrote some documentation about how I gathered the icons too. https://iconpush.github.io/docs.html https://iconpush.github.io/docs.html
- zwieback 5y ago
  Very nice, thanks!

deleted 5y ago

[deleted]

paulryanrogers 5y ago

Always interesting to see how another artist works. The technique they demostrarte is very stroke dependent. My preference is for sharper edges and less uniformity. Though my uni professor taught us to exercise a lot of different styles to avoid getting stuck on one.

peterburkimsher 5y ago

The Noun Project has been really useful to me, especially for finding good icons with permissive licensing. I'm impressed at how well artists can express a concept with a few lines! I've also thought about how to communicate actions, effectively making The Verb Project. Usually there's an input and output, sometimes storage or feedback loops too. Most of my basic shell scripts are written to convert data from one format to another. I made a standard icon format: a diagonally-divided icon with the input on the top left, and the output on the bottom right. For example, GPSToGalileo will take GPS coordinates as an input, generate a KML file, and open it with Galileo (Guru) offline maps. Or iMessageToCalendar. Or ClockBible. Or NotesToText. Having designed icons, I then put them as links on my (jailbroken) iPhone homescreen, to trigger these scripts. Having an auto-generator for icons could make some command-line tools much more accessible for non-technical users.

deleted 5y ago

[deleted]

lukaszkups 5y ago

ah, thenounproject - I've uploaded couple icons there years ago, and still receive from time to time an extra $10 for them. I really wish to find more time and create more icons - any success stories among HNers with thenounproject maybe?

Cockbrand 5y ago

The earbud icon in the article's header image (center row, 3rd from the right) looks fairly NSFW at first glance, at least for eternal 15-year-olds like myself.

ChrisMarshallNY 5y ago

This is a very useful article. He has a few Illustrator techniques that are helpful. Icon design is really difficult. Simple is hard. A good rule of thumb, for me, is that I always begin my illustrations in vector; usually with Illustrator. If possible I keep them as vector. An icon should always work as monochrome; preferably pure black-and white. Color should be “icing on the cake.” An icon should be immediately recognizable, even when very small or fuzzy, and in monochrome. Not so easy.