Interviewer: Matt:
Welcome to Podcast Awesome, where we chat about icons, design, tech, business, and nerdery with members of the Font Awesome team.
I'm your host, Matt Johnson. In this podcast, Font Awesome co-founder Travis Chase and I chat with senior icon designer, Jory Raphael, about some of the highlights of Font Awesome six. We also reveal how Travis flexed his boss muscles to get a special category of icons completed.
Font awesome has been unleashed upon the world. It is definitely awesomer than Font Awesome five. So, Jory-

Jory Raphael:
Wait, hold up, hold up, hold up, hold up, hold up. You just said Font Awesome has been unleashed upon the world.

Interviewer: Matt:
Yeah.

Jory Raphael:
I think you meant to say Font Awesome six.

Interviewer: Matt:
Yes.

Jory Raphael:
Has been unleash-

Interviewer: Matt:
That's what I meant. That's what I meant. Font Awesome six. It's better than five and it's been unleashed upon the world. So, my question to you Jory, is why is Font Awesome six awesomer than five? What did we build in Font Awesome six?

Jory Raphael:
Well, okay. So, when I joined the Font Awesome team, I was probably one of the first kind of more specialized roles. So, I came on as an icon designer primarily. And up until then Dave had been making all of the icons, but he had also been running the company and working with the rest of the team on building out the website and the technology and all that. So, there was a kind of natural split attention. And so, Font Awesome five is great and we did a lot of really fun things with it. We released the new Duotone style and the light style with Font Awesome five, but six with me coming on board really gave us the opportunity to look at everything holistically and take what had worked with five as this kind of massive set and refine it, set some rules.
The first time, five was like a combo of Dave and me as far as the icon styles went. And so, with six I was able to look at it all and kind of start fresh in some regards and work build upon it, throw out some of the things that didn't work so well, but really make the design kind of as good as we could make it.

Interviewer: Matt:
Part of that work was rebuilding all of the icons. What does that mean when you rebuild all of the icons from scratch?

Jory Raphael:
Well, you stare at a computer screen for hours on end and just move little vector points around.

Interviewer: Matt:
Was that just sharpening up the designs? Was it tech behind it? What was-

Jory Raphael:
Well, so the first step was we knew that with Font Awesome six we wanted to create a new thin style, had a half of a pixel line weight to it. And so, the very first thing we did was take all of the existing icons that we have and I basically looked at each one and made a thin version of it and it involved making some decisions as to how those icons were going to look and be a little different because some of the choices you can make in our other styles, like the solid style just are different with a thin one because it's an outline kind of style. So, it's line based, you can get away with some more things, but it's also a little more fiddly because you have almost a bigger canvas to work with, but you still want it to look at it small sizes.

So, we started with the Thin style and going through each of the icons and kind of setting up rules for them. And in a lot of cases, literally I would have to get into the technical, almost trace the old icons just to make sure they were generally looking, kind of had the same metaphors. I wasn't going to show and icon at a different angle in the different styles. I don't know, as an example, if our cat icon, you're seeing the cat's face and the view of its body, we're going to do that same kind of angle and view for the thin icons. It just took a lot of time to do it all.

Co-interviewer: Travis:
Yeah. Inquiring minds want to know, yeah, why all these styles? Why do we need these suckers?

Jory Raphael:
Okay. You can check that question off the list now, that you need all these styles because every project is different, and every brand is different and your website may have a look and feel that sets you apart from your competition or is more serious or more lighthearted. And so, by having different icon styles, you can kind of fit the icons into your brand hopefully in a seamless way, similar to how you might choose a different typeface of your project, you can choose a different icon style for that. And so, with Font Awesome six, we now have five core styles in our classic family, which are the solid, regular, light, thin and duotone. And throughout this year and next year we'll be introducing those same styles, but in a sharp family. So, if your brand is a little more serious or a little more avant garde, they might work better for you in those situations.

Interviewer: Matt:
Do you have any examples of what icon style would fit a certain aesthetic or type of site approach to design?

Jory Raphael:
Yeah. So typically, we would suggest that you use our solid or regular styles for when displaying an icon smaller, where it needs to really kind of be legible at a really small size. Those icons tend to work better, but for websites that are maybe a little more modern or a little more friendly, our light styles great, which is based on one pixel line widths. They're just a little more open. And with Font Awesome six, I think in general we've kind of leaned a little bit more friendly with our corner radiuses and we have fully rounded end caps on all of the strokes for the salt classic style. And then, the sharp style is obviously going to go in the other direction and be much sharper. So, we're trying to bridge the gap in both directions.

Interviewer: Matt:
Building the icons. You switched software that you used maybe in the last, what, six months or so?

Jory Raphael:
Yeah.

Interviewer: Matt:
You switched it to-

Jory Raphael:
That's been a huge amount of work too.

Interviewer: Matt:
You switched to Figma. What's the story behind that? Why did you do that?

Jory Raphael:
Well, so the core of it was we... Traditionally, all of my icons were designed in Illustrator, very powerful vector editing software. And as we were thinking about building out sharp, there are just some features of Illustrator that meant I was going to have to redraw a lot of things for not a lot of gain. I think that, I'm not saying that super well. So, we recently made the decision to switch to Figma for all of our icon design. And the reason for that is that when I design an icon in Figma, it remains editable. So, has this feature called Boolean Groups, which basically takes all the elements you're going to create your icon out of and you can join them together into a shape, for lack of a better term, and export an SVG, which is kind of the core of what we end up uploading, uploading into our build system to build all of our fonts and whatnot.

So, in Figma I can keep that editable and then allows me to make changes. So, I can design one icon and we can make the corner sharp or keep them rounded from the same source and then export that into the source of truth that we use for our build system. Whereas an Illustrator you to get to that final step, you have to kind of flatten everything and you can't, it's not as backwards compatible or forward thinking. So, I'm trying to build things right now, so that when we design an icon, if we decided to create another variant, have a in the future, say we wanted something in between sharp and classic kind of splitting difference, I can use that same source file to create it. Or if we want to create a duotone version of our light icons, it's a whole lot easier to go back in and do that. So...

Co-interviewer: Travis:
I have question for you.

Jory Raphael:
I've got an answer. It's not going to be-

Co-interviewer: Travis:
Oh. We'll see. We'll see you Jory.

Jory Raphael:
Yeah.

Co-interviewer: Travis:
Why icons? What is it about them that you enjoy so much?

Jory Raphael:
Oh, boy. How long do you have? Why do I like icons? Because they make the complex simple because I love... There's just these little visual puzzles that get to the heart of something that it is so much more satisfying to me than words. You see a house icon and it's like it represents all houses no matter what it looks like. I don't know, I just really like how we can make these ideas that are very sometimes tricky or complex and distill them down into a simple image. When I was a kid, I wanted to be a cartoonist growing up, icons in some way use a lot of the same tricks and rules to create feelings and ideas that comics do as well. Smiley face represents all faces in some way, shape or form.

Co-interviewer: Travis:
And with that, with 6.1, we released some humanitarian icons, so it kind of plays into that a little bit. What's the story behind that?

Jory Raphael:
Wow. What a beautifully leading question, Travis.

Interviewer: Matt:
That was a great segue, Travis. Thank you.

Co-interviewer: Travis:
Yeah.

Jory Raphael:
Yeah. We're covering a lot of ground here. Oh, boy. So, the humanitarian icons were hard for me in a few ways, but the genesis of it is that as we were creating Font Awesome six and kind of promoting and advertising the fact that it was in the works, someone who worked at the United Nations reach out to us and shared that they had actually created a series of humanitarian icons that they used to use along with all these humanitarian situations across the world. There are some tricky subjects that are just easier to describe with a visual language like icons. And so, they thought that'd be interesting to collaborate with us at Font Awesome. Because we have a certain amount of reach and the tooling and software that we use to deliver the icons make them more usable in a lot of situations.

And specifically, for them, they were hoping that they could use our software for mapping programs. And so, we worked on this project with them to take all of their existing icons and translate them into font awesome style and all our different solid and regular and all that. And there's some tough subjects. We had to make icons that represented child combatants and different crises. It's unfortunate that these things exist, but because they exist, we need to be able to talk about them and recognize them and use them in presentations, be kind of concise and clear in how we communicate things. So, I think it's some important work that we did. And those are all available for free and Font Awesome, I think we released them in 6.1, so I'm really proud of the collaboration. But there was designing some of those icons is a little different than designing a mullet icon.

Interviewer: Matt:
All right. Which is yet another fantastic segue. We're always looking for a reason or opportunity to nerd out and do stuff that is just pleasing to us to put something out in the world. This is funny.

Jory Raphael:
Yeah.

Interviewer: Matt:
So, where there icon sets are particular icons that kind of stand out to you from what you built into E6?

Jory Raphael:
Nope. They're all my babies. I love them all equally.

Interviewer: Matt:
We don't play favorites here.

Jory Raphael:
Exactly. I don't know. What are some of the fun ones? Do you have any favorites Travis?

Co-interviewer: Travis:
Tabletop gaming are some very close to my heart as I abuse my power to get those made and put into the set.

Jory Raphael:
You withheld a paycheck, I think.

Co-interviewer: Travis:
I don't think that's true.

Jory Raphael:
Maybe I threatened, just slightly threatened the paycheck.

Co-interviewer: Travis:
One of my favorites is the coffee being just a big coffee nerd. Just love putting that everywhere. I love all some of the little references to nerd things that we like our business time icons or our poo storm, dumpster fire icons. I think those are quite fun. And even recently we had complete breakdown and an investigation into the mullet icon. Which is-

Interviewer: Matt:
Oh, yes.

Co-interviewer: Travis:
Was quite great.

Interviewer: Matt:
Oh, we had to go in into depth on that. I mean, why wouldn't you?

Co-interviewer: Travis:
It's iconic.

Jory Raphael:
Well, funny thing is that I think that some of the icons that get most of the attention, and by that I mean people will tweet about the hymn or write in about them and say that they need to find a way to use with such and such icon in a project are quite often the ones that we included just for fun.

Interviewer: Matt:
Right.

Jory Raphael:
And you need a magnifying glass icon that's important. A lot of websites need that.

Interviewer: Matt:
You need your social icons.

Jory Raphael:
You do, you need your social, you need all sorts of things. But with that part of the core of Font Awesome is to have fun with things. It makes it so much more interesting to include an icon like the poo storm icon. That was a joke, I was designing set of weather icons and a cloud icon has some very similar curves to an icon of poop. And I was designing a cloud icon and it had a little lightning bolt and so I just took the poop icon and added a lightning bolt and it's resonated with a lot more people than I thought it would. So, those are the ones that bring me joy and they're just fun to add. And why not?

Interviewer: Matt:
Why not? And so this would be a challenge to all the listeners that they would find ways to use the dumpster fire and poo storm icons, make it happen people, let's figure out a way to make this happen. So, we recently brought on a new icon designer. Noah, can you tell us a little bit about him? And...

Jory Raphael:
I think the icon design world is not relatively small, but there are over the years, I have followed a lot of people who are fantastic artists and are sharing their icons and Noah Jacobus is one of those icon designers who, his work just constantly has made me jealous. I mean, he posts things that I wish I had designed and his skill and detailing creativity, I find amazing. We actually got him to work a little bit on some contract work for us a little while ago as kind of sneakily get him excited working with us at Font Awesome. Finally, popped the question and he is here working with us and I'm so excited because I'm excited because he's a better icon designer than I am.
And so, that means that our stuff is just going to get better and it also means that I can focus on some other things as well at Font Awesome. Am not alone on the icon design front as well. And we have all sorts of fun ideas and kind of cool ways to improve Font Awesome to add new styles and to do smaller one-off sets and stuff like that, that is going to be a whole lot easier with someone of his caliber and talent on the team.

Interviewer: Matt:
All right, so lightning round. Favorite icon go?

Jory Raphael:
I like the bomb icon.

Interviewer: Matt:
Yeah.

Jory Raphael:
The bomb used to show up on the classic max as a system error had happened. And-

Interviewer: Matt:
That was Susan Kare?

Jory Raphael:
Yeah. Susan Kare designed the original one there and she was a huge inspiration for me. And I just remember when I was younger being on the computer and those would pop up. And that one in particular, maybe because it was... You couldn't do anything else on the computer, so it was front and center focus. I just latched onto that particular icon as like, "Oh, that's a really interesting use case." And your computer wasn't going to explode, obviously. Or I hope it... Maybe at the time I didn't know, but it took something that was kind of a serious thing and it made it a little bit, added a little levity to it. Her bomb icon is probably better than my bomb icon. That's why the bomb icon is kind of holds a special place in my heart.

Interviewer: Matt:
Right. Yeah. It's a good use of lots of different elements. Something is happening, it sends a clear signal. It's sort of funny. It looks cool. It's like all of the things.

Jory Raphael:
And it's a classic cartoony bomb.

Interviewer: Matt:
Yeah.

Jory Raphael:
Arms don't look like that anymore more. Hopefully those, that's a...

Interviewer: Matt:
Unless it's a spy versus Spotto. Right. Yeah.

Jory Raphael:
Right. Yeah. It's a cartoon bomb. I don't know, are those real? Did they actually do bombs actually look like that one day? Probably, little or maybe little. Little cherry bombs.

Interviewer: Matt:
Right.

Jory Raphael:
Little firecrackers.

Interviewer: Matt:
So, how about you Travis? Favorite icon?

Co-interviewer: Travis:
Oh, man. That's a tough one. Probably, oscillate between coffee icon just because Rose coffee, love coffee, drink coffee, live, breathe coffee, and then the-

Jory Raphael:
You should be swallowing it, not just breathing.

Co-interviewer: Travis:
It's probably safer that way. And then, also the D20 Tabletop gaming big part of my life and sharing that with others and it's kind of fun that my subtle abuse of power, I got to have a nice icon that I can use represents a big part of my life.

Interviewer: Matt:
It has. It's privileges being the boss.

Co-interviewer: Travis:
Sometimes.

Interviewer: Matt:
Yeah.

Co-interviewer: Travis:
Sometimes it does. Absolutely.

Interviewer: Matt:
Yeah.

Jory Raphael:
That's an example of an icon that was actually pretty complicated to design because it has so many interior shapes. It's a simple object, but it represent each of the faces in all of our different styles. The solid style where we have a lot of cutouts was one challenge to solve. And then, the regular style where the lines are a little bit thicker is another style that we had to solve that. And then, the light style and the thin style. So, that was the one that I remember struggling with and we could probably, I'll ask know what it may be redesign it, so we can make it even better for you.

Interviewer: Matt:
Thanks for listening to Podcast Awesome. A special thank you to Jory and Travis for coming on the show. If you like what you've heard, please give us a rating and review and share this episode with your friends. This episode was produced and edited by yours truly, Matt Johnson. The Font Awesome theme song was composed by Ronnie Martin and Audio Mastering was done by Chris Enns at Lemon Productions.