The Grit

Designing icons with Lead Icon Designer at Font Awesome, Jory Raphael

Juraj MihalikJuraj Mihalik

Hi Jory. Can you tell us a little about yourself?

Hi there! Absolutely. I’m a designer and illustrator from Vermont. I’m currently the lead icon designer at Font Awesome. Before that, I worked as a freelance designer through my company, Sensible World, and am a co-founder of Notabli, a private social network focused around families.

I have an amazing wife who is much, much, smarter than me, and two awesome kids who are on track to follow that trend. I’m fairly sure I’m smarter than our cats.

I also have a degree in Performing Arts and regularly perform as part of a sketch comedy troupe with a group of ridiculously talented ladies.

When I’m not working, I’m legally obligated to say that I love to Hang With My Family™, which is true, of course. I’m also always scheming about little side projects. My current one involves creating a new icon puzzle every day this year!

Cocunut, Rabbit, Hand Grenade (Holy). What movie is this?

Let’s go through your design journey. How did it all start?

My route to becoming a professional designer was a bit circuitous, but can probably be traced to my love of stories and storytelling. I think, at the root of things, that’s what a designer is. A storyteller. Some stories are ornate, and some are whimsical, some are short and to the point. But they all communicate ideas and have the power to guide actions.

I remember that I have a copy of The Way Things Work by David MacCauley that I referenced continuously as a child. It’s a beautiful book full of illustrations on the inner workings of objects and concepts. The technical side of things was fascinating, but ultimately, it was the illustrations that kept me coming back. They told little stories using wooly mammoths hooked up to flying contraptions, and operating levers and such. I wanted to be a cartoonist for the majority of my childhood. I even convinced one of my high school teachers to let me take a semester-long independent study in cartooning.

Another influence was probably The Adventures of Tintin books by Hergé. I devoured them as a child and was enamored with his ligne claire style. I try to carry a lot of that through the work I do today.

I also remember digitally recreating the icons from the early Macintosh operating system on our household Mac. They had a profound impact on me, and I was thrilled when I could mimic them successfully. I had the chance to meet their designer, Susan Kare, last year, and fumbled my way through telling her how much of an inspiration she had been to my career. It was a high point for me.

What was your first design job?

My first “official” design job was as part of a work-study program in college. There was an opening for a graphic designer in the theater department. I jumped at the chance and soon found myself in a trial-by-fire, designing posters and programs for each of the department’s productions using Pagemaker (the precursor to today’s InDesign) and Photoshop.

Poster design, particularly for theater, was always attractive to me because it meant distilling the plot, ideas, and concept of an entire production into a single representative image. I’m only just now seeing how that connects to my current work as an icon designer!

I saw you worked for Apple. Impressive! What kind of project were you a part of?

When I started my design consultancy, Sensible World, one of my first big ongoing projects was designing the artwork for Dan Benjamin’s 5by5 podcast network. One of 5by5’s listeners, an Apple employee, reached out to see if I’d be interested in some icon design work.

Over the course of about a year and a half, I was able to work on several projects for them. The one I remember the most was a suite of app icons for the software that powered the iPads used by Apple Store employees. This was in the age of iOS 6 when the icons were a lot more illustrative and skeuomorphic.

A sampling of the podcast artwork for 5by5
App Icons designed for Apple

How did you start focusing on icon design?

When I first started designing icons, the concept of an “icon family” was in its infancy. Or at least the concept of icon-families-as-design-resource was. You could purchase little packs of related icons, but there weren’t a lot of large sets out there, and none that quite matched the style I was looking for. I was working on a project that called for a lot of icons, and I was left deciding between cobbling together a set from disparate pieces or designing my own from scratch. I opted for the latter!

Since the project didn’t have a budget for the icon design work, I proposed that I design the icons on my own and license them to the company, instead of the company buying them outright. I named the set Symboliconographograms, an incredibly smart and witty amalgamation of the words symbol, icon, pictograph, and pictogram. I promptly placed them on my blog for sale.

No one bought them.

So, realizing that the name was horrible and that no one knew who I was, or had any reason to stumble across my icon set, I renamed them Symbolicons and created a simple one-page website. And then I reached out to absolutely every person in the industry I admired and had been influenced by and gave them a free set of icons as a thank you, no strings attached.

What does your icon design process look like?

Every project is different, but my general flow typically follows the same path. I’ll usually start my design process by sketching icon ideas on scraps of paper, or more recently, in Linea on my iPad Pro. I work from home, so this is a great excuse to get out of the house and spend some time at my local coffee shop. From there, I jump straight to Adobe Illustrator for all of the vector work.

At Font Awesome, I design each of our icons in three distinct styles (as well as a soon-to-be-released fourth style), but I usually start with our solid glyph-style. Once I finish the group of icons in solid, I’ll work through our regular and light styles. It’s often a messy process, and I’ve started keeping a “scratch” layer in most of my files where I throw all of the unused and random icon variations I create.

Like with most things, how long it takes to design an icon varies drastically. Some take a few minutes, and some take hours, I’ve even had some take over a day. This usually depends on the complexity of the icon, or if there is or isn’t already an established metaphor for a specific concept or image.

A few icons from the Symbolicons Pro: Color set

How do you choose a topic or style for a specific set?

I’m going to give an incredibly lame answer to this question. And that answer is, “it depends.” I love each style for different reasons, but ultimately, it depends on what’s right for a project, or in the case of freelance work, what I’m hired to design. My personal preference is for glyph-style icons, but I love designing all types. Choosing which to use on a particular project depends a lot on the brand you’re working with and what the end goals are.

“Design” icons for Font Awesome
“Smiley” icons for Font Awesome

The bigger challenge is always how to create a recognizable icon that has a sense of style, without sacrificing legibility. When designing icons that will be used on a road sign, for instance, they need to be readable and straightforward while traveling at speed. Bold, glyph style icons are usually the way to go in these situations. And in fact, there are many guidelines, like MUTCD, that require them. When designing an icon that’s used on a sign in an office building, you may have some more flexibility. People are walking and have more cognitive time to decipher meaning. The same is true for digital applications. A marketing website may benefit from more illustrative, whimsical iconography, whereas icons in a form or utility need to be sturdy and reliable.

Icons from Symbolicons Pro being used as signage at the HQ
Icons from Symbolicons Pro being used as signage at the HQ

What’s the one thing you always keep in mind when designing an icon?

My career as an icon designer has been built around being a generalist. With large icon sets like Font Awesome and Symbolicons, my focus is on creating icons that work in a lot of different contexts and applications. And I always, always, consider how an icon will look at its native size and resolution. So while all of my icons are vector by default, I’m constantly toggling the pixel-preview on and off to make sure they work in the least ideal circumstances. I’ve also learned to not be precious with my work. At this point in my career, I’ve created thousands and thousands of icons. Some are invariably going to be better than others. And listening to feedback from customers and collaborators is immensely helpful. Just the other day, we had a customer mention that it looked like one of our icons had a little “butt” hidden in it. That wasn’t the intention, but now I can’t unsee it!

Why are icons important in the design world?

I think icons are important in the world in general, not just the design world. Pictograms are one of our oldest forms of communication. When used thoughtfully, they enhance meaning, and in some cases have the opportunity to be universally understood. There’s something so core, so basic, about simple illustrations that we’re drawn to them. (Pun intended.) Just look at how popular emoji are today.

Join 30K+ designers & developers by subscribing
to our weekly newsletter

What is an icon in your opinion and what do you like the most about designing icons??

An icon is a puzzle. Or, perhaps icon design is a puzzle, and an icon is the solution to the puzzle.

Who inspires you the most in the icon design world?

I have always loved Otyl Aicher’s pictograms from the 1972 Munich Olympics. I’m not the greatest at icons that rely on the human form, but it would be a dream to design icons for the Olympics one day.

As I said before, Susan Kare is someone whose work I much admire. I don’t think my current job would exist in the way it does today, if not for here. And when it comes to modern icon design, I’m enamored with the work of Laura Bee and Scott Dunlap.

Any suggestions for designers who want to dive into icon design?

Sure thing! The Icon Handbook by Jon Hicks is an excellent overview of icons in general, and how we use them today.

Understanding Comics (and its sequel Reinventing Comics) by Scott McCloud is a great source for understanding the mechanics of storytelling and had a lot of influence over how I design in general.

Oh, and issue number 011 of the comic Hawkeye by David Aja, Matt Fraction, and Matt Hollingsworth is a fantastic example of using icons in storytelling. Pizza dog FTW.

I’d be a poor self-promoter if I didn’t mention that I just published my first book! It’s called Goes Without Saying, and is a collection brain-teasing visual puns filtered through the lens of pictograms and pop-culture. Each page contains a little image-based rebus puzzle using only icons from Symbolicons Pro. The book is available here.

Goes Without Saying

Bonus Question: What’s your favorite avocado icon?

I mean, the one in Symbolicons Pro is pretty amazing, if I do say so myself - it comes in four different styles! And now that you mention it, I should probably design one for Font Awesome, too. 🙂

Want to stay in touch with Jory? Find him on Twitter, LinkedIn, Dribbble, Instagram or have a look at his website.

Did you like this article? Spread the word!

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.