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