Designing Icons and Community Building with Austin Andrews

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. 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. So I'm very used to them from the DOS days. We had Windows 3.1 for a very short amount of time. And then, luckily, we went to 95, 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. I think I did a little bit of yes, Visual Basic 6 back in the day, like that was pretty fun. 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 tailoring that and messing around with the vector tools. And then, was it fireworks?

Macromedia had fireworks.

Yeah. And I was to this day. I still think it's one of the best applications that they killed. The idea of having your vector tools and your pixel tools right next to each other. 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, it's funny that you mentioned Visual Basic, because it was one of the first languages I learned as well. Whenever I think of Visual Basic these days, I still picture the editor's gray UI and its form surface. It was gray with a pattern of little black dots showing that it was editable. It had snap points, although I only learned that name much later. That gray form UI is still the image I remember most clearly. I remember drawing oversized buttons because every tutorial or little book about using Visual Basic said, 'Here's a gigantic button. Double-click it.

You'll see some weird void something, then type Dim and something else.' That's all I remember now, but it was a bizarre world. I skipped over Silverlight and its connection to Expression Blend, though. I used Expression Blend and knew that thing inside and out. I knew how to do all the bindings and knew the software really well back in the day. I made all the icons. I think we had 1200 icons. I say 'we,' but it was just me back then, making and distributing icons. Nowadays, a whole community works with me, but watching people drag and drop hundreds of icons from that 1200-icon pack to build entire apps was interesting.

Expression Blend was like a continuation of Visual Studio, where you could drag and drop components, do a little more work, and have those nice vectors. So you built 1200 icons by yourself?

Yeah. Yeah, and it was actually made with expression design software, which I still love. I still have installed on my service pro 8 here. 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, just because I was curious, like 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. It checks off a lot. I use Figma now like most designers. I actually very much. I moved away from Illustrator. 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 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 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 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. I do like how they set up their setup. They're way better than XD was Adobe. XD was bare minimum. Even design- what's it called? Expression design- has more vectoring in it. But their path tool was really good. XD had a pretty good path tool like selection and 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. And luckily they use the same doc now. So I have my Thunderbolt doc. So I just disconnect and connect. But, I stay with anything that is crossplatform. 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, there's some plugins. I could not tell you what they are, but there are plugins that kind of handle that. And, I'll go into a little bit. So, since I've been doing icons with, we now have a company, soon to be LLC, or yeah, LLC, it'll be a nonprofit 501c3 when it's actually finalized. The paperwork is 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. That whole platform is set up in the idea that you can only have a single path.

A path, just to explain really quick, is like a group of points. You say like, move here, curve here, move a line here. And it creates a shape. 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. Because of that, our 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. 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, 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. We have a new icon pack, called memory. Okay. 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, 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 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. 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: we are currently making an editor. It's open source. 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.

It'll eventually use to make fonts. I actually made a font to and published it the other few weeks ago. 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. 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. 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.

And then eventually making it work well for font generation and stuff, so you can actually edit fonts. Luckily, the open source community has done a lot of work for us. There are great libraries already for handling, 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. 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. 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, 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.

So we use that to generate our vector paths for generating fonts and 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 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 it apart. They're using Illustrator libraries to do some of the optimizations. These are super-legacy math libraries running in the background. People have, probably not in the most legal way, decompiled some of those source files to figure out how the math works and then converted them. The amount of work the Adobe team did for some of those vector tools back in the day is some insane math that handles weird edge cases and everything. To this day there are only certain libraries that can handle that weird combination of trying to combine those vector paths together.

But people have been slowly rewriting it and reengineering it in JavaScript, probably Rust at this point too, for speed. And I know they rewrote it in C. That's how I first saw it: someone had decompiled things and figured out how Illustrator was doing this. If you've got it in Rust or C, that means WebAssembly isn't too far out of the realm of possibility, so you can have it in your browser at some point. 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, it's not too bad.

The problem I've seen many times, though, is that a lot of these Node. Js libraries are awesome, but they're all backed by C/C++ code, so you can't easily transform them into JavaScript in your browser. We do use a very well-known library—OpenJS, or rather OpenType—to take vectors and convert them into font files. OpenType has support for every feature you can imagine, and they're slowly adding more. Every few months I go back and they've added some new OpenType feature that we needed. So you can do kerning and all these fancy features.

It's the same idea: you take our really nice, clean vector paths, 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.

That is fascinating because you're the first person I've ever spoken to who does icon design at this depth and can talk about it in such great detail. That's really impressive. So you still use Expression Design, you use Figma, and you also use Illustrator. 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. 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. I've always really liked typography and signs. I think designers have a feeling whenever they see a sign, like the one on your wall behind you. I almost did that for the entire back wall behind my computer. When you're walking down the street, you wonder why everyone can look at an icon and know exactly what it is. It doesn't matter what language they speak; they can look and say, 'Oh, I know that.' That immediate recognition, without an explanation or translation step, is a big part of what interests me.

I have the same reaction when I learn different languages: 'What does that glyph mean in another language?' It's cool when I can understand it just by looking. Some of it translates, while some is very culturally specific. I also really like road signs. That interest transitioned to looking at applications on my phone. After looking at a UI for two seconds, you might notice 20 visible icons in the app. That's not counting all the text. Aside from text, it isn't images or anything else taking up that screen real estate; it's the icons on the page. I thought, I can do that. I can make my own unique design pattern for it.

Material Design is currently our main icon pack, which we maintain. I really like its design system and pattern. There may be a lot of individual text in an app, but icons are the other repeated visual language that people rely on everywhere. That gave me room to imagine a consistent pattern of my own. We have other work underway that's more unique to us, but Material Design offers nice guidelines for other people, design, and the community. It's a project with a lot of community involvement. The NPM package for just the font files gets something ridiculous like 250000 weekly downloads. Those numbers get people interested in designing icons and helping us.

We gathered statistics before this, too: we've had 150 different icon contributors. It isn't as if I have 1500 icons in the system and the next person has 1400. We have many people who contributed about 20 icons, randomly dropped off, and came back with another 20 icons. It's awesome to see designers excited that they can help with a developer-oriented GitHub project. I didn't expect other people to help. When I was building coding projects, I never saw many design projects where people contributed back like that. Some contributors add icons only once, while others leave and later return. That irregular participation still adds up to a substantial shared design system.

It always seemed to be some paid product where nobody contributed to the design. When we started, people actually contributed instead of merely saying, 'I want this icon.' They made icons and asked, 'Hey, can we add this?' We could add them, and we've received some great icons that way. So who were the first users of your icons? When you put them out there, were they app developers?

It website developers. Do you have that level of insight?

Yeah. So unfortunately, 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. Which means, if you put that in numbers, that's like terabytes of data, like many terabytes of data. So it's definitely web developers. It reminds me of Dave Gandandy has a font awesome icon pack, which is very popular, way more popular. They're like 20 times the download rate of us, I think. 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 monstercom, like all these large profile companies, were downloading the icons and 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, Dave had a Kickstarter years ago that got like a million dollars. 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. But there are some large players in the field. Yeah, and they eventually buy them each other. Like 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. Like there's iconic which I am very jealous of. Like I love pictogrammers, the name of our stuff.

But iconic. Every single time I think of that. Like that's a great name. 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 for Memory. Is that the new 350-icon pack?

Yeah. Those are pixel-styled. Then we have Material Design Light, which isn't real Material Design. It's just a lighter version. And eventually, with the updates and the new Pictogrammers website, you can kind of tell we have some stuff we're working on in the background. We probably won't release an icon pack until it hits about the 200-icon mark. Which isn't a lot considering how many icons are in the main icon pack. But still, 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 of work in my free time to get an icon pack of that size out. That's what we want to do. We want to start making more utilitarian icon packs in very specific styles and get those out. Then there are smaller niche icon packs we eventually want to bring into our fold and ask people, hey, would you want to move it under Pictogrammers? We have the tooling and everything to support this at a larger scale than some smaller icon packs do right now and help them grow to the size of MDI.

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

Oh, so I do, electronics, electrical engineering. So there's a, there's a sharp like, sharp like the TVs 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. But it uses a sharp memory display. And the play date console made by Panic is like a, it's like the ink. It's 200 and it's like 400 by 240 display, but it can only display monochrome pixels. 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. 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 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, 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. Eventually, 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 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 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, 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 nearest fit or whatever that gives you 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, once I add the multiolor support, I could definitely see us adding or making some icon packs like that, multi, like multi-layered, color with color. 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?

It's not too bad. The CSS file is actually the worst part. The fonts may be, let's say, 400 kilobytes, which is still large but less than half a megabyte. Then you're talking about almost 80 kilobytes more just in CSS. Together, you're basically at half a megabyte for the icons on the page. If you aren't using all 7200 icons in the latest version, that's a very heavy lift for the browser. Yesterday, I saw someone post again that disabling custom fonts makes your browser render much faster. It really does.

On certain hardware, even fast hardware, it's shockingly noticeable how much faster the page snaps into place when it doesn't wait to render the fonts before showing you the page. It's especially noticeable on larger pages and news websites. Unfortunately, disabling custom fonts will also disable your icons, and not everyone has fallbacks for that.

Yeah, I was going to touch on that exact thing. I don't disable them for performance reasons, but I know many people do disable custom fonts because of the lag or because they want to avoid a flash of unstyled content, which was a big concern back then. You have the same issue with fonts today: you see one font, then the next font layers in, often creating a jolt that people don't want. Individual visual files are also fine now, with HTTP2 allowing multiple requests at any given time. The sprite-sheet-versus-individual-file debate may open up again because of it. It's even easier with server-side rendering becoming normal on new pages.

Our new website is entirely server-side rendered on initiation. Even though it has 7000 icons on the page, it pops up in a second, two seconds at most, and renders the full icon page. As we're seeing server-side rendering with React and everything else, we're pushing forward with our React download. The icons themselves have 1500—or, sorry, 150000—weekly downloads, which is still 2/3 of what the font gets, unfortunately. We're seeing the font's share start to decline over the years because we'll keep making that web font larger. People will have to start moving to some kind of server-side rendering.

We've already told people we aren't going to break up the web font because we don't want them using it. We're simply going to make the web font more difficult to use, so developers who know how to code for it will slowly move in that direction. That's absolutely true. You mentioned using React for server-side rendering.

Yep. I didn't build the website. Michael, the cofounder of Pictogrammers, did everything, and he really knocked it out of the park. He's a huge React person. We go so far as to compress all 9000 pages and upload them to the server first, so our server costs are basically nil.

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

So it originally was. But we moved everything to AWS on a Lightsail instance, and Lightsail is really just about 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 there were a cheaper option for bandwidth, we would go that route for sure. Yeah.

For the bandwidth side of things, I'm curious. I'm guessing you're using a CDN, because I always feel like CDNs cover the bandwidth to a certain extent.

CDNs are expensive. Based on my experience, if I had needed to pay for ours, the math at one point came to about $2000 a month. That was when we were open source and letting anyone use the CDN. The founder of JSDelivr reached out and said, 'Hey, we'll take care of your entire CDN bill.' We transferred everything to their CDN system, so they handle it now. Usage has probably grown six times since they took over, meaning they're likely absorbing several thousand dollars in charges. We're using around two terabytes of bandwidth right now. AWS Lightsail gives us four terabytes to work with, so we have some nice breathing room.

We can keep upgrading, and their upgrades aren't too bad.

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 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. 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 for delivering their icons in npm and that's made it nice to see like we I'm blanking what icon pack. Simple icons as a brand icon pack. They are very large. To the point 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.. 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. 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 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, brand icons- was a little bit more 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?

It's mostly web developers. We have many Android developers and many Windows developers. The number of people using Material Design icons in Windows apps is shocking, and we see iOS apps too. We see many mobile apps, especially ones written with the many nice web tools that now let you build native applications. A lot of them use Material Design as their foundation and pull in our icon pack. Great third-party libraries specifically support our pack. With 7000-something icons, the icon you need is usually there. People have written nice wrappers where you can say an icon's name and it simply works in your app.

If I have a toolbar, I specify this icon and that icon, and I'm done. It's the same with Figma. Many people have made random plugins. We've discussed making a first-party plugin, but the community already does a great job. We also have an excellent browser extension, made by one of our core contributors, that lets you copy and paste into Figma. It works in Edge, Chrome, and Firefox. The extension will soon be renamed to Pictogrammers. Right now, it's called Material Design Icons Picker. The community picks up the rest, and we don't want everything to be first-party because that's too much for us to do.

I'd say 80% to 90% of our users are still web developers.

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?

We use Slack. 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 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. Anything with the website, anything you see, with one of our packages that we distribute, we make sure there's a pull request, everything's super visible to them. And then we just kind of introduce: 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. There's a page for every single every framework you can imagine.

Every web developer framework, Vue, React, we have Nodejs docs, how to code scripts for it. 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. 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. 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 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 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 basically end up shipping.

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, 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. 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.

But there are niche groups that just really like that kind of project, that just latch on. I found, 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. 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, it's great. You're also very popular, so your distribution is difficult for someone to mimic overnight. It's much easier for a person to contribute to your project and have an impact on the world than to do something alone. That's one of the great things about open source. As you described, it required a lot of heavy lifting from you early on, when you literally created 1200 icons, but that created a center of gravity and momentum that attracted more people and got them to use it. Of course, finding a community of people who really care about something like this is always a good thing.

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. It seems like everything you've provided so far is free. Is that correct? Do you have a monetization strategy? If not, why do you decide not to?

So we've discussed a few times. We're not sure how we want to do that eventually. 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. The pixel editor I'm making right now is going to be free. I have no plans to monetize that. We are planning to expand that a lot, including the picture grammar website. So right now it's ad supported. We're part of carbon ads greatest community of for ads. If you can get into it. I don't know how picky they are nowadays.

But, yeah, they're the same people that have ads on. 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. But that's how we monetize ours right now. That's mostly just to pay for coffee. I have lattes almost every day. So we use it for that. And then I distribute that out. 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. We can always do that. 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. 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 had it for... Ah, The Deck.

Yeah. The Deck was by Jim, and I don't know why I'm referring to Jim on a first-name basis. I never crossed paths with him; I just knew him by reputation. There were only two options: Carbon or Jim's Deck network. Deck was hard to get into because it had very high standards for a long time, while Carbon was clearly more popular. BuySellAds bought Carbon. It's been fun to watch. Speaking of monetization, my friend Vincent runs Streamline HQ, which has an entire suite of icons. One of its packs alone has something like 30000 icons, making it one of the largest icon packs. They have entire illustration suites, too.

He's built it into a pretty sizable company, considering how quickly it has grown. It's interesting to see that trajectory from icons into a full business suite. We don't want to go that far because the idea is for us to remain primarily open source. Still, it's cool to see that scaling to that level is possible. Newsletters are also all the rage these days, so you could have a newsletter about icons and offer subscriptions to it. More side projects.

Yes, exactly. I always have this little circle that I go back to where it's like: am I doing icons today? Am I coding today? Am I doing this? I only do one of them and I focus on it. That's how I spend my Sundays. They're 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. Depending on the style, yes, I 100% see it working out. I was playing around, especially just basic logo design. 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.

Being able to knock those out really fast, is kind of useful. And I've seen some people already post stuff on Twitter and doing this kind of work with more, I'd say more realistically- graphical icons, but I saw stickers, people were making stickers that look production value stickers, with some great designs where I'm like I couldn't tell the difference if that was made with AI or not, 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, design stuff. So we'll see what direction that takes for the community. 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, in the inside cutouts. 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. 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. So if it's like a medical icon, it's tagged medical. So we have that AI metadata built into our icon system. Which is useful. And we've done some things. So there's this idea with icons of being proportionally correct, which means, 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. It's almost like visual regression testing for an entire suite of icons. So what's next? You mentioned maybe adding color icons, or colorful multiple 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 it can do everything we need to start building out this suite of fonts. So fonts, then the Memory icons, then hopefully some other pixel icon packs. We're also polling our internal core developers on what kinds of icon packs they'd like to work on because they like Material Design. They use it day in and day out. Usually, these people in our community already use it at work and at home. So we can't expect them to shift what they use at work and on their current projects to some other icon set and be that invested.

We're trying to find something we can move the same interest toward without diverting too much from Material Design. Material Design is going to be around. I was going to say the request volume was slowing down, but it's not. It's so consistent. We still get probably two to three icon requests a day, and we're up to 435 open issues right now. That's never stopping. So the idea is that we want to start new icon packs and start this font stuff. The website will be in fonts. It's getting a whole new admin built out, all recoded in Node. That's the thing too: we're recoding everything in TypeScript. The new website is TypeScript-based.

The new admin and the new back end will all be TypeScript. Currently it's PHP because, eight years—no, nine years ago—PHP was the go-to. I was in a conversation at work recently where I said, 'Yeah, I need PHP. It's a requirement for all the serving that I do,' and they were like, 'Really?' I was like, 'Yep, it works.' I've got that thing fine-tuned on memory. We could run the entire server, like we did for years, on a gig of memory. Even with all that traffic, we only had a gig in that machine. We're on a two-gig box now, so we have a lot more bandwidth to work with.

But yeah, icon packs and fonts are what we're going to be expanding to, and that'll 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. 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. 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 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. And there is. So I use a- No, Well, I don't not everyone has a video on right now, but the Surface Pen is primarily what I use to draw icons with. Yep. So, I've gotten really used to just drawing with this. So the Pixel I'm working on is primarily me using this with an eraser and stuff. But I started adding mouse support because my contributors do not all have, 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. Also, 50% of my life as well then, you know.

So, wow. That is the power of online communities, right? You find people who are interested, who share a common interest, whether it's programming, visual design, or the intersection.

It's so nice to meet everyone too. 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. He worked at Mic he's. He's back at Microsoft actually. 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 picturegrammerscom. I'll link to all of it before and talk in a bit. Bye.