What an Icon
We discuss the importance of icons in user interfaces, focusing on topics like accessibility, design considerations, serving icons on the web, optimizing SVGs, and exploring innovative ways to search for icons.
006
Transcript
00:49Hey, good to see you.
00:50Thanks for coming.
00:51Here’s another episode of wireframe.
00:53And today I’m going to be talking about icons.
00:57All right.
00:57So I have some notes for us tonight.
00:59Basically a whole bunch of different things about icons that I want to go
01:01over starting with accessibility.
01:05So accessibility should be the first thing that we think about.
01:09Overall, when we’re talking about user experience, of course, and when folks
01:14are making these interfaces, it’s very common for someone to go ahead and say,
01:20Oh, well, I don’t have enough room here.
01:22So we’re just going to put an icon in here.
01:24And we see this often with navigation.
01:28Bars and items and elements that typically will change, the text that should have
01:33been there into some icon that typically means nothing to the user, right?
01:38We see this all the time where a user has to hover over an icon if they have
01:43the ability to just to find out what that icon is meant to mean, right?
01:49And it is typically better to put some text there instead, or to really
01:55reconsider the use of that icon.
01:58Now I’m not saying that you can replace everything where
02:03icons are with text, right?
02:05There are certain places that we have come to be familiar with
02:10when it comes to icons, right?
02:13So we can imagine like toolbars that do left and center
02:16and right alignment, right?
02:17That’s a very common thing to be doing in user interface design.
02:22So icons that represent that left align, center align, and right align we kind
02:27of recognize those these days, right?
02:29It’s important to really take a step back and second guess yourself when you
02:35are considering putting icons in places where text really should be going.
02:40And that’s not just to say about individual thoughts or
02:44ideas to represent that icon.
02:46But even talking about things like providing help, right?
02:49Cause you have like that question mark that appears in a circle to provide
02:53extra information about something.
02:55And maybe you, you know, put that information in a tool tip.
02:59And I believe that it’s probably going to be better off for
03:03you to put that text inline.
03:05Forgo the icon, just put that text alongside the element
03:09that you’re trying to describe.
03:11Or, even better, reconsider the interface in a way that’s more intuitive, so
03:15you don’t need the additional text to describe what you’re trying to convey.
03:19A little bit of a hot take there, but wanted to kind
03:23of mention that off the bat.
03:24Speaking of that question mark icon Something that a lot of people
03:28actually don’t know is that in right to left languages you expect
03:32many things to be reversed, right?
03:34So we’re talking about things like punctuation and you would imagine
03:38that in right to left languages the question mark would also be reversed.
03:42And in right Some of them, that is the case, yes, but actually
03:48in Hebrew, it is not the case.
03:51So in Hebrew, which is a right to left language, the question mark in that
03:55language is meant to be left to right.
03:57So You’d need to do your research when you consider what kind of icon
04:02that you’re putting in a particular spot for localization purposes.
04:06There’s actually a really great article that I’ll link to in the show
04:09notes 1 that talks about some of the blunders when identifying what icons
04:14to potentially use in your interface.
04:17As an example hand gestures that you might consider in your neck of the
04:21woods to be all right, or a sign of something good could be something.
04:26Very different in another culture.
04:28So something to pay attention there.
04:30It also mentions about animals and what they mean for different cultures.
04:34I think one of the examples was using an owl thinking that it
04:38means wise in some other cultures that actually means not wise.
04:42So something to pay attention to as well.
04:44It’s not.
04:46Just a matter of what you think it means, but you really have to
04:49consider the greater worldwide meaning of some of these symbols, right?
04:55Now there is actually an ISO standard that attempts to make sense of icons.
05:00It is the ISO IEC 11581.
05:04I actually haven’t seen it because for whatever reason, it’s a paid resource.
05:09I guess ISO needs to make money somehow.
05:11But I was taking a peek on the internet to see if I could find that PDF
05:14somewhere just to take a gander at it.
05:16But if you are someone who is really into icons I highly recommend that
05:21you look out for that document.
05:23I imagine that there’s going to be some really good information in
05:26there, but again, I can’t tell you for certain because I didn’t actually
05:29get an opportunity to read it.
05:33Okay, well, all that being said, don’t use icons right no.
05:37We’re going to actually move forward because yes, there will be points
05:40where you’ll need to use icons.
05:41And the next thing I kind of want to talk about is the design of those icons.
05:45I mean, admittedly, we’ve just talked about, you know, the things that
05:48you need to take care of when you’re actually thinking about a particular
05:52icon that you could be creating.
05:54But let’s say that you actually do need to create an icon, right?
05:57And you probably have seen out there these icon grids and the purpose
06:03of those icon grids, by the way, is meant for optical alignment.
06:07So a play button is a really good example of if you were to just center the play
06:12button box, the way that you would design that without the grid when you place it
06:17inside of an element, that play button is going to look off balanced immediately.
06:23And what you’re meant to do instead of just, you know, creating that triangle is
06:29to put that triangle inside of this icon grid that you’ll find on the internet.
06:33It’s very simple to find and I’ll put a sample of it in the show notes, I suppose. 2
06:39But what that’s meant to do is meant to help with the optical alignment.
06:42And in fact, there’s actually a good video on YouTube that talks
06:47about different kinds of centering when it comes to geometric figures.
06:51It might not be entirely helpful for all symbols that you might make in a icon
06:58system, but I think there’s a lot of interesting information in that video.
07:02So I’ll make sure to link that in the show notes as well.
07:06But, as you’re creating this icon, obviously, there’s going to be
07:09some sort of style that you’re trying to apply to this icon.
07:12Maybe the icon is outlined, or maybe it’s filled.
07:15Maybe the stroke width is thin or thick.
07:18Maybe there’s a certain amount of rounding to these edges and corners.
07:22Maybe the, there’s a miter edge on some of these angles.
07:25Right, there’s lots of different decisions that you’ll be making in your icon set.
07:30And it’s really kind of important that if you are making an icon set or even
07:34attempting to collect icons for your own app, if you’re not an icon designer,
07:39to really look for icons that are meant to be in the same family that
07:43are meant to work together in unison.
07:47Now that can be a step further, because I believe that your icons
07:51should also work really nicely with the font that you expect to use.
07:56Okay?
07:56So you can imagine that if you have a bold weight that you should also have
08:01some sort of bold weight icon, whether that be an outline or a filled icon.
08:06So, trying to keep that in sync is actually a really difficult thing.
08:09Difficult thing to do, right?
08:10Especially if you are relying on lots of icons to help convey
08:15messaging in your interface.
08:17Right?
08:18That exercise of aligning your typography and your typeface to
08:22icons can be a little overwhelming.
08:25So but of course you might be making your own and that’s fine.
08:28And admittedly like I said earlier, I’m not an expert in creating icons past
08:32knowing some of the very basics of what’s important when creating those icons.
08:37But I think the material design icon set is a really great resource.
08:41I’ve used it on a couple of my projects for a couple of small icons.
08:45We’re talking, you know, things like social icons or the close icon,
08:50menu icons, very simple kind of.
08:54Almost universal icons.
08:56Speaking of universal icons, that’s a research study that
09:00I’ve always wanted to do.
09:01I’ve wanted to do it since like 2018 and try to identify what icons
09:06could be meant as universal, right?
09:09When we see that X, I think at this point we all, Kind of have expectations
09:15about that icon and what it’s meant to represent at this point, right?
09:19It’s meant to close something.
09:21I think user interface design has come a long way over the decades
09:25that we’ve been doing it to recognize that that X actually does mean close.
09:29So I would like to think that there’s other icons that are like that,
09:32that are universally understood.
09:36And to identify those would be really great as a research study so that there
09:41would be a library of things that folks can look toward to then align as a
09:46baseline for their own icon sets, right?
09:48A place to start from.
09:50I imagine, of course, the X is probably the first icon in most places because it,
09:54it is meant to close items that are open.
09:57I’m excited to potentially dive into that at some point.
10:01So, going on with the designing of the icon, another decision that you’re going
10:06to be potentially making is if this is a monochrome icon or multicolored.
10:11Now, I will Say from my experience that most icons that we have in
10:16our systems today are monochromatic because it’s a lot easier for us to
10:21maintain from a systematic standpoint.
10:23Additionally, multicolored icons, when you reduce the size of those, end up losing
10:28fidelity and end up actually being a little bit harder to identify as an icon..
10:33You want it to be simple and really straight to the point about
10:36what it’s meant to represent.
10:37And the more stylistic choices and accessories that you end up putting
10:42onto the icon, The less it’s discernible about what it’s trying to convey you
10:47would think that it’s more because you’re putting more detail in it But in such a
10:50small area, it’s really hard to create those finer details especially folks
10:55who are vision impaired that are going to be trying to identify these small
11:00glyphs in the page and suddenly have blurry color mixed in between of that.
11:06So keeping them as a monochrome symbol is going to be really helpful
11:11for you as opposed to trying to think about multicolored icons.
11:15I imagine that there’s probably ways of handling that, but.
11:19You know, keeping it simple is really going to go a long way in that way.
11:22All right.
11:23So that’s going to be enough.
11:24I think about designing icons as much as I can really talk about it.
11:28Right.
11:28The next thing I kind of want to talk about is serving icons.
11:31And this is going to be coming from a web perspective.
11:34It’s not going to be coming from a native iOS or Android perspective.
11:38I know that there’s different ways and expectations of serving icons
11:43to those platforms, but what I’m.
11:46Familiar with, of course, is the web, and I think there’s also a lot of nuance when
11:50it comes to serving icons on the web.
11:53Now, for a long time, we’ve had something called Font Awesome.
11:57And that was an example of a font icon library, which basically meant that
12:02all the icons were distributed as a font, so that if you had a particular
12:07glyph that you were going to show in this library, instead of, typing out,
12:12a character on your keyboard, you would actually get a different glyph.
12:16So maybe it was like a battery icon for the letter K that’s just top of my head.
12:20I don’t actually know if that was accurate, but that was the general gist
12:24there and the benefit of that, of course, is that it’s really easy from a developer
12:28experience side of things to get the icon that you need right on the page, visible.
12:34With really no fuss because we are familiar with the way that
12:38we would load fonts today, right?
12:41It’s pretty easy to load a font on the web at this point, you know the font
12:43face declaration So just putting a link to your font set was really easy and
12:49then having you know A symbol that’s inside of your HTML that represents
12:54that glyph was really great A couple of caveats with this number one is that
12:59that symbol is kind of inaccessible and it’s really important going all
13:04the way back to the accessibility part.
13:05Is that really any icon is going to be inaccessible because it’s
13:10just, you know, an image, right?
13:12You need to have helper text with it, but is especially problematic
13:15when you have letters or other symbols that end up in your markup
13:20that the screen reader might read.
13:23By mistake and really confuse someone that’s using assistive technology.
13:27So it’s super important to make sure that you hide Those symbols from those screen
13:32readers, maybe even setting them as role presentation in some cases to again Make
13:37it a little bit easier for folks using assistive technologies to understand
13:41the meaning behind that stuff, right?
13:44But distributing as a font was one way of doing it.
13:46It’s one of the ways that material design does distribute their fonts.
13:50But on top of that, Material design also distributes ligatures.
13:54Now, the interesting thing about the ligatures is that when you combine the
13:59right characters together in that icon font, you will actually display an
14:04icon and what’s really powerful about that is that in the perfect cases, the
14:12letters that you would combine together, which would represent that icon, right?
14:17Would be the word.
14:19That would represent the icon.
14:20So you could imagine the word close as a ligature would then actually
14:26present a X visually in the HTML.
14:31Now, I think that’s really cool.
14:33There is again, a gotcha in there is, and that gotcha is if that word close is
14:40translated into something else certainly that icon will no longer be there.
14:44Behave like you expected it to.
14:46So again, you might look at the ligatures and go, that’s a really cool idea.
14:51I think that would be really helpful in terms of just again, typing out
14:54the word close and getting an icon.
14:55I think again, that developer experience is really nice because
14:58there’s a lot less lookup, but again, think about that localization piece.
15:02And how you might translate those characters into something else
15:07and then your ligature breaks.
15:09So just pay attention to that.
15:11Now.
15:13Continuing on with the serving icons topic, what we typically
15:18do now is our icons these days are usually served as SVGs.
15:23Okay, Scalable Vector Graphics, usually small ones.
15:26And there’s lots of different ways of serving SVGs to your webpages.
15:33One of them, of course, is inline, right?
15:35Because SVGs are actually markup just like HTML, and you could put
15:39that markup right in the page.
15:42Now, depending on the number of icons that you expect to have on the
15:46page, it might be A little bit more performant or potentially a better
15:52experience to actually put all the icons that you expect to use in a
15:56page inside of a symbol element.
15:59And there’s a great CSS tricks article, 3 actually a series of them that
16:04describe how to compose that symbol element and what you might use it for.
16:08But essentially you can think of that symbol as an SVG sprite sheet.
16:12That you can actually reference an icon from that sprite sheet up in your markup.
16:17And it’s almost like copying an instance of the icon into a
16:22location without duplicating nodes.
16:25So you can imagine, our normal interfaces and us making copies of
16:29nodes and, you know, div soup all the way down, the amount of elements
16:33that are on the page are potentially going to hinder performance, right?
16:37But imagine the ability to actually just copy an instance of a node.
16:42And I think that’s really cool.
16:43In fact, I think that would be really great for web components, but
16:46that’s a separate thing entirely.
16:50So that’s one way of doing it.
16:51Another way of serving these SVGs is actually externally.
16:55And as CSS tricks also talks about serving SVGs externally as well.
17:02Now you can imagine that when you serve SVGs externally as icons the difficulty
17:08there of course, is that that’s an additional network request, right?
17:11Because if you’re doing it on the page, that means that those SVGs are there
17:15when the page is initially loaded.
17:17It’s part of the markup.
17:18When you do it as an external request, that means that you have
17:21another request going down to your server or another server to get
17:26these SVG icons after the fact.
17:27And that means that, once the page is loaded, it’s entirely possible
17:31that there’s like a flash of unstyled content or additional elements that
17:36are popping into the page because there’s other requests happening.
17:40But if you do that internal sheet, you kind of need to have
17:43all of the icons available.
17:45Unless, you know exactly what pages are using what icons.
17:50Now you might know, or think that you know, what icons are being used on what
17:54pages, but from a component shareability standpoint, it’s a lot harder.
17:59And the reason it’s a lot harder is because these components that
18:03could be shared or composed from other larger experiences, they might
18:08not disclose that there’s an icon part of that experience just yet.
18:12It might be added dynamically.
18:14So there’s a lot of challenges in there, right?
18:18I personally tried to tackle this myself.
18:20There’s a package called savager that I made a few years ago. 4
18:24That was an exploration on how we might actually solve for this.
18:28And what I do in there is I kind of generate a a sprite sheet, but I use
18:33a manifest of all the icons kind of upfront, so I know what to be used.
18:37And then you can import the icon, you know, the top of the file.
18:41And then if it’s not on the page, we’ll go and find it.
18:44But if it is on the page, then.
18:46it’s all good So you could also preload that sprite sheet with, the common use
18:50icons just up front and then other ones that you would need after the fact,
18:54you know, will be pulled in as needed.
18:57So you can take a look at it if you like.
19:00It’s in the show notes.
19:01And admittedly, I’m not maintaining it.
19:03It’s been a while.
19:03I don’t think anyone’s using it.
19:05I used it on a site a few years ago and it seemed like it was
19:09working, but again, haven’t really kicked the tires in a while.
19:12So Maybe use your own risk, of course.
19:16So another thing I wanted to kind of talk about as well is
19:19optimizing these SVGs, right?
19:21Because if you’re creating SVGs in a art program like a Figma or Illustrator,
19:28a lot of the times what’ll happen is when you export that icon, there’s
19:31a lot of additional metadata that really doesn’t need to be in there.
19:34And there are tools out there that help you optimize your SVGs.
19:40There is a Tool called SVGO, which you can send SVGs through and pipe
19:47them to be transformed into more optimized versions of themselves.
19:53So it basically reduces all of the extraneous markup that you
19:56don’t need while still maintaining the visual style of your SVGs.
20:02It’s really important that you just don’t do that blindly because sometimes
20:07the way that it might reduce your Data will actually lose some fidelity.
20:13So make sure that you’re, you’re set the settings, right.
20:17And you know, double check that the output is correct before you put
20:20it, that it’s production, right.
20:22A tool that’s using SVGO that is on the web that Jake Archibald,
20:27I think his name is right.
20:29I think, let me just do a quick check.
20:32So Jake Archibald made a tool that’s I use all the time, which is SVG OMG. 5
20:39And it’s basically a web UI that has SVGO under the hood.
20:44And it’s really easy to use.
20:46I use it all the time for my Icons and other illustrations that I have
20:51that I really want to quickly just pop in, get a formatted version of
20:55the SVG out and keep moving, right?
20:57It’s not often that I have an entire set of SVGs that I need to have optimized.
21:02But imagine if you have a process that you’re putting all your SVGs through,
21:07all the new ones, you’ll definitely want.
21:09to use the NPM package SVGO to process all that stuff.
21:15But for a person that’s just going to go ahead and, you know,
21:18do them one at a time, I think the web UI is really helpful.
21:23Okay.
21:23So the last thing that I want to talk about is a little
21:28bit about user experience.
21:30And one of the things that I look at is education in design systems.
21:36And when it comes to icons.
21:39It’s really ends up being a challenge for trying to find the right icon, right?
21:47We already talked about accessibility and localization when it comes
21:49to icons and how much trouble that it is there, of course.
21:51But even when you think that you have the right icon in mind, sometimes
21:56it’s really hard to find, right?
21:58Because sometimes the naming convention in that system is done by.
22:03The expected purpose for that icon, and sometimes the icon is underneath
22:09a name that is more describing the shape of that icon, right?
22:14So that’s the difference between the word close for the X icon, and
22:18the word X for the X icon, right?
22:21Or the word cross, or something of that nature.
22:23So Now, granted, a better system, of course, is to have aliasing
22:28that could represent both of those things in your system, right?
22:32So that you could have different tags that represent icons so that someone that’s
22:35searching for an icon can look for all the different aliases that it might be,
22:40and then be able to show some suggestions about some things that are close.
22:46I actually remember Font Awesome doing a pretty good job at this, where
22:50when you do search for icons on font awesome it gives you things that are
22:53potentially direct matches as well as things that might be not so direct,
22:58but still up your alley, right?
23:01It might be a little bit off, right?
23:02So it’s
23:03the ability to search for icons, I think could be improved or.
23:11Maybe not improved as much as I would say different.
23:16Because I don’t know how much of an improvement it would be.
23:19What I have in mind is not searching for icons via text.
23:25I think that it would be interesting to search icons via drawing.
23:32Or, well, describing what you’re expecting.
23:36Right?
23:37So, there are tools out there today.
23:41One of them is called Shape Catcher. 6
23:43That allow you to draw a symbol.
23:46And after that symbol is drawn, it will provide you a list of
23:51suggestions that match that symbol.
23:55And I think that’s really interesting.
23:57Because then, instead of attempting to describe what you have in mind using your
24:01words, you have a vision of what this icon is meant to represent already, right?
24:08There’s something in your mind that says, Ooh, I’ve seen this same
24:11sort of, you know, symbol before, but I don’t know the name of it.
24:16I wish I could just draw it out and get it, right?
24:20Well, that’s kind of what Shape Catcher does.
24:22And I believe actually Google had something similar to it.
24:24If I could find it, I’ll put that in the show notes as well.
24:27But these were the abilities to search basically by drawing.
24:33And these are early instances of us doing like a search by image, right?
24:38That’s a, you know, standard Google thing of being able to search by image.
24:41But to be able to get a specific symbol based on that image is
24:45actually really interesting.
24:46So, I imagine, you know, Whether or not it’s an improved experience because maybe
24:53it’s hard to draw using a laptop or a mouse, you know, or what does it mean to
25:00be an accessible drawing experience for identifying an icon, I’m not sure, again,
25:06it’s a very rudimentary thought about how to find the icons that you’re looking
25:11for past trying to think of a name for it, but I think it could be interesting.
25:18And I think it would be worth exploring what that might look like as a
25:24mechanism to find appropriate icons.
25:27So I think that’s about all I know about icons.
25:30Icons are actually really their own system in and of themselves, right?
25:35Because they have their own designs.
25:37They have their own ways of distribution.
25:39They have their own localization parts in them.
25:42But yeah, what do you think?
25:43Tell me about your, I don’t know, your favorite icon.
25:46Do you have a favorite icon out there?
25:47What is my favorite icon?
25:49I don’t know.
25:50I think that that X icon because it’s so ubiquitous.
25:52I think that’s probably one of my favorites because it’s just, you know,
25:55you know, you’re going to need it and it’s going to be in there in the first place.
25:58Maybe tell me about your favorite menu icon because there’s so many of them and
26:04they all basically mean the same thing.
26:06So yeah, tell me about that one too, if you’re interested.
26:08But other than that, thanks for joining me on this one again, and
26:11I’ll see you on the next one later.