Learn how to easily create icons that use nested symbol overrides to change color.
- [Instructor] In addition to conveying brand personality through color and typography, what makes icon so great is their ability to get a message across quickly. If an icon is successful, it will take very little time to communicate the intended idea to the user. Icons really play a crucial role in guiding visitors around your site or application and they're a must-have for any design system. So maybe your brand's aesthetic is minimal and monochromatic or maybe it's more suited for friendly rounded line icons or whatever it is, you're going to need an icon set.
And an icon set, you're going to have some options. So you can either use an SVG or icon font. And icon fonts are mapped to individual unicode characters, enabling you to store multiple icons within a single file. Fonts are vectors so icons can scale to any size. Now, on the other hand, scalable vector graphics or SVGs, they're a vector graphic format that can scale to any size without losing clarity. So you can have a custom SVG icon set created or there are a ton of SVG icon sets that you can download on your own.
Each of them has their pros and cons in usage scenarios. Icon fonts work well when using a large number of icons with basic styling requirements. And then SVGs allow for more versatility, but it typically adds more overhead and requires fall back for older browsers. So whatever you choose, I want to show you how to do our first nested symbol, nesting color inside of an icon so that we can easily swap the color of the icons out throughout our file. In this demo, I'm going to be using SVG icons.
So, you'll see in your sketch file that there are a few icons that I have listed here, but note that your design system will have many, many more icons. So let's go ahead and take a look at our icons. So going over here, you'll notice that I've made every single icon here a symbol. So let's go ahead and inspect it. You'll notice I have them laid out here and they're all the same exact size. They're all 48 by 48. You see, look over here on the right panel here. They're all 48 by 48 pixels.
And that's so that I can easily swap them out if I want in context. They're also each in their own symbol's box with appropriate padding for ease of use. So if I look at what one of these symbols actually contains, you'll notice that I have color nested inside of this symbol and it's being used as a mask over the actual SVG icon. You can go over here and look on my overrides panel and I can then change the color to whatever color I want. So I can change the icon to the red, the blue, the green.
And that is because it's being pulled from these color symbols. So we created these color symbols in a previous video and now we're being able to use those as a mask over our icon as a nested symbol. So let me show you how to do that. I'm going to go back to this page and this one I haven't actually created as a symbol. So I'm going to show you how I created the nested symbol with color. So I'm going to go up to the top, now that I have this SVG, and hit create symbol.
Now let's name this Icon/Social /Facebook-fill. And I'm making it Facebook-fill because I actually have a Facebook line icon here and I don't want those to be confused. So I'm going to create this symbol and you'll notice that it created it over here on the right panel. And now it is a symbol here. So I'm going to go ahead and double-click so that I can inspect this symbol.
And it kind of takes me, it kind of puts it all the way over there 'cuz Sketch arbitrarily likes to put where it wants the symbols. So let's go ahead and zoom out and I'm going to drag this symbol, kind of, I'm going to actually drag it over here. So that it's closer to my other symbols for organization. Alright. So what we're going to need to do here is we're going to make it the same size as the other symbols, so that it can be used on the overrides panel.
Now I'm not going to check adjust content on resize because I don't want the actual icon to be resized. I just want to add some extra padding on the outside of the icon. So I'm going to change the width to 48 and I'm going to change the height to 48. And then I'm just going to center this within this symbol. And that's, go up here. And it centers up here. Alright. So, now we have our icon, but we're not quite done yet. Notice how on the other icons, we have this color piece that is nested inside here.
So how did we do that? Let's go back to this one and what I'm going to do is I'm going to come up to the top and I'm going to go to insert, symbol, and then I'm just going to click on color. Now we don't have to click on a particular one. You're just going to click on the parent and I'm just going to insert it right onto the symbol. So you'll see if you come over here that it is actually within our Icon/Social/Facebook-fill. So let's go ahead and just resize it to 48 by 48.
And then center it within our symbol here. And now what we're going to want to do is we're going to create a mask. So select both of these, right click, and then we're going to mask. So now notice that the color is, the color symbol is a mask over the actual SVG icon. It is nested into my icon symbol. So it defaults to the primary color, but I can go into my override menu here on the right and actually change it to whatever color I want since it's pulling from our color symbol.
And so for the symbol's page, I like to keep it this darkest gray here for consistencies sake. So I like to use this color emoji and this little arrow that really helps on the overrides page when you get a lot of nested symbols to know exactly what you're changing and when. So I'm going to go back to my symbol and rename it there. And I just kind of like to rename this parent folder icon. And there you go. So let's go back to the symbols page, here.
And you'll notice that it kind of resized it when we added that padding and that's not a problem. If you just want to right-click it and hit set to original size, it will come right back to the original size that you created this icon. So now you can see that we have this color override that we can override with any of the color symbols that we had already created. So I can change that to arrow red if I want to or the neutral blue, whatever color you need for that context.
Let me show you an example of a day to day application of how you can use this. So, here we have a navigation bar and you need one of the icons to be the selected state and you need one- a couple of the other icons are the deselected state or the disabled state. So if, now I want to show the screen is on this selected state, I can simply just change that icon to blue and then change this one back to a disabled state. Using nested symbols with icons makes switching out icons for different menu items or line items so much easier.