[00:00:00]
Hey everybody, just a quick heads-up before we start. If you're listening to the audio version, this episode gets pretty visual, and Noah and Jory pull up some grids, some key shapes, and a few sneaky pixel cheats on screen. So you might wanna catch this one over on our YouTube channel. You'll still get plenty out of it by ear, but your eyeballs are gonna thank you.
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. Today, I'm joined by Font Awesome designers Noah Jacobus and Jory Raphael to talk about Pixel, our pixelated classic video game inspired Pro Plus icon pack.
We get into the inspirations for Pixel, including the Game Boy, the little yellow handheld game with the [00:01:00] hand-crank, Playdate. A tip of the hat to Susan Kare, and why faking pixels with vectors is way more work than it sounds. All right, let's get into it
Jory: Let's talk about Pixel
Matt: Yeah. So clearly, I mean, the... No other thing that comes to mind automatically is a Game Boy. Um,
Noah: of it
Matt: uh, w- mean, maybe it's obvious, but was that, uh, an inspiration of like, "Oh, what if I did an icon pack and sorta used that as a jumping off point?"
Noah: Uh, for marketing 100%, especially for this big hero image that we have on, on the webpage
Matt: Yeah
Noah: Pixel Pack. yes, ga- the original Game Boy was, was the main inspiration, including the little bit of, like, sha- shadowing you can get on that, uh, old display.
Matt: Угу
Noah: Um, the initial inspiration probably of why I wanted to [00:02:00] tackle...
I mean, we talked about, I think, the value of having some kind of a pixelated set. my main kind of day-to-day influence and point of reference for pixel art these days is actually the Playdate.
Matt: Oh, okay
Noah: the little, little yellow console,
Mm-hmm
Jory: Yep.
Noah: um,
Jory: makes
Noah: that Panic makes. Panic in Portland.
their season three of games did just start last week, which has been very excellent so far. But, um, and I know that you and I have actually talked about the Playdate before on the podcast, Matt,
Matt: Угу
Noah: talked about creative constraints and inspiration and stuff like that.
and
Matt: Yeah
Noah: their whole bag is, you know, having this tiny little console that has a tiny little screen is not backlit. It's black and white, they make all... You know, that was an intentional choice from a creative constraint standpoint as well [00:03:00] as, you know, keeping costs down and everything for a brand-new, uh, handheld.
So wanting to take some of that same kind of inspiration... It was probably the Playdate and of course one of my icon heroes, Susan Kare, who designed all of the iconography for the original we- Mac way back when. And you'll actually see, if you look at the Pixel page on the Font Awesome website, you'll see two very distinct kind of nods to those references.
We have a little, a little riff on a Playdate setting screen, uh, with a, our fearless leader kind of peeking out, hiding in the background. Uh, as well as a, a riff on the macOS 7 System Settings panel, and kind of using some of our stuff in context there. So those are some of my main touchpoints for this kind of work.
I still really love... I mean, pixel art is still alive and well with a lot of artists and a lot of game developers, so it's still very much a vibrant [00:04:00] and burgeoning field. But
Matt: Mm-hmm
Noah: for our circumstances, it was all very much more restrained and trying to figure out how to make it work in, uh, a line work context in a small grid.
Matt: Mm-hmm.
Jory: Yeah. What's really, what's kind of funny about the Pixel Pack here is, like, that, it was another one of those, like, it'd be fun, it'd be fun to do a pixelated icon set. Um, but, like, w- uh, we've talked before about Font Awesome originally. Like, one of the reasons Font Awesome took off originally was that in the early...
Like, it, it was right around the time when, um, the, the high, the HDR screens were introduced. So the high def screens were introduced, and Font Awesome, because it was a, a, a font, was able to scale kind of very cleanly, whereas a lot of icons on the web at that point were actual raster graphics that were designed for a very specific size.
Um, and so i- if someone wanted to have w- to work on a high density display, they would have to scale it up, you know, 2X, and then clean [00:05:00] up all the weird anti-aliasing that would happen. But because Font Awesome was an icon font, uh, just like most type, it could just scale cleanly, and there was no resolution issues there.
This pack is kind of going the opposite direction, where, like, it is all about that pixel perfection, but, like, you know, i- it's not really pixels. Like, this, like Noah said, this is, this is a vector drawing, and, and we are kind of interpolating the pixels here and, and making it. But, you know, so it'll scale up and, you know, quote unquote "be pixel perfect" at certain sizes, but, you know, they, this is, these are just, uh, uh, vector, a vector approximation of a pixel, pixelated, uh, square there.
So-
Noah: Correct. Although you could scale it down to half size and be, uh... 'Cause we're kind of doing a little bit of pixel cheating, kind of each set of two, two by two as
Jory: Yeah
Noah: But because of, you [00:06:00] know, some of the changes in technology that afford us having higher density everything, as you can see, uh, if you look closely at our skull icon, you might notice that the eyes, uh, are maybe on a slightly different grid than the exterior frame of the skull,
Jory: Right
Noah: we can cheat a little bit because we're not beholden to some of the same rules.
And if there's enough visual distance between two elements, we can kind of fudge that grid a little bit for what's going to look the best in context
Jory: Can you, can you put the pixel preview on there to show that?
Noah: can. There it is.
Jory: Oh, it's c- but is your t- big, we're...
Noah: one though. Hold on,
Jory: Y- yeah. You'd have to scale it down in half
Noah: put it over here. There you go.
Jory: Yeah. So if this were an actual pixel icon font and we wanted it at, or icon, and we wanted it at that size, it, you know, like knows that we cheated. But you know what? That's [00:07:00] okay. That's okay
Um, and we also, what did-- We threw in a, the rocket ship in here, I think is the same rocket we used for the Space Awesome logo
Noah: Yes.
Matt: Nincs
Jory: Which is our, uh, yeah, our fun little, fun little, uh, text-based adventure that Ed built
Noah: Mm-hmm. Whenever we work on one of these Pro+ packs, kind of the baseline is that 200 icons that we've identified as being some of the most used. designers, us included, are f- have full liberty to expand beyond that other stuff too. So it made a lot of sense to make a lot of both device icons, uh, that we already have in Font Awesome core, as well as a lot of other video game-related stuff, of course, like our question blocks and aliens, ghosts, uh, mushrooms, whole nine yards, explosions This one
Jory: av den
Noah: new ad- the, the [00:08:00] eggplant is a new addition
Jory: Is that
Noah: to
Jory: nice?
Noah: we had at a snuggle
Jory: Oh boy. Oh boy
Matt: I'm not... Anyway,
Jory: Yeah. You were part of that conversation, Matt.
Matt: no, I
Jory: it was y- it was your idea.
Matt: there.
Jory: Um,
Matt: no
Jory: the, this also does sh- uh, we're showing here at the very bottom there in the center is that, uh, the Font Awesome logo, which is another little fun kind of Easter egg that we include in all of these Pro+ packs is, is a, a version of that Font Awesome flag done in the style of the pack.
So that's always a fun little challenge with each of the Pro+ packs is to, uh, is to render our flag, uh, so that it matches the other icons.
Matt: Did-- Now I'm curious. Uh, it would make sense if, um, Ed were to make a change to Space Awesome and include these icons and, and switch it out. [00:09:00] W- has, has anybody m- heard him mention that at all? I'd be curious to know.
Jory: Has he been approached? I don't know. Uh,
Matt: I'll, often ask him about
Jory: yeah, ask him
Matt: a
Noah: We have mentioned it at one point, but, um, have made, like Jory has made a little test of some other games using some of these little bits and bobs as well
Jory: Oh yeah, I did use... No, I did use the, the spaceship, uh, the little alien. I basically created a, a version of the Space Invaders game that just uses our little icons there in a fun little, little proof of concept of what we could do with it. Um,
Matt: Maybe
Jory: the pro-
Matt: we'll have to make it available to users
Jory: Yeah. Yeah, yeah.
Matt: Be kind of fun
Noah: I think I did do a test in Space Awesome with some of
Jory: he did do a test. Uh-
Noah: Also some different densities that we didn't go with
Jory: Oh yeah, we tried a bunch of different things. I even think I did an early pass at a few different icons in this style just to see what's [00:10:00] what. what did you ultimately end on as far as the pixel grid?
Noah: Yeah. Uh, these are... I me- did I put the rules in? I did. so these are based on a 24 pixel grid, so it's honestly very similar to what, uh, Google Material Design uses, for example, and kind of based our, our key shapes off of that, um, as you can see, if you can see in some of these visual examples. Um, but yeah, some of that came down to a lot of these initial sizing tests, 'cause I think we've got, uh, this initially was a larger set of key shapes that we experimented with
Jory: Yep
Noah: do some different things, um, different line thicknesses, different base grids. Uh, so yeah, we went through... There were at least three or four, I don't think they're all, in our files anymore, but there were at least three or four passes at kind of a test set
Jory: Yeah[00:11:00]
Noah: you know, 10 to 16 icons to see what felt good, gave us a good amount of detail, without kind of boxing ourselves in too much
Jory: Did you find it difficult to... 'Cause like with, i- i- in the past I've done some pixel icon design where you actually are, uh, you know, on an art board in an app like Photoshop or something, or even they have some builders where you are, you have a pixel grid and your little pen tool or whatever, you click in a square in the grid and it, it fills in.
And you're kinda, so you're building it by just kinda clicking around. But w- i- describe your process a little bit for pixel here, because like, like we said earlier, these are actually vectors, so like each
Noah: Right
Jory: little, quote-unquote pixel in the style is actually a vector square
Noah: Yep. some of that wa- it was a lot of actually drawing on paper initially, to basically figure out the, the forms that I wanted to pursue for a lot of these things. Um, but a lot of it comes from, [00:12:00] our, our key shapes that we establish. Um, we've talked about this, I think, on the podcast before, as well as in various points on the blog. Um, ways that you, if you're working on icons, kind of end up reusing a lot of shapes. You're gonna end up probably reusing a lot of circles and squares and vertical and horizontal rectangles for lots of different things. So a really good starting point, is figuring out how those are gonna function.
So, like, explored a more squared off version, and then we explored one that had, like, a little pixel removed from the corners of, like, the square and the rectangle and stuff give it a little bit softer, rounder feel, which is When you're working with stuff at this detail, like, sacrificing a pixel is a huge deal actually.
Jory: Yeah.
Noah: learning that that kind of thing would work, um, and, and figure that out. So this was a huge first step of kind of determining how different shapes would kind of balance against each other. And then it was also, as you can see here, [00:13:00] drawing, a lot of circles. Um, at different sizes because, like, I know what a full, a full-sized circle is gonna look like, but what if I have, you know, a magnifying glass or the head of a user or, you know, the, the places where your fingers go in a pair of scissors, like all of these smaller circular shapes that are gonna need to show up. And I know that I'm gonna need to figure out those curves at different scales, and they're all gonna need to go together, so that was also a big step. Um, and then being able to just basically copy and paste those into place where they fit
Jory: It's probably a
Noah: step
Jory: a little bit of a, uh, I mean, I, I, like I said, I designed, like, a, a handful of these originally, and then you improved upon them. But, like, it's just a lot of copy and pasting of those little squares and just moving them around and moving them around.
Noah: It really is. in some of the higher density ones we tried, that
Jory: Yeah
Noah: nuts, but we, we were able to rein it in a little bit. But yeah, it was a lot of, [00:14:00] a lot of copying and pasting
Jory: And Matt, the good news here is that because these are all these little just s- simple little square pixels and stuff, um, the end result is a, a typeface file that's a lot smaller than a normal one if you were to do it in... That's actually not true. I lied to you. I lied to you. Do you know why I lied to you?
Matt: would, you say that?
Jory: Because in a- like, it, it, uh, when you're drawing like a raster image, if you're just using pixels, it's just a single color, that file size is gonna be smaller than something that has a lot of anti-aliasing in these. But these, because of, because we're faking the pixels with vectors, it means that every single point in there is a data that we have to capture.
So it is actually the, the s- the circle, a circle made in pixels requires kind of more vector data in the math than a, than a circle [00:15:00] drawn with four different points and, and Bézier curves.
Noah: Yep
Jory: which, you know, it's a, a sacrifice we made.
Noah: in there
Jory: Yeah. You have to go like, "Put a point here, move over. P- point down, point over, point up, point down, point-"
Noah: Yeah. if you were drawing it like on a, a plotter or something and having to go like meh, meh, meh, meh, meh, meh, meh, meh, meh, like around each little jaggedy bit, it's a lot of information
Matt: I'm curious about, you know, the, the design process and, and maybe going back to Um, the caveman days of, uh, icon design, right? You know, so you're referencing like Susan Kare and, you know, the original Mac icons and things like that. So there were definitely constraints back then, right? And they were starting from basic tech, and I'm wondering as like somebody, you know, a couple decades removed from that and then [00:16:00] approximating something you know, a, a past style and using those kinds of constraints. this isn't exactly like a connection, but I remember hearing Jack White from The White Stripes talking about like the value of actually recording on a home four-track cassette tape, four, four-track recorder, and musicians learning how to make music with like old tech and things like that. when you do that and approach something with like constraints that you don't normally have,
what's your experience with like putting major constraints on a, a design process?
Noah: Yeah, it definitely helps you to figure things out in a more creative way sometimes. because you o- you don't have all of that freedom, you can't find, you know, you don't have a million paths to get to a similar outcome. it I feel like, helps create a [00:17:00] sense of appreciation for what has come before you, um, and the, the tradition and expertise that was required before, you know, you could just easily draw vectors to do whatever you wanted willy-nilly. and so I think going back and exploring those methods and doing that kind of thing, um, so not only helps you kind of garner that appreciation, but also helps, uh, make more m- mental connections, more, uh, more neurons connecting to each other in terms of problem-solving in the future. when you understand why things were done a certain way, the sorts of things they were having to deal with, and it also helps you appreciate the tools you have now a little bit more,
Matt: Yeah
Noah: of the, the freedom and capability that you have
Jory: It's kind of like it, it's a, um, m- uh, at least in my experience, it's a both/and [00:18:00] where some things are easier because of the constraints. Like, you're just like, "Oh, you know, I can't... The, i- if you take all these tools away, I can only use this. Okay, great. This is all I can do." Um, so some, some solutions just, like, this, there's only one way to solve it if these are the only things you can, you can use.
Um, and then some things are much, much harder because you're like, "Oh, h-how... You know, this would be so much easier if I could draw an actual circle." But like, you know, Noah's like, it's like you said, you got, like, six different circle sizes here, and they all need to feel like a circle, but you can't draw them the same way 'cause you have to make them bigger.
So in some cases, y- you know, you're faking the corner. Sometimes, like, you know, those little tiny circles, you're just chipping off a corner. But when you get to the bigger ones, you're adding in a little bit more of an angle and, and kinda hoping it works out. Um, so yeah. It's a weird, like, it's easier and harder at the same time for certain things.
And I think, but that's true, that's [00:19:00] true of the tools that we have today as well, I think, because anything's kinda possible and, um, you have to kind of, you know, so it's a lot easier to draw certain things. But then you're like, "Well, okay, but maybe I shouldn't be drawing it that complex or that, um, detailed."
it'd be kind of interesting to do a pass at these picel- pixel icons and just see what their non-pixelated version would look like if we were to have the, um, you know, to kind of fill in those corners with an actual stroke
Matt: Mm-hmm
Jory: Um, they probably look pretty similar to some of our current icons, but
Noah: All the same principles apply
Matt: are you starting to see our, our folks reporting back like, "Oh, this is a perfect set for something that we're building." we kind of have this internal Slack channel or, you know, people will give shout-outs like, "Hey, we found our icons in the wild." Are, have you guys seen any of these, uh, or [00:20:00] these particular icon packs in specific out there in the wild?
Jory: I've seen a few of them, um, certainly from people who, who write in. Uh, and I ha- do see requests for specific styles. They'll be like, "Oh, can you add, you know, this, you know, j- Jelly is missing this icon I really need," or, or, you know, "Utility, are you gonna be adding more icons to Utility?" So they're definitely being used.
Um, you know, and I, I guess maybe this is a request for folks who are listening. Like, if you've used any of these Pro+ packs in your projects, like send them along. We'd love to see them and, and highlight them in our socials or on the blog or whatnot. Um, but, you know, we're just-- We kind of make these things and send them out into the world, and who knows?
Who knows what happens with them?
Noah: Yep. I'm just glad to have made it. You know, it's kinda like the thing, like I made this for me. I wanted a pixel set, and I really like it, and if anybody else uses it, that's just kind of, know, icing on top
Matt: Well, it's a, it's a great [00:21:00] example of l- how things roll at Font Awesome is that we do try and make room for some fun and just doing something for the sake of it 'cause we enjoy it. And for sure, we know that there's other designers out there that look and ar- appreciate it. And without... We don't necessarily have to say, like, it has a very specific use on a very specific website or whatever.
It's just like, it's nice to get stuff out there that we enjoy and other people are gonna hopefully enjoy as well. So I'm, I'm really-- I, I love that we have some freedom to do that and just be playful sometimes, you know?
Jory: I also love that.
So that's Pixel
use the icons. Use them, and then show us how you use them.
Matt: fun
Jory: Space Awesome. I don't know
Matt: Yeah, go play Space Awesome. There's, there's a very practical use for, for Pixel
Jory: All right, fellas. Thanks for taking some time, [00:22:00] and, uh, I guess go make something awesome
Okay. I
Matt: Bye.
Jory: you say so.
Matt: See ya.
A big thanks to Noah and Jory for nerding out on the making of the Pixel icon pack today. And just so you know, Pixel is a Pro+ icon pack, so you'll need a Pro+ subscription to use it in your projects. You can browse the whole set, question blocks, ghosts, mushrooms, and all, on the Icons page at fontawesome.com.
And like Jory said, if you end up using Pixel or any of our Pro+ packs out in the wild, Send it our way We'd love to see what you're making. As usual, Podcast Awesome is produced and edited by this guy right here, Matt Johnson. The Podcast Awesome theme song was composed by Ronnie Martin.
The music interstitials were composed by Zach Malm, and we got video editing help from Isaac Chase. All right, guys, you know what to [00:23:00] do. Go make something awesome.
