Get started in Sketch with your very own square

I'll typically start my first icon with a 24 x 24px rectangle inside of Sketch (Quick heads up, I'm using version 46.2) and set the fill to 10%. This is a temporary visual reference for our icon's bounding box. If I'm doing a big icon project, I may even go so far as creating another 20 x 20px shape with a 0% fill and a 1px inside border to use as a guide for my core shapes, whereas some irregularly sized icons may poke beyond the 20 x 20px bounds, but never beyond the 24 x 24px edge. Once we have our 24 x 24px bounding box in place we can design or paste in an icon on top of it and visually center it within the bounding box. You can use align to middle and align to center to begin with (I use these shortcuts for that), but you should always tweak the positioning to be visually centered with any icon that has some type of irregular size to it. Now that we have an icon on top of our bounding box, let's select everything and Create Symbol. I use the shortcut ⌘K for this.

Let's get OCD for a minute and organize the crap out of our symbols in Sketch

Let's click over to the Symbols page in Sketch where are newly formed icon symbol lives. Let's assume that we've done this multiple times and already have a small icon set created as 24 x 24px symbols. It's critical that each icon artboard is exactly the same size otherwise this method will not work properly. I'll explain why in the upcoming steps.

As for naming conventions, I prefer to use the following sequence for icon symbols: icon/ category + name. Not every icon needs a subcategory, but it's helpful for things like arrows or media controls, which may end up looking like this:

• icon/stroke/arrow-up
• icon/stroke/arrow-right
• icon/stroke/arrow-down
• icon/stroke/arrow-left

I always consider the alphabetical implications of naming things as it relates to me finding it later. Also, I usually delete my original 0% rectangle shape once it's served its purpose of defining my symbol's artboard size. If you leave it in when you later get ready to export your icons, it will create unnecessary code if exporting as an SVG.

Choosing your shared style

At this point, you may also want to consider creating at least one shared style for your icons. Go over to the property panel on the right, click No Shared Style then Create new Shared Style. Something simple like "icon default" will do for now, you an always change it later. Let's assume for this step that we're using only stroked icons, so that every shape in our set will have the exact same 2px style with Fill deselected. Once the Shared Style is created, select all of the icon pieces in every artboard at once with the selection tool while holding ⌘. Holding ⌘ will force select the individual shapes instead of any arbitrary group folders. With everything selected, go ahead and choose icon default from the Shared Style menu. Now, when you decide to try a new color for the icons it will be easy to make a global change quickly.

Converting an icon to have a fill instead of a stroke

Let's look at the symbols again. Here we have stroke-based icons. Let's duplicate icon/stroke/link and call it icon/fill/link, or whatever makes the most sense for you to remember that the stroke is not intact anymore.

Now let's select the path and choose Layer > Convert to Outlines. You can also hit ⌘ Shift O as a quicker option. This will give the icon a fill using the same color as the stroke. Plus, filled shapes can be used as masks, whereas stroked shapes cannot.

Multiple background color options

Now we're going to create a few custom color symbols. Let's create a color swatch by drawing a rectangle the same size as our little icon artboard. Create a 40x40px square with a #000 (black) fill color. Convert the square shape to a symbol and give it the name color/000 or color/black, again pick your poison.

I'm using 40x40px, because if I use the same 24x24px dimensions as the icons, both the color shapes and the icons will be available later in the same symbol overrides section. That can get a little complicated, so having different size artboards for symbols that aren't similar makes it easier.

In the Symbols page, find and duplicate the color/black symbol by clicking the name and hitting ⌘D. Select the copied artboard and rename it to color/red. Now select the square shape and change the fill to match the name, ff0000. Now we have two color swatch symbol options. You can repeat this as many times as you'd like to have a variety of dynamic colors in your document.

Put the finishing touches on your icon with a dynamic background color

Go to the icon/fill/link icon we converted to a fill. Now add the red color symbol to the same artboard by going to the top menu and selecting Insert > Symbol > colors > red. Place the color/red symbol directly on top of the filled icon shape and resize the color symbol to 24x24px. Choose the icon shape and hit ⌘Control+M to create a mask with the shape. Now let's also hit ⌘R and rename color/red in the layers list to simply color. This will help us later on when we get ready to override the color.

Now we have an icon symbol that contains a color swatch symbol, also known as a nested symbol. So if we place this icon symbol anywhere within the file, we can look to the properties panel while the symbol is selected and choose a different background color.

A quicker way to insert symbols

This is a total side note, but I rely heavily on the Sketch Runner plugin to quickly insert symbols on the fly. This is really similar to Spotlight or Alfred for finding and launching documents, only we're using a plugin inside of Sketch to quickly place any symbol.

With the plugin installed, you can hit ⌘' to activate it, quickly type color red and hit return on the selected symbol, then click anywhere to place it. Much faster than trying to navigate through the menu anytime you want to place a symbol.

This also works amazingly well when you have your icon library setup and you want to place an icon in your interface with just a few keystrokes.

Dynamic background colors in action

Let's go to Page 1 in the Sketch document. Hit ⌘ ' and type link fill and hit return. Now click anywhere on the canvas to place the symbol. With the symbol selected, look at the properties panel on the right under Overrides.

The first option will be a dropdown called color, which is what we renamed our nested color symbol a few steps ago. If you inserted the red color swatch the dropdown will say color/red. You can select this and change it to color/black or any other color/name symbol you may have created.

The biggest thing to keep in mind here is that the nested color symbols (ie. red and black) MUST have the exact same artboard dimensions to be eligible for a symbol override. This goes for any other symbols that you'll eventually want to substitute as well.

So now if we wanted two instances of icon/fill/link on our canvas, one of them can be black and the other red. This could be useful if we had a form with an error state that needed a red icon. The possibilities are endless.

Parent symbols

Now that we've covered nested dynamic colors, let's take a look at nesting the icon/fill/link symbol inside of another parent symbol.

In this example we have an 375x667px iPhone artboard. On the artboard we have a background shape, a title, and the icon: line-item/title-icon. Note that I've named the icon symbol icon in the layers panel. This will help us identify it later in the Overrides section.

Now that this icon symbol is nested inside of a parent symbol, we now have access to substitute that icon symbol for any other symbol. Make a duplicate line-item/title-icon symbol and change the title and icon in the overrides section.

Stretchy symbols that don't break

So what if we wanted to use this symbol for a responsive website or a different size app? Let's go a head and create an iPad portrait artboard at 768x1024px.

If we duplicate the symbol and stretch it all the way across the new artboard, the elements inside the symbol get out of position and the icon gets stretched. No good. Let's click into the symbol and make a few adjustments.

Once you've double-clicked the symbol to edit it, select the Title text field and choose the Pin object to Left edge on resize icon in the Resizing section of the properties panel on the right.

Now select the icon symbol on the right and hit the Pin object to Right edge on resize. Also, hit Fix Width. That will keep it from resizing when the symbol gets stretched.

Now go Return to the Instance of the symbol in the original artboard and everything should be looking good.

Relative positioning with Text

Let's say you want to have the icon positioned just to the right of the text AND you want to have dynamic text length using the text override field.

Let's create a new symbol using the same components from the previous symbol. Let's call it line-item/title-dynamic-icon But this time, we'll put the icon 4px from the left edge of the text field.

Inside of the new symbol, make sure the text field is set to Auto under alignment in the properties panel. Now select the icon symbol, deselect Pin object to Right and instead select the Pin to Left.

Now you can place new instances of the symbol and type different length text strings into each instance. As a result, the X position of the icon will always fall 4px to the right of the text field.

Swapping icons quickly

Now that we've got some parent symbols, we can begin placing them wherever we'd like with any icon we'd like. Select any new or existing instance of the symbol and choose a different stroke or fill icon.

With each fill icon you choose, you can also change the background color. Remember you can always go back to your Symbols board and add new icons and new colors.

Now that we have this setup we can use it quickly whenever we need this component. It's takes a small amount of time to set it up properly, but once you do it can really speed up your design process.

Sanity for Symbol Craziness

When you use a lot of symbols, things can really get out of hand. In no universe is a perpetual horizontal display of components in the Symbol page helpful.

Lately I've been using and absolutely loving the Symbol Organizer Plugin. It automatically groups and aligns similarly named symbols using the parent/child naming format that already works well for symbols and styles.

Check out the plugin and you'll wonder why you haven't been using it for every project. It's free and fantastic.