Understanding Iconography
An AMA (Ask Me Anything) on iconography with Václav Vančura on iconography and best design practices surrounding the creation of icons.
Václav Vančura — Hi, everyone! Thanks for inviting me to this Slack channel! It’s a great pleasure for me to be with you today. You have a wonderful community here — honestly, I wish we had something similar in our part of Europe; maybe I should start it.
My name is Václav Vančura (which I, for multiple reasons. often write as Vaclav Vancura — without our local accented characters; pronounced like this). I live with my family (wife, three kids, and two cats) in Prague, Czech Republic.
Through my life, I did a lot of things — in the last six years I’ve been a designer of Visual Studio for Mac, but lately also other Microsoft products like the rest of Visual Studios and some other Xamarin products. I am the go-to person when a product spans across multiple platforms — I am afraid my best skill is to understand how a particular design system looks to the last pixel and to replicate UI inconsistencies and flaws.
I basically made my living out of my obsession, which is impressive that the humankind got to the stage to allow that. As you might expect from the title of this AMA, I am the person who made all the icons for Visual Studio for Mac, which sounds like a horrible amount of work, but I’ve been doing it since 2013.
As I said I did a lot of things in my life, and if there were no computers, I think I’d be a comics/ad illustrator (which I actually was, for a lot of years, and honestly, I am glad I don’t need to anymore, it’s a tough job). But luckily there were other exciting things to do: Flash (for 14 years!), JS/CSS/HTML (I wrote a complex CSS framework for a large San Francisco publishing house, so complex that I don’t want to see CSS anymore, with a notable exception of my website).
Through the years I learned multiple programming languages: BASIC, C, Assembler, Pascal, JavaScript with all possible dialects, ActionScript, Objective-C, and after I got a sense of C# (in 2013), I joined Xamarin — initially just to make icons (Xamarin was later acquired by Microsoft, in 2016). Frankly, I was never particularly excellent at coding.
I rather enjoyed working in all IDEs (integrated development environments, applications used to write code) I was able to touch: Turbo Pascal, Delphi, Wacom C++, FDT, IntelliJ Idea, and of course MonoDevelop / Xamarin Studio / Visual Studio for Mac. I think I am on the right spot now: I am the designer who’s been with IDEs since it had started, and that’s why I love my job — it’s a weird hobby which became my job (but that’s scary too).
See, I was always somewhere in between coding and design. Luckily, there are other things I like to do when the work is over. I’ve spent a too long time on trying to produce a game (I never finish anyth). So I decided to do what doesn’t consume that much time: I draw every evening what happened that day, and I carry my heavy camera with me wherever I go. You can see some of my UI designs and iconography on my homepage and Dribbble — it’s far from complete, I should update it more often. You can also follow me on Twitter or Mastodon.
Of course, I wouldn’t be able to do all of this without the support of my wife and kids — and cats.
Question
Do you think all designers should learn how to code?
Václav Vančura
I believe it’s an appreciated skill — it helps to understand what engineers need. I think children should have coding lessons at schools, which could help them with analytical thinking. I also think they should learn Markdown, so they understand how to separate content from styling/design.
Question
Iconography has always been an abstract topic in design, how best can it be explained to an upcoming designer starting out with zero design background?
Václav Vančura
Excellent question. I’d say iconography helps to explain a lot of words in a small space. When the metaphor is carefully selected, you can save a lot of explanations. The brain is also faster in understanding pictures than written text. Hence, speed matters. I like iconography as it’s somewhere in between analytical thinking, design systems, and art craft.
Question
What are the processes involved in icon creation?
Václav Vančura
Let me write in a couple of simple steps:
- First, you need to consider where the icons will are displayed; the platform, visibility and technical requirements
- Decide the icon style
- Consider metaphors and level of detail
- The needed step is sketching; get your paper and pencil and draw something, it doesn’t need to be polished or detailed, get it out of your head and don’t be afraid to waste a ton of paper
- Then draw it in your favourite application (Figma?)
- Be sure the final icons are pixel-perfect
- Consider a grid system — it will help you tremendously
- A small colour palette is also needed.
Question
What grid system do you recommend or use, or how do you choose your grid?
Václav Vančura
We use only a simple grid system with a circle in the centre. Nothing too fancy. You might remember the iOS App icon template, that’s much more complex.
Question
In addition to the question asked by the last person, What practical recommendations/constraints should one consider when designing with icons?
Václav Vančura
I think there is a couple of constraints icon designer needs to follow:
- Platform: iOS/Android/Windows/Mac… You name it. All these icons look and feel differently.
- Technological: some devices need larger and detailed icons, some devices use a low-resolution display which doesn’t allow for such detail.
If you draw an icon for a poster/billboard (possible), you don’t need to follow such strict rules as for when designing icons for a small display.
Question
Can you recommend any article that can help one in understanding the principles you’ve stated above?
Václav Vančura
Just today Anna Golde posted this fantastic article, everything is in there (also see the links on the end of the article).
Question
With so much talk on Accessibility — what is the future of iconography where accessibility is involved?
Václav Vančura
Amazing point! We at Microsoft try to be very accessible, it’s one of the areas we excel — and it also affects iconography. Take a look at this small set of icons:
Here you can see a few ideas. First, it’s good to have a small set of colours to use. Every colour has its meaning (red is an error, yellow is a warning, blue is information, green is a success).
But this is important: you can’t rely only on colour, but also on something else. Not everybody has good eyesight, or see all the colours. For example, you need to use shapes too.
These particular icons need to work in a tiny area, busy with other information. There’s no space to use glyphs. Hence, here we use a colour and a simple shape which visibly differs from each other.
Question
What are the basic principles someone needs to master to start creating icons?
Václav Vančura
It’s good to choose a style and stick to it. And, it’s important to stay simple.
Here are a few icons from our set. Simple geometric shapes are the best, but not always you can stay that simple. In any case, the icons still need to be quick to understand.
Question
Why are there four bars?
Václav Vančura
Let me show you one more image:
Visual Studio for Mac uses two themes: light and dark. Light theme icons are the first column, and the dark theme icons are on the second one. The two blue columns contain selected state icons.
On macOS selected table rows or items have a blue background (in blue system appearance) or grey one (in grey appearance). Labels are always white when selected, and for that reason, we also render icons white.
We could technically render selected icons on runtime with code, but I still want to have a word on how and when to use them, from time to time also to tweak appearance, especially when there are overlays used.
Zoom a bit, and you’ll see that all of these icons, all the rows, differ slightly between light-theme and the dark one. When automatically inverted, they wouldn’t make any sense — take the printer, for example. Its paper would be black with white text on it, but that’s not how a printer works. If there’s a shadow and it’s inverted, it’s not a shadow anymore; a shadow becomes a highlight. I want to prevent that so the users are not confused.
And now you can see why there are two blue columns: the first one contains selected state icons for the light theme and the last one for the dark theme.
Question
What’s your favourite go-to place for icons? Or you create all of your icons?
Václav Vančura
I create all of the icons from scratch, mainly because of licenses: for us, it’s difficult to license icons from a 3rd party.
There are tons of great icon sets, but here’s my favorite one: Streamline. My friend produces another excellent icon set, GlyphIcons.
Question
Are there places one can get icons for free because most icons got price tags attached to them and being that most designers, especially the newbies can’t afford to buy icons, and they can’t also design these icons?
Václav Vančura
When I look for inspiration, I go to iconfinder.net.
Question
Please, for a someone that has just started to learn UI/UX design. Are there any basic rules the person has to pay attention to when it comes to selecting icons for a design?
Václav Vančura
I think the most challenging problem you can face when choosing icons from multiple sources is to keep the style. But if you only need simple ones, (e.g., flat or outline), it’s far easier to find icons which work together well. Complex or high-detail icons are difficult to combine.
Question
How do you keep the consistency in look and fill with an icon set?
Václav Vančura
I hope I succeeded in keeping consistency, judge for yourself — this is a spritesheet of the light-theme icons I made for Visual Studio for Mac:
The chaos above looks scary, but remember I’ve been working on this since 2015. I usually don’t make new icons from scratch, a good deal of new design are just compositions of other icons I made before.
It’s just a growing problem for me to remember all of them, both because I don’t prepare icons on a daily basis (I am more into UI design these days), but also because my memory doesn’t serve as good as when I was younger ;)
Question
So I understand icons are a type of language on its own. But all the time I still always feel the need to include text under describing the icon. Is that me been over-careful about users understanding or It is no big deal?
Václav Vančura
A language on its own! That’s an excellent summary of the iconography. It’s a universal language!
If the icon is simple enough and people know what it means, I’d safely skip the explanation. But this mainly depends on usage (see my points about technological limitations above).
Worth noting: there might be locally misunderstood icons! Some countries have problems with certain flags, for example (China vs. Taiwan). So better investigate what’s your target audience.
Also, this happened to me a month ago: I made an icon for a live preview with the Egyptian life symbol, and I was so surprised nearly nobody knew what it means. I had to come up with something entirely different.
Question
When it comes to the question of when, where and how icons should be used in a design, what guide can you give to someone?
Václav Vančura
I believe that the more important is to think what could be removed. If a detail is not needed, let’s kill it. If the icon doesn’t bring anything new, if it’s just a visual treat, that’s not a good reason to have it.
Question
What does a designer need to consider in designing icons to be used at various sizes, some icons will work well at a small size, but on increasing the size, it just looks off?
Václav Vančura
Great question! Consider the place or use of the icon. For example, if it’s an illustration in a sidebar, you can afford far more detail.
But icons need to stay simple, as I said above. Take a look at two application icons I made recently:
These are some of icons needed for an .icns file (Mac application icon): 16px, 32px, 64px, 128px and 256px.
It’s necessary to keep the icon sharp, especially in small sizes (consider the icon size in File Explorer or Finder). But on a small scale, it’s complicated. You can’t fit a whole fork in 6px as there’s no middle column of pixels to use it as a gap.
32px icons are much easier to produce, with much more space for details.
Per your question, it’s important to keep details on a level suitable for that very icon size. I start with a 32px icon and then downscale to 16px, and remove unneeded features (which on end would result in a blurry aliased chaos).
Question
How do decide when to use a flat icon design and when to use a skeuomorphic icon?
Václav Vančura
We had skeuomorphic icons in Visual Studio for Mac (then named Xamarin Studio) too: take a look: http://vancura.org/works/xamarin-studio-icons-round-1
The world has changed since then, and the icons are much simpler now. Frankly, something in between is what I’d welcome. I am not a huge friend of flat. I am impatiently waiting for bevels and shadows to come back! I’ll be waiting with bread and salt.
But how it’s looking now, our icons used in the UI are flat (with just a few colours from the palette), but application icons are skeuomorphic.
That’s how it’s on Mac, and what Apple Human Interface Guidelines recommend.
Question
Are there any special considerations one should consider when exporting icons for developers? Materials icons come in a dimension of 24px × 24px, does that mean that’s a standard dimension?
Václav Vančura
Again, depends on the platform. Every platform has a different needs for icon sizes and formats. For example Windows .ico files used for applications need 16px, 32px, up to 128px, while macOS .icns icons have resolutions up to 1024px (.icns are still required even now when Apple claims you only need one PNG file, internally this PNG translates to .icns, but you don’t have the chance to override how to let’s say 16px icon renders, if it’s sharp enough).
iOS icons have different sizes too. Android icons need a lot of sizes, but frankly, I am not an expert in mobile design and development.
We in Visual Studio for Mac use PNGs in a couple of sizes, coming from Gnome/Gtk times: 16px is called “menu”, 64px is “dnd” (as drag and drop when dragging a file icon), etc. Visual Studio Code uses SVGs.
For web it’s always good to generate a spritesheet (for example in Texture Packer) to save precious HTTP requests, you only request one hit for many icons.
Question
I was given feedback at work that the arrangement of my icons in design was not appropriate like the settings icon should come before notification icon and like that. I was a bit unsure of the feedback cos I just felt the most used icon should appear first. In my opinion, the notification icon is more used. Please, what is your take on this? Your take on the issue of icon placement and arrangement?
Václav Vančura
Settings could be last — notifications are one of the most important things, that’s what people need to see first. Consider this: how often the user clicks the icon (or looks for a notification count)? What is the primary icon? Put that first.
—
Thanks for this insight information, your time and the references shared, it was worth the time and thanks to all who contributed to make this 57 minutes a worthy one, I’ll love to have this moment again.
—
Thank you all for a great time here! And huge thanks to Namnso Ukpanah for inviting me! It was a great honour and pleasure to be with you today. Let’s meet on Twitter or Mastodon!
Join Figma on SLACK: https://figma-africa.slack.com
TWITTER: https://twitter.com/figma_africa
INSTAGRAM: https://instagram.com/figmaafrica
