Icons are an amazing tool to use when creating user interfaces. They speed up recognition, cross language barriers, and add visual interest to a page or interactive component. For that reason product designers spend a lot of time on the ideation and production of beautiful icons, but an equally important part of the process is the finalization and packaging of those icons for delivery.
The Importance of Flattening Icons
It’s imperative to consider who will interact with your icons and the context in which they will be built after the design team has handed them off. Often, an icon will be drawn up from a series of different stroke and shape layers grouped together as one object. An asset constructed this way might be tricky for a developer trying to quickly export an SVG file. Additionally, assets built with many individual layers will have unpredictable visual changes when resized by internet browsers or responsive applications. Luckily, there’s a couple of extra steps you can take to avoid any of these issues.
Recently at Tandem, we designed a series of icons for the benefits section on our careers page. Let’s take a look at the steps to finalize the icon we created to represent our annual learning budget.
(Note: Save a live version of your icon before going through the following steps — this will make things easier if you ever need to go back and adjust your asset!)
Step 1: Convert to Outlines
After you’ve built your icon, you may have a collection of shapes and strokes grouped together. Based on the web browser, shapes and strokes behave differently when resizing or applying new colors. So the first step is to take our apples and oranges and make them all apples. If you’re using an Adobe product, that means selecting all the layers making up your icon and navigating to Object > Path > Outline Stroke.
Step 2: Delete Unnecessary Layers
Once you’ve converted to outlines, everything selected becomes a shape. If you have shapes with both strokes and fills applied to them, both the stroke and fill will become two different shapes. This is important to keep in mind because we want to delete layers that will not be merged into the final icon. In our example, the inside fills of each of the books can be deleted.
Step 3: Flattening Shapes
The next step involves merging all the remaining layers into a single layer. This can involve some combination of the Unite, Minus Front, and Intersect functions in your Pathfinder toolbar on Adobe Illustrator. For this step it helps to think about your layers in three dimensions. Are all the layers on the same plane, or do you have some shapes in front or behind one another?
For example, let’s look at this plant icon Tandem made to represent career development. Because no shape layer of the icon is supposed to be in front of or behind another shape layer, you can highlight all the shape layers and click Unite.
Unfortunately, for our annual learning budget icon, it’s not that simple. The way we’ve drawn it up, the bookmark is in front of the books behind it.
Let’s say we were to select all these shapes and layers and Unite them together. It would look like this:
We don’t want evil shadow realm books! Not in this house. That’s happening because when you use the Unite function, it converts all the selected objects into one and uses the fill of the top object.
Instead, let’s break it down into three steps based on the three levels that exist in this icon:
- First, we are going to Unite the three books because these all live on the same plane.
- Next, we are going to subtract the fill of the bookmark from the books behind it. Subtracting will help us achieve the look of the bookmark being in front of the books.
- Finally, we will Unite the outline stroke of the bookmark with the rest of the object. This way, the shape of the bookmark is visible on top of the books.
Keep in mind that when you convert the bookmark to outlines, it becomes two different shapes:
Step 4: Exporting and Implementing Your Icon
Finally, all that’s left to do is export your asset into an SVG file. If you would like to use it in Figma to incorporate into wireframes or application comps, remember to select your SVG file and flatten it to remove unnecessary framing layers that Figma adds to SVGs.
Finalizing and packaging your icons for delivery is an extension of designing with empathy. Taking these extra steps to simplify your layers may not impact the appearance of your icon asset, but it will make life a lot easier for developers (and everyone!) involved in the handoff process.