Hi everybody. The fun area of iconography has been around for a very long time since humans realized they could communicate and reason about the world around them in picture form. And even today we rely on icons quite heavily. Whether it is in terms of the road signs that we see or other types of signage in our environment or of course in our websites and our apps and other digital interfaces where icons play a key role in helping us navigate through various screens and flows of what it is that we're doing. So to go deeper into this really fun topic, I talked to an old friend of mine and an excellent icon designer, Austin Andrews, where we talk about how we got started with icon design with computers and all the

various steps that go into having created one of the most successful largest icon communities out there. It's going to be fun. Let's get started. Austin, great to meet you. So for the audience, just introduce yourself.

Hey, I'm Austin Andrews. Uh I run an icon community. I don't know how much we'll talk about that but probably

Oh yeah. I I think the icon community stuff will be a big part of all of this. But you know before we get there though I'm curious now how did you get started you know from where you you know getting started with computers and programming and design and then we'll ultimately get to where you are now.

I am lucky in that I had a computer when I was five years old. Uh so I'm very used to them from the DOS days. Uh we had Windows 3.1 for a very short amount of time. And then luckily we went to 95 uh with the whole UI and everything. So I got it really used to using that and stuff and getting you know used to playing Doom and all the games and stuff that came with that. But like anyone they kind of start playing games and stuff and you're like oh I think I can make one of those and it's always like okay well first I have to learn to code and do all that kind of stuff. So I mean my first foray

into coding is how I met Kirupa you and that was a big leap for me. Uh I think I did a little bit of yes uh Visual Basic 6 back in the day like that was pretty fun. Uh very much just drag and drop guey attach some events sort of thing. And then action script was like or flash games were the big thing. Everyone wanted to make a flash game. So I was like, "Okay, I have to learn how to do this." And then because action script's all vector and everything, slowly moved into like more designoriented um tailoring that um and messing around with the vector tools and then um was it fireworks?

Uh Macromedia had fireworks.

Yeah. And I was to this day I still think it's one of the best applications that they killed. uh the idea of having your vector tools and your pixel tools right next to each other. Um yeah, and then I just kept doing icons and really got into vector and now the web is just all about vector everything. So it's nice progression there.

No, that's actually really funny you mentioned Visual Basic because that's actually one of the first languages I learned as well. And it's always like whenever I think of Visual Basic these days, right? I still think of like the gray UI that was a visual basic editor and it had the form UI basically which had like the dotted had like a it was gray had little dot black patterns all around to indicate it was the editable surface. There were snap points, you know, which I only gave a name to it much much later on essentially. And you know, I remember like drawing these oversized buttons because every single tutorial you read like these little books, right? Like how to use Visual Basic. We're always like, "Here's a

gigantic button. Double click it. It'll be like some weird void something. Then like you type in dim and then something else." That's all I remember now. But I always remember like it was just a bizarre world. I did skip over a silver light and the connection you have with that expression blend and I used expression blend. I knew that thing inside and out. I knew how to do all the bindings like I knew that software really well back in the day. Um all the icons I wor I made I think we had a,200 icons. I say we I actually it was just me back then uh making icons and just distributed them.

Uh nowadays we have a whole community that works with me, but uh back then that 1,200 icon pack, just watching people drag and drop and build entire apps like with hundreds of the icons, that was interesting. Uh but expression blend was like the continuation of VS where you just drag and drop components and stuff and get a little bit more work, but you had that nice vector along with it, which is nice. Yeah. So So you built 1,200 icons by yourself?

Yeah. Uh yeah, and it was actually made with expression design software uh which I still love. I still have installed on my service pro 8 here. Uh I still have it's open right now too because I still like that software.

You know, a lot of people I know from that era were very happy to hear this. So I'll be sure to tag them and let them know people still using it.

I found the developer of it because Microsoft bought the original software. Yeah. And I chatted with him a long time ago uh just because I was curious like I I actually told him how much I love the software and he goes yeah I wish they would have continued it something like that but I mean they kept it going for a few few years which was nice. Yeah.

Yeah. as part of expression studio and I think we had like two or three versions of expression studio that we included in it you know but yeah they're using it still is you know it's surprising in many ways because do you feel like the feature set that expression design had has been you know kind of complemented by other tools or is it still very unique in what it does

it uh it checks off a lot I use Figma now like most designers I actually very much I moved away from Illustrator um it's kind of weird coming hack because Pigma's eventually I think getting owned by Adobe but we're going to ignore that for now.

They added you know issues like if it passes or not. I think you might have seen that there's like a potential you know with the FTC that they may not want to go through.

Yeah. I don't want to go through uh penpot the open source version not version but a whole different separate there's an open source version of Figma kind of okay separate and its community is growing really fast because of some of the changes and just people kind of being hesitant on the idea of another Adobe product. Yeah, I I do like Illustrator. It has a lot of features especially around vector tooling. like it has a lot of really cool features just to combine paths and stuff that require a lot of math and they're very niche features, but when you're doing icon stuff, it's nice to have just one click. I want these to do some this weird uh bezier curve or something that if you try to do it other

software is it's more like combine these paths. Just a few more clicks with some more shapes and you can do it. Figma's vector tools are still a little basic. Uh I do like how they set up their setup. They're way better than XD was Adobe XD was bare minimum. Even design uh what's it called? Expression design has more vectoring in it. Um but their path tool was really good. XD had a pretty good path tool like selection and uh editing of paths just basically.

Did you ever use Sketch?

So I only use a Mac for work. I use Windows exclusively for everything else. Uh and luckily they use the same doc now. So I have my Thunderbolt doc. So I just disconnect and connect. But uh I stay with anything that is crossplatform. Uh always.

Yeah, that is really cool. No, I agree with you on Figma's you know vector tools lacking because a common thing like to do is just like have an SVG and just mask the SVG so that you know I can see like the you know one have a sharp edge or something like that on it. Figma has absolutely no ability to do that because it thinks it's like, you know, multiple, you know, elements. The union tools aren't what I want because I don't want it to be a combined color or anything like that.

That is one of the downsides. There is uh there's some plugins. I could not tell you what they are, but there are plugins that kind of handle that. And um I'll go into a little bit. Uh, so since I've been doing icons with we now have a company uh soon to be LLC uh or yeah LLC um it'll be a nonprofit 501c3 when it's actually finalized the paperwork is uh and as part of that for the last eight years we've been building out kind of like a backend system. That's how we manage all the icons.

uh that whole platform is set up in the idea that you can only have a single path. Uh a path just to explain really quick is like a group of points. You say like move here, curve here, move a line here. Uh and it creates a shape. Um we only allow one of those for the entire icon. So each icon is a single group of those kind of like link together lines. Um because of that our uh we have to make sure that anyone that's exporting and then importing into our software to eventually become an icon is just a single path. So it's very important that the software is correctly kind of squish all their vector paths down into one single path. We ran into a lot of

headaches. Illustrator is notoriously bad at that. It's not gotten better. uh it requires some plugins too to get that to work. So we've written wrappers on top of that into our system to kind of like handle that and clean it up as much as we can. Kind of like a SVG optimization uh which we use in the background, but then we do some more stuff on top of that.

So here's an SVG path that you're all icons are in.

Yep. Even our uh we have a new icon pack uh called memory. Okay. Uh I've been doing memory icons as like a pixel icon. Yep. Even though it looks like it's pixels though, it's actually individual lines that make up uh what looks like pixels. So they're fully scalable. They look really clean when they scale up on larger retina displays or stuff like that.

Yeah. I mean what you're describing though sounds technically very complex. And the reason why is that with SVGs a common thing that we like to do is have text on a path for example. And of course I cannot write SVG manually if my life depended on it. And so what I need though is for it to be an actual path element and the syntax needs to be a path syntax. Let's say I want to have a text on a circular path. Essentially the naive version of me would go into sketch or Figma which is my tool of choice. Now draw a circle copy SVG. It comes as an arc. And so what I artificially do is like I add a little you know pointer or

not a pointer but I break the circle into like an you know two different arcs essentially and nudge by maybe like a fraction of a pixel one of the points. So now it's no longer an arc but it's actually an actual um path. So I can now actually have it work with the path syntax in CSS which is already painful. I can only imagine if you're doing anything more complicated than a circle like I'm doing right here. How do you manage that? like how do you draw rectang how do you draw just regular shapes without actually using the nicities that those shape tools provide?

Yeah, it's actually that's an issue with every single software. When you draw a rectangle, it doesn't convert it to a path just like you said. Circle is just one example. Luckily, there's not many instances where we're doing just a circle. Uh there's only a couple icons that come out like that, but there is tooling to do that. There are no GS libraries we have found and we are going to actually should say uh we are currently making an editor. It's open source. Uh I'm redoing a lot of the code right now and I've been posting it on Masttodon every so often, but it's like a pixel editor for making memory icons. Uh it'll eventually use to make fonts. Um I actually made a font to and

published it the other few weeks ago. Um, it's based on the June mono or June font. U, it adds like 386 characters to it. I think like 386 individual icons in a font. Um, so that was a nice experience. It made me realize that I could just better off just writing our own tooling to make this. It only works for pixels though right now. Uh but the idea is eventually we want to support full vectors but more tailored towards what we're doing kind of work like icons like anything in the 24x 24 square smaller area. Um and then eventually making it work well for font generation and stuff so you can actually edit fonts. Um luckily the open source community has done a lot of work for us.

Uh there are great libraries already for handling uh exactly what you said. Taking a rectangle, convert it to points. That one's pretty easy. Not a huge amount of code. Same with circle. The hard part is when you're intersecting those lines together. Um imagine intersecting two circles together and trying to figure out that little u that curvature with math and then rec and then adding a new point where those connect. The libraries do that all for you. You can do that the most complex shapes ever and it'll like spit out one single path for the entire new shape. Uh something I mathematically cannot do and I should say the pixel editor thing that we wrote the core foundation of it the math and stuff is not written by me. My twin brother is a

like a mathematics person. He's got like a master's in CS and uh two majors in math. He loves math. He wrote that out. He knocked it out in probably like four hours for me. I have no idea how it works. I wrote some unit test around it and it works every time in JavaScript. Converts pixel data to vector. Uh so we use that to generate our vector paths for generating fonts and uh for generating pixel icons.

You know, when you describe the union of like two paths and trying to figure out where the math and all that stuff ends into, one of the things I loved about Flash and now Adobe animate is the destructive editing capabilities. I can draw a rectangle, another rectangle on the same layer and I overlay one on top of the other. I can just like the outline and it would pretty much like you know somehow merge the the shapes together. So I can just delete the fill and now I have an outline automatically to it. I think animate now exports into like you know various other formats like maybe even SVG. Have you seen what the output from animate is?

Yeah. So I actually tore apart uh they're actually using Illustrator libraries to do some of the optimizations. These are super legacy math libraries that they have in the background. Um people have probably not in the most legal way um but decompiled some of those uh source files to figure out how the math works and then they've converted it um because the amount of work that the Adobe team did for some of those vector tools back in the day, it's some insane math calculations uh that handle some weird edge cases and everything. Um, and to this day there are only certain libraries that can handle that kind of weird combination of trying to combine those uh those vector paths together. Um, but people have been slowly just rewriting it and

re-engineering it in JavaScript, probably Rust at this point too to for speed. And I know they rewrote it in C. I that's why I saw it originally was like, oh, someone did decompile and figured out how Illustrator was doing this. See, if you're done in Rust or in C, which means that web assembly is not too far out of the realm of possibility. So, you can have it in your browser at some point. Yeah. And these math operations are usually about the same speed in JavaScript. So, as long as you've got a JavaScript version in Node that you can use, then it's not too bad. The problem I've seen many times though is a lot of these Node.js libraries, they're awesome, but they're all backed by CC

code. Yeah. So you can't easily transform it into uh JavaScript on your browser. Uh we do use an a library very well known openjs. Uh openjs is a way to take vectors and convert them to font ttf true type fonts. Oh no open type font sorry. Uh which with an open type font you can convert to any of the other font files. But Openype has support for every feature you can imagine and they're slowly adding. I think every few months I go back and they've added some new open type feature that we needed. Uh so you can do kerning all these fancy features. The same idea. You just take hopefully our really nice clean vector paths that we've made and then we use the open source tooling to get us the

rest of the way there. It's kind of building out these

pipelines. the that is fascinating because you know you're the first person I ever spoke to that does icon design at depth where they can talk about it in such great detail. So that's actually really impressive. So expression design you still you so use Figma, you also use Illustrator and you also use expression design. Is there not a single tool that can do all these things for you today?

It's when I want it very specific path features, I'll just export to SVG and then bring it over, do it, and then reimpport it into the app I prefer at the time. Um, I mean, Illustrator can do everything. It's do I want an Illustrator license, which I don't have anymore. So, like right now, I'm not using Illustrator all and I've hit little points where I'm like, I wish I had Illustrator. This is like two clicks in Illustrator, but I can do it in Figma. I just It's not as clean. I'll eventually get there, but yeah.

Gotcha. So, you're creating icons. So, you started posting them publicly at some point. And so, what motivated you actually create icons in the first place?

That's a good question. Um, I've always really liked uh typography and like you know whenever you're walking past a sign I think it's something like a designer feel like whenever you see like a sign you're like oh for instance the right behind you on your wall that kind of stuff. I almost did that for this entire back wall behind my computer. Uh but it's one of those things where you're walking down the street and you're like why does everyone look at that icon and know exactly what it is? Doesn't matter language you speak or anything. Uh, I can just look at and be like, "Oh, I know that." Or, um, I have the same thing when I learn different languages and stuff and I'm like, "That glyph,

what does that glyph mean in a different language?" I'm like, "Oh, that's cool. I kind of understood what it was with just looking at it." Um, some of it translates, some not so much. Very cultural specific, but um, I really like road signs, too, and that kind of stuff. And that just kept transitioning over to I guess like whenever I'm on my phone, I'll look at application, I'll be like, "Oh, they've got in the UI just looking at for like two seconds, you're like there are 20 visible icons in this app." Not counting text, like there's a lot of individual text in the app, but the next thing next to that, it's not images.

It's not anything else. It's every icon that's on that page taking up so much screen real estate. I was like, I can do that. Like I can make my own unique design kind of pattern for that. Uh right now, I mean, we do material design, which is our main icon pack that we kind of maintain. I really like their design system and the pattern they have. Um we've got some other stuff in the works that's more unique to us, but it's a nice uh guidelines for other people design and the community. And it's one of those projects where we got just a lot of involvement for the community. I mean, there's the MPM package just for the uh font files like 250,000 weekly downloads or

something ridiculous. Like the numbers just from that and just getting other people interested in like designing icons and helping us out. Uh we pulled together stats before this too. We've had 150 different contributors of icons and not like I have 1,500 icons on the system. The next person has 1,400, but we have people with like 20 icons, like many people with like 20 icons that have just added randomly, dropped off, come back. And that kind of excitement where people are like, "Oh, I'm a designer, but I can help in a developer GitHub kind of project has been kind of awesome to see." Like I did not expect other people to actually help. That was the thing. Uh because whenever I was being coding projects and stuff, I never

saw I never saw a lot of design projects that were out there like that where people were actually like contributing back. It was always uh some paid product and no one would contribute to the design part of it. I felt like and I was like so when we started I was like oh people are actually contributing uh not just giving like I want this icon they're actually like making icons and saying hey can we add this and it's like yeah we can add that and some that's we've got some great icons out of that too. Yeah. So who were the first users of your icons? Like when you you put it out there, was it like app developers?

It website developers do you have that level of insight?

Uh yeah. So unfortunately uh I'm going to say this a lot of people use our font file and when I say a lot I mean on JS deliver we are the 15th top downloaded font. Uh which means if you put that in numbers that's like terabytes of data like many terabytes of data. Um so it's definitely web developers. It reminds me of uh Dave Gandandy has a uh font awesome icon pack which is very popular way more popular. They're like 20 times the download rate of us I think. Um really I love their icons. They've got they've really grown too. But it's they're in the same boat as us. They don't want people using the font, the web font, because it's very heavy. You're basically downloading an

entire font file to the browser and that is where a lot of people are using it. So we see a lot of when I used to manage the CDN, I used to be able to see the traffic and we would see like monster.com like all these large profile companies were uh downloading the icons and uh using them directly from the CDN on their website. Yeah. So designers are also using them though. We have a lot of designers that are pulling down the SVGs, pulling them into their Figma designs and everything else.

Well, that's really cool. I'm actually looking at Font Awesome right now. Yeah. No, it's actually it's a lot of work. And so what keeps you doing this?

Yeah, he had um Dave had a Kickstarter years ago that got like a million dollars. Uh so icons do have a potential growth there. And then I there's some other websites we have. It's a small community which is nice too. Uh but there are some large players in the field. Uh yeah and they eventually buy them each other like uh forgot the one is it an Iconify and then they bought Icons 8 another large company. I always mix up the name of the companies. Some of them they always have the some kind of pun with icons. Uh like there's iconic which I am very jealous of. Like I love pictogrammers uh the name of our stuff. Uh but iconic every single time I think of that like that's a great name.

Uh and that's hero icons I think is part of that too. I think it was the same person. Yeah.

And so all your icons are in the material style except they are except for memory is the

new icon pack 350. Yeah. Those are pixel styled. And then we have material design light which isn't real material design. It's just a lighter version. And then we are going to eventually with the updates and the new picture grammar website. You can kind of tell we have some stuff that we're working on background. We probably won't release an icon pack until it's hit about the 200 icon mark. Okay. Um which isn't a lot considering how many icons are in the main icon pack. Uh, but that's still, let's say, that icon pack memory has 350 icons. That took me about two months to put together and get everything imported and ready.

So, you're talking about two and a half months basically work on my free time uh to get an icon pack of that size out. And that's what we want to do. We want to start making these more uh utilitar icon packs in very specific styles and get those out. And then the website uh there are some like other smaller niche icon packs. We want to eventually bring those into our fold and like ask people, hey, would you want to move it under pictogrammers? We have the tooling and everything to support this in a larger scale than some other smaller icon packs are right now and get those to grow the size of MDI.

Yeah.

Really cool. So what made you switch from the material style to doing the pixel style?

Oh um so I do uh electronics electrical engineering. So there's a there's a sharp like sharp like the TVs uh memory display module. It's the same one that's used in Playdate. U I wish I had one here. My friend has one. One of these days I might just buy one. Uh but it uses a sharp memory display. And the play date console made by Panic uh is like a it's like the ink. It's 200 and it's like 400 by 240 display uh but it can only display monochrome pixels. Uh so black and white pixels on the screen and I've been working with that display on my electronic stuff quite a bit and I'm just I was like oh you know what I can build an icon pack for that that

looks really nice. At the same time, I was like, "Okay, I'll do that." And then while I'm doing my electronic stuff, I can render those icons in the UI. And the Playday communities likes the icons, too. So, that was nice to see. Uh, but I'm sure there's other people that want a pixel icon tag. I couldn't find very many out there. So, there was a niche out there for that. And they're a lot of fun to make. It also gave me a reason to make the pixel ed.

So true because I spent a lot of time looking for a good pixel icon pack because I don't know if you remember but back when people had like 72 dpi screens and no one went any higher pixel icons were all the rage or maybe they weren't the rage but I definitely used them to an obnoxious degree where every visual is pretty much pixel icons smileys and and things like that. There was even like I don't know if you remember this but there was also the mini icon pack was basically like 8 by8 or extremely it's like how many how much visual information can you condense the tiny tiny area that fa fa fa what was the it had three things in a row the name of the icon

pack that everyone knew it had like a thousands of them they were used them all over your website was it flash f ff that was it I think was the yes like Walter Appi was I think the designer and developer of that and yeah that's the one that a lot of us used like it was you know it was like FF galaxy FF Atlantis FF forward and things like that yes those were like the great days of like pixel fonts remind me uh the tooling that I'm working on right now well later on it supports multicolor support in the background I started adding support for it so we could convert all those to vector within a few minutes uh eventually um in b in bulk

Yeah, signing up for like, you know, trying all these things out because I've been using Twitter's emoji pack because it's the closest to a video game pixel style that I can get. But I, you know, for me, like a good fullc coloror pixel icon pack would be like ideal because it matches the more retro 8bit look that I've always kind of liked. You know, I don't know if others like it or not, but I'm like, you know what, it's fine. It's a it's an aesthetic that I just enjoy going towards the Pico8 color scheme and and things like that. And I think the big thing also was that because people's screens became like, you know, multiple DPIs and render displays and things like that, all the pixel fonts and icons that

you have, not the fonts, but the icons specifically all became blurry. Like I remember the first day I got like a a MacBook Pro with a display probably like 2012 or 2013 at this point that the first thing I did was like, okay, I can't view my own content anymore because everything is blurry. Let me go.

So young now, Koopa, our eyes are perfect vision. We can see.

Yeah. Now it's like ex hey I got LASIC just about a couple of months ago. I will tell you I do have perfect vision actually better than perfect vision right now. So, you know, we'll see how many more years that lasts. But no, I that I think that I think had a big role in like the decline of pixel icons. And it wasn't until I think CSS had the ability to scale and use pixel kind of, you know, um interpolation, you know, before it was more of like a gossian or something like that where like it would just be blurry, but now you can actually get the the nearest fit or whatever that gives you the the strict version of it.

But so hopefully we'll see a renaissance of that again at some point. Yeah, the stuff I'm working on right now, um, once I add the multiolor support, I could definitely see us adding or making some icon packs like that, uh, multi like multi-layered color with color. Uh, and now that fonts support multilayer fonts for emojis and stuff, we could eventually export even to a font just like emojis and stuff, those icons, which we kind of an easy way to use it.

What is the file size when you have like a lot of icons in a font?

Uh, there's not it's not too bad. It's it's actually the CSS file which is the worst part because uh the fonts maybe are let's say 400 kilobytes uh which is still large. It's less than a half a megabyte but you're talking about almost I don't know like 80 kilobytes more just in CSS. So when you add together you basically are at half a megabyte just for the icons on the page. And if you're not using all 7,200 icons which are now in the latest version, uh that is a very heavy lift uh for the browser. And uh we're seeing people post yesterday I saw someone post again about if you disable custom fonts in your browser, your browser renders a lot faster. It actually does. It's very It's shockingly

noticeable on certain hardware, even fast hardware, how much quicker the page snaps because it doesn't do this uh this weight to render the fonts and then show you it. Uh so it is noticeable on larger pages, especially news websites, if you disable custom fonts, but if you do that, it's going to disable your icons, too. And not everyone has fallbacks for that, unfortunately.

Yeah, I I was going to touch base on that exact same thing because for performance reasons I don't but I know a lot of people do have custom fonts disabled because there's a lag, you know, or you want to avoid the edit of flash of unselled content which is a a big thing back then. You have the same thing with icons today. I mean with fonts today where like you see one font then it naturally layers in the next font which often is a jolt and people don't want that and you know individual files are fine as well though like visuals like you know with HTTP2 and like multiple requests at any given time sprite sheet versus individual file debate will ever open up again because

of it. Now it's even easier though with the serverside rendering becoming kind of normal in the new pages like our new website is all serverside rendered on initiation. So even though it has 7,000 icons on the page, it literally pops up in like a second, two seconds max, and it renders the full icon page. Um, but as we're seeing serverside rendering with React and everything else, that's we're pushing forward with our uh React download for instance, just the uh icon, the icons themselves, has 1,500 or sorry, 150,000 weekly downloads, which is still 2/3 of what the font gets, unfortunately. But we're seeing the numbers kind of like over the years it's starting to go down because we're going to keep making that web font larger and larger. So people are going

to have to start moving to some kind of server side rendering for that. And we have already told people we're not going to break up the web font because we don't want people using it. So we're just going to make it more difficult for them. So developers that know how to code for it will slowly move that direction. Yeah. No, absolutely true. And you mentioned using React for serverside rendering.

Yep. Uh, so I did kill the website. Um, the co-founder of Pictogrammers, Michael, uh, um, Michael did it everything. Yeah, he's, uh, really knocked it out of the park. Um, and he is a huge React person. Uh, we actually go as far as, uh, we compress all 9,000 pages and then upload them to the server first. Uh, so that our server costs are basically null.

Yeah. No, veryized. So, not next. Are you guys using Nex.js by any chance?

Uh, so it originally was uh but we don't we moved every everything's on AWS now on a light sale instance and light sale just because of bandwidth. We go through a lot of bandwidth and their bandwidth costs are dirt cheap compared to everywhere else. So, we save a lot of money going that route. If it was cheaper for bandwidth, we would go that route for sure. Yeah. for

for the bandwidth side of things. I'm curious, have you you know I'm guessing are you using a CDN because I always feel like the CDN's cover the bandwidth to certain

CDNs are expensive. Um having experience uh if I would have had to pay for uh we did the math at one point. I think it was like $2,000 a month if I would have if I was paying for the CDN uh when we had the open source when we were uh get letting anyone use the CDN. Uh but JS uh deliver the uh founder of that reached out and said hey we'll take care of your entire uh CDN fees. All right. So we transferred everything over to their CDN system. So they handle it now and it's grown probably six times since they took over. So you're talking they're probably eating several thousand dollars worth of charges for that. Uh but we're using around two terabytes right now of

bandwidth. Uh AWS lights gives us four terabytes to work with so we have some nice breathing room and then we can keep upgrading and their upgrades are not too bad. Yeah.

No, that is really cool because you know that's what I always enjoy about like just getting anything out the door. It's like you know what you care about is creating icons and representing the world around you in in picture form. But there's a lot more detail that is always involved in terms of like going from an icon to something that people can use to then ultimately the mechanics of actually serving it so that people can actually use it.

That's been the selling point of picture since we started. The whole idea was to make it easy for developers to use design resources. So as we expand this, we want to make it any design resource, let it be fonts. Later on we have ideas to make fonts a little quicker, too. Um but main thing is like a lot of people with fun awesome for instance they they find other workarounds to use these icons but they require very niche things so they can't use every icon pack has its own kind of way to use it and we've gotten a few people to standardize on the same system we use uh for delivering their icons in npm and that's made it uh nice to see like we

I'm blanking what icon pack. Uh, simple icons as a brand icon pack. They are very large. Uh, to the point we we removed in version 8, we're removing the rest. We have 128 brand icons in MDI right now. We're removing all of those in version 8. Uh, and we've slowly just pointed everyone to that. Luckily, one of the people on our core team runs simple icons, so it's a nice connection there. Uh, but it's a way better resource. they have the people to update the icons and brands more regularly than we can. And it got too much of a uh what's it called? Not political, but like do we want this icon pack or do we want this brand icon? And just saying no to random icon uh brand icons was uh a

little bit more uh work than we thought it would be. So now it's nice just to be able to point to simple icons. Yeah. And they deliver through MPM the same way we do. So it's plug and play if with both icons packs.

Gotcha. So today is it still web developers who are using your icons the most or do you see other types of users using it?

Um it's mostly web developers I will say. Uh we have a lot of Android developers. We have a lot of Windows developers. Um the amount of people that use material design icons in their Windows apps is shocking and iOS too I guess. Uh so we see a lot of mobile apps especially the ones that are written in uh there's so many uh nice web tooling that lets you build native applications now and a lot of them are using material design as their foundation. So they've been just pulling in our icon pack. Um there are great thirdparty libraries that just specifically support our icon pack uh because we have 7,000 something icons. So the icon's there. So, they've written these nice wrappers where you can just say the name of the icon and it

just works in your app. So, if I have a toolbar, you like this icon, this and then I'm done. Same with Figma. There's some there's a lot of people that have made random plugins. Um, we've talked about making a first party one, but I feel like the community already does a really good job. We have a great browser extension that let you just copy and paste into Figma also. So like that's made by one of our core developers uh core contributors and it works in Edge, Chrome, Firefox.

It's going to get renamed soon to pictogrammers. Right now it's called material design picker, icons picker. Uh but the community picks up the rest of that. Um we don't want everything to be a first party. That's too much for us to do. Yeah. So I would say probably 80% to 90% are still web developers. Yeah.

No, that's pretty interesting. It's an interesting group, hard group to get into their good graces with, but once you get into it, I think you have a long runway there. How do you maintain a community that is healthy like the one you have?

Um, we use Slack. Uh, but we also use GitHub as our main kind of where we manage everything. So, because we do it through GitHub, every everything related to icons has to be done publicly. It's a forefront rule that I've had since we started the Slack group five years ago now. So before I was doing a lot of this just through GitHub, but then I realized people wanted to chat more u as a core group. So that's where the idea of a core contributor came from. And there's uh 12 of us right now that are core contributors. We sit in Slack. We have our own little disagreements back and forth. That stuff's not public. Same with all our where we were going with the web design, pictogrammers, all that.

We do that all behind the scenes. But anything related to icons, we make sure it's always in the public eye. So everything gets an issue. Um anything with the website, anything you see uh with one of our packages that we distribute, we make sure there's a pull request, everything's super visible to them. Uh and then we just kind of introduce uh we try to get contributors to come to us. So documentation's been forefront in the new website. The old website was heavy on documentation. Uh there's a page for every single uh every framework you can imagine. Every web developer framework, Vue, React, we have Node.js docs, how to code scripts for it. Um we've tried to write a doc for everything you can think of so that

those communities can join us and kind of contribute back is the hope. Uh every community has someone that wants to do something with icon. So that's helped. Same with u the open source community has been really quick to jump with us. Uh, Home Assistant, for instance, is the I think top top 10 open source projects on GitHub. They use our icon pack almost exclusively. There are a few others you can install on top of theirs, but it lets you manage your home uh devices and everything. Connects it through a nice portal. You can use touchscreen, various devices like a Raspberry Pi and that.

But the interface, if you see any screenshot, it's all material design icons. So that community, that's why we have so many uh uh like home related icons in the system is because that community has kind of buckled on to us as the main icon back. There's a few others too that use us exclusively for their icons.

No, that is actually, you know, really interesting. How do you incentivize people to be a part of your community, create the icons and and basically end up shipping

Uh, that's a good question. I have no idea what drives someone to want to put their free time into a project like this. It uh Michael, for instance, has been I mean literally right next to me while we've been doing pictogrammers for the last two and a half years. Uh, starting it up, naming it. We have an Excel spreadsheet. When we were picking out the name, that was huge. Seeing all the disagreement was my favorite part because the people got so but finding people like that that just randomly like want to sit in a Slack and actively contribute to a project that is basically just icons blows my mind. Um but there are niche groups that just really like that kind of project that just latch on. I found uh it just takes

a while to find them and then as we've grown I think we just get more eyes on us. So that's helped kind of drive certain people towards us. Um yeah, I always whenever I see any open source project and I'm like you see all the PRs and stuff and you're like how did those people all like connect and like it's devoted to this project and you're like oh it's the same with the icon pack like they just really like icons.

Yeah. No, it's great. And I think you also are very popular so your distribution is something that it's hard for someone to like mimic overnight. So it's much easier to contribute and have an impact with the world than doing something on their own. And I think that's one of the great things about open source in many ways is that you know it did require basically described a lot of heavy lifting from you early on where you created literally 1,200 icons but then that created a center of gravity and the momentum to attract more people to start using it. And of course finding a community people just like really care about something like this you know always always a good thing. Oh,

I probably didn't say too. We started in 2014. The community did. So, this MDI pack was started in 2014. So, time is also a huge thing. My favorite is looking at the GitHub stars and just how linear GitHub stars are on some projects. Ours is literally just a straight 95 degree. There's no like spikes in it, which is interesting. Like other projects, they get super popular, they just spike up. Ours has a couple little blips, but it's basically just gradual the entire way. Yeah, I mean, consistency is often underrated when it comes to this projects.

That's how we've always done it. We try to release a 100 icons at a time and it's just consistently every month, 100 icons, a month and a half sometimes. But yeah, the idea is we just always want to focus on icons and release them.

Okay, nice. You know, it seems like everything you provided so far is free. Is that correct? Yep. Do you have a monetization strategy? If not, why do you decide not to?

Um, so we've discussed a few times. We're not sure how we want to do that eventually. Uh, Pictogrammer's website, as you saw, it's nice, flashy, really fast. It's definitely set up to do more than what it's showing right now because everything on it is free. Um, the pixel editor I'm making right now is going to be free. I have no plans to monetize that. Uh we are planning to expand that a lot um including the picture grammar website. So right now it's ad supported. We're part of carbon ads greatest community of for ads uh if you can get into it.

I don't know how picky they are nowadays. Uh but yeah they're the same people that have ads on uh CSS tricks every website you can think of. Are they kupa or no? I don't know. I'm adree. I removed ads almost eight, nine years ago and never added ads back in. Nice. Yeah. Um, but that's how we monetize ours right now. That's mostly just to pay for coffee. I have lattes almost every day. Um, so we use it for that. Uh, and then I distribute that out. Uh, since we're going to be an LLC soon, we are obviously planning it.

There's plans for that. Where we go with that will still be decided if we're going to do it through paid icon packs or just you know extending icon packs. We did joke about people paying us to make specific icons. Uh we can always do that. Uh we don't put a lot of thought into it right now.

No, that's actually really cool. I mean advertising is a fantastic you know place to start it with and I have used carbon ads in the past and they are very good. Like they're very selective and the kind of brand quality you get is really good. There used to be another I think carbon had competition with another company but that company stopped you know ads they also carbon got bought by buy sell ads that's right but before that you know even before they b bought by buyell ads company it was one individual it was Jim Kudel I believe and he maintained a very exclusive list of advertisers that he could do let me see if I can come up with this name I'll come up yeah and I cannot remember the name of

it yeah kudel partners. Um, let's see if there's only a link where you can find the advertising.

Yeah, I remember. So, I got carbon ads. I forget who recommended it years ago. I've been I've had it for ah the deck. The deck was Yeah. Yeah.

The deck which was by Jim and you know I don't know why I'm saying Jim in a firstname basis. never crossed paths with him, but I just know him from like the reputation of like, you know, there only were two, Carbon or Jim's Deck Network. And Deck was hard to get into because they had very high standards for a long time. And then Carbon was the one that clearly was the more popular one and Vice Ads bought them. It's been fun to watch. just speaking of like monetization like so Vincent one of my friends uh he runs streamline HQ and they have entire suite of icons like I don't they have one of the largest icon packs on it's like 30,000 icons or something just one of their icon pack

they have entire illustration suites he's built this into a huge company like not huge company but like pretty sizable considering how quickly it's grown and it's been interesting to see it's that trajectory for uh icons into a full business suite. Um we don't want to go that far, but uh still we're still primarily open source uh is the idea. But uh it's cool to see that other it is possible to go that scale. Yeah. And you know and newsletters are all the rage these days. So you can actually have a newsletter on icons that you can then you know have subscriptions for.

More side projects. Yes. Yeah, I always exactly I have I have this little circle that I always go back to where it's like am I doing icons today? Am I coding today? Am I doing this? Like I only do one of them and I focus on it. That's how I spend my Sundays are literally open source and it's just one of those circles I'm working on.

You know, since we're, you know, this is the, you know, the era of artificial intelligence and all these things. Do you see a world where some of this icon generation work is going to be done automatically by a robot?

Yeah. Uh depending on the style, yes, I 100% see it working out. Uh I was playing around, especially just basic logo design. Um I do like the idea that AI can kind of generalize an icon and kind of give you a good idea of what it is. Like combining icons, you be like, I want a couch with a book. What would that icon look like? and it would give you a rough idea like a bunch of variations and be like instantly like, "Oh, I can make an icon of that." So, I just I could literally just get the silhouette of it and that's an icon.

Uh, being able to knock those out really fast uh is kind of useful. Um, and I've seen some people already post stuff on Twitter and doing this kind of work with more uh I'd say more realistically graphical icons, but I saw stickers, people were making stickers that look production value stickers uh with some great designs where I'm like I couldn't tell the difference if that was made with AI or not uh or a human. And that's why I'm impressed and I feel like we're going to be in that direction soon.

Someone wrote an article the other day about like how can I differentiate myself from graphic design and they're like oh I have to do animations my icons should animate my icon should do this I should do these cool little things and I'm like okay yeah that may be the future because it's going to take a while for AI to kind of do that more visual nuanced uh design stuff. Uh so we'll see what direction that takes for the community. I I think if you talk to like Pascal Dilva, you know, dark motion, he's actually working on something similar right now. And he's probably going to tell you it's actually closer than ever in terms of having animation also be a part of this. But when you mentioned at the very beginning

that you're painstakingly haven't figured out a way to take, you know, circles and rects and all these shapes and make them into pads, that to me was like a very it's like, oh, chat GPT or some editing tool like that. You paste it in, it should be like converted into pads. It should be able to figure it out. We tried I my brother actually the first thing he did was ask chat GPT to code what I asked him to and he goes oh it's missing a bunch of edge cases because he mathematically knows how it should be doing this path calculation to figure out all the edges uh in the inside cutouts.

Uh but he said it like it kind of tried to do it. So, I feel like we're not that far away from it figuring it out, especially as it iterates and gets smarter. Uh, it'll probably figure out that kind of stuff pretty quick. Yeah.

Because I wonder because you have a large repository of icons in SVG format, if you could potentially even create some sort of a training model that actually is indexed and learns from all the icons you created and then use that to basically then generate icons for you. Because what it's really missing right now is really precise training data tuned for icons. And if you pull together like icons from, you know, all the other icons that you are familiar with like streamline, you know, or icons 8 and so on, you probably have a large enough database of icons that can help you here.

Yeah. And we have every icon is tagged with five to 10 tags already or aliases and they're all tagged with many tags. Uh so if it's like a medical icon, it's tagged medical. So we have that AI metadata built into our icon system. Uh which is useful. Um, and we've done some things. Uh, so there's this idea with icons of being proportionally correct, which means um, an icon that's a circle is actually two pixels taller and wider if it's in that kind of like circle. If it's more square, it's actually smaller.

So that proportionally when they're lined up next to each other, they're all the same size. So if it's a really wide icon, it actually gets to be a little wider in the box than a normal icon. so that it just views correctly when placed on a grid. We actually at one point wrote a formula to basically analyze the icons and see if any stood out. And I forget if we I think we used it to basically correct a few icons to say, hey, this icon doesn't really meet the criteria. So, it's not AI, but it's the idea of using like a more generalized formula to figure out if Nikon visually fits our design choice is kind of a thing. Yeah.

Yeah. Really cool. Yeah. And we do do that on the path data, too. So, I actually have formulas that run on all the icons and let us know later on if we change our mind about something and we're like, well, does an icon break this rule? we can run that on all the icons and be like, "Yeah, it does." So, we go back and fix the icon. We have done that in the past, too.

Wow. That is fascinating to hear that. You know, it's almost like some sort of visual regression testing on an entire suite of icons. Mhm. Yeah. So, what's next? You know, you mentioned you maybe adding color icons or colorful multiple color layers at least on some of these icons. Is that your next big

thing? Yeah, it'll be expanding the pixel editor and really making sure that it can do everything we need to start building out this suite of fonts. Uh so fonts and then the memory icons and then hopefully some other pixel icon packs and then um we're going to see we're kind of pulling our internal core developers uh what kind of icon packs they would like to work on because remember they like material design. They use it day in and day out. Usually these people what people in our community um so we can't expect them to shift what they use at work and at home on their current projects to some other account and be that invested. So we're trying to find something that we can kind of move

you know same interest to without diverting too much from material design. Material design is going to be around. The problem is that the amount of requests I was going to say they're slowing down but they're not. They're so consistent the amount of icon requests. We still get probably two to three a day and they just Yeah, we're up to 435 open issues right now. Uh that's just never stopping. So the idea is like we want to start new icon packs. We want to start this font stuff. So the website will be in fonts. It's getting a whole new admin built out all recoded in Node. Um so that's the thing too. We're recoding everything in Typescript. Um, so the new website's all Typescript based. The new

admin, the new uh backend will all be TypeScript. Currently, it's PHP. Uh, because eight year, no, old now. Nine years ago, PHP was the go-to. I mean, I still was a concern at work recently where I was like, "Yeah, I need PHP. It's a requirement for all serving that I do." And they're like, "Really?" I'm like, "Yep, it it works." And the amount of I've got that thing fine tuned on memory. We could run the entire server on like we did for years on a gig of memory. Even with all that traffic, we only had a gig in that machine. Uh we're on a two gig box now.

So it's not we have a lot more bandwidth we can work with. But uh it's uh yeah, so icon packs fonts uh is what we're going to be expanding to and that'll just broaden out the community too.

Yeah. The pixel editor you're building, is it optimized just for like fonts or will allow you to do like isometric art?

Oh, you could probably do some pixelated isometric art with it and stuff, but it'll be mainly added it'll be mainly for like bit map fonts. I say bit map, but they're still vector. Uh, it'll be aimed at that and my memory, but my idea is to eventually add vector support to it, so you can actually do curves and stuff too with it in the future. There's nothing stopping the code I wrote. Uh it'll eventually go in that direction. Right now I just have it kind of hardcoded.

Yeah. If I have to do a feature request, you know, on the fly here, definitely like, you know, one day I'd like to be able to like do isometric art again, which is like very fixed 30° 60° lines and and things like that.

Oh, no. That is coming though. That allows you to actually draw like very specific angles and so on. So mouse support is on my to-do list. Uh, and there is So I use a No Well, I don't not everyone has a video on right now, but the uh Surface Pen is primarily what I use to draw icons with. Yep. So, I've gotten really used to just drawing with this. Uh, so the Pixel I'm working on is primarily me using this with an eraser and stuff. Uh, but I started adding mouse support because my contributors do not all have uh iPads or surfaces and stuff to draw with. So yeah.

Cool. Well, looking forward to forward to all these great things. Any closing remarks? Anything that people should check out? I'll have links to all of your content just below in the description.

No, I was going to say too, I've just because I don't think I mentioned at the start, I have known Koopa since he was or since I was 15. You were a lot you were a little bit older than me. You were in MIT at that point.

Probably like 18 or 19 then.

18. Yeah. So, you were a couple years older than me. Yeah. So quite a while.

Wow. So basically for 50% of your life almost like we

Yeah, I know. I thought about that before I joined this. My birthday was last week. So yeah, it was 18. Yeah. Also 50% of my

life as well then you know. So So wow that is that is yeah power of online communities really right? You know that you find people who are interested who share common interest whether it is programming visual design or the intersection.

It's so nice to meet everyone too. I I met Pascal when he was in Chicago right before COVID and yeah, just like hopefully I meet everyone else as they travel through eventually. I met Dan was another person. Um he worked at Mic he's he's back at Microsoft actually. Um yeah, some of the other people too.

Yeah. And I think I think you know you me and Krillin Kyle Murray also in San Francisco like I think that was fun. First time meeting ever.

Yeah, that's right. So can't believe that took so long. Yeah, I bet it's I bet it's the other so many times.

The thing is like because we're all just like one point and click away and it's like you know the video call like you know basically got on a call and here we are right now. The imperative to like meet in person that you might have had in the past. It's just not as strong as it used to be. It's like we're all like you know on demand available. Could be a hologram at some point in the future.

Who knows? Like probably know this could all be AI generated. We're all living in a simulation like how a lot of the AI, you know, it's always a small community which is nice to I mean you're the reason I have my job here. Yeah. Not gonna say where but why I have my job here. Always fun.

Cool. Well, awesome. Great chatting with you. Thanks for taking the time and walking me and everyone through just the world of icons which is extremely fascinating. So yeah, definitely check out picturegrammers.com. I'll link to all of it before and talk in a bit. Bye.