< Back to Blog

Keeping Small Changes from Adding Up: A Guide to Working with Icons

A Guide to Working with Icons

Suffering for the sake of switching up icons. It’s a feeling that tends to overcome parties on both sides of the product development fence, because both designers and developers have come to dread dealing with these kinds of changes. First, let’s focus on why a fence exists at all in this situation.

Designers develop icons with the goal of creating a uniform visual style. How do they achieve this? Below is a brief checklist on how designers build a strictly visual system of iconography:

  • Create familiar optical mass
  • Use the same stroke weight
  • Use the same corner radius
  • Allow no blurred pixels
  • Use the necessary minimum points to create the shape

Unsurprisingly, however, developers are always trying to achieve maximum systematization on their side of the fence, too. The main problem emerges when developers put icons in the code — and when that code is constrained to set margins and sizes for each icon. In those situations, heaven help you if you have to make a full change of your icons’ shapes on the fly. Ultimately, this will lead to wasting a developer’s time. (And believe me, it will not increase the designer’s karma.)

So what actions can the designer take to gain the love of the developer and the appreciation of the project manager (for saving time)? To answer that question, we at Distillery looked more closely at some of the items in the checklist above.

Achieving the Same Optical Mass

Set your limits. Using the grid is incredibly helpful. I recommend you make the grid almost transparent and use it as a locked overlay above all graphics. Never put anything outside the grid. But do feel free to create a few grid layouts within a single project for different types of icons: e.g., small, medium, huge. However, you must always set limits for each type.
Grid
Pixel-perfect it. Use the pixel grid as much as possible (e.g., in stroke weight, corners, shape size). This will make your graphics look fantastic on both non-retina and retina displays. That’s because the pixel grid guarantees integer sizes for your graphics. Say goodbye to blurred icons!
Pixel-perfect
What about complicated shapes? You can use non-grid-based lines in your icons, but it would be ideal for you to snap the points to the pixel-grid as much as possible.
Complicated shape

Minimum Points and Preparing for Use

Convert your paths the right way. Always convert paths to shapes using the “path → outline stroke” command. This benefits the developers. They will use SVG files, so this will help them a great deal — because they use the “fill” attribute in CSS to set colors for the icons. After that, for solid-colored icons, merge shapes into a single object.
Outline stroke
Merge shapes
Use transparent squares to make everyone’s lives easier. Here’s a small trick that makes life much easier on both sides of the fence: Add a transparent square that repeats your grid cell. This will help you to easily align icons on the artboard. For developers, this facilitates the creation of sprites, assets, and CSS. In the future, if someone wants to change the icon shape, all you have to do is change the icon. No code adjustments are needed. It’s easy and fast.
Transparent squares
Now your totally awesome, thoughtfully prepared icons are ready to go. Copy your icon — along with the transparent square — and paste it wherever you want: XD, Photoshop, Sketch, etc. It’s now super-easy to align and export. Everybody wins!
XD
Photoshop
Sketch
Export assets using the right tools. So what if you’re a huge fan of Photoshop, but your developers are asking for SVG assets? Tools like Zeplin need vectored layers to prepare SVG assets. So in this case, you have to paste your icon as a shape. Unfortunately, Photoshop can’t separate a few vector shapes to a few different layers. So you’ll have to prepare those SVGs using Illustrator. Fortunately, Adobe offers an “Assets Export” tool in Illustrator. To use it, select your icon with a transparent square and drag it into the “Assets Export” panel (or click the “Add” button on the “Assets Export” panel). Select the SVG file type and choose a folder. That’s it! Now, just share that folder with the developers. To make your developers even happier, set names for your assets in the “Assets Export” panel before exporting.
Assets export
Assets export
Assets export
As a last step, it’s time to enjoy your awesomeness. Because now, even if you change the shape of your icons twice every hour, your team — designers and developers alike — can genuinely enjoy the process of changing icons across the project. And there’s no more suffering.

One final tip before I go: always put your icons into the symbols (or into a linked smart object, if you are using Photoshop). This will save you tons of time. Just imagine: one small change in one place automatically takes effect on all pages across the entire project.

Want to learn more about how Distillery’s developers and designers work together to enable a seamless product development process? Let us know!

 

About the Author

Mikhail Nikipelov is a talented designer who joined Distillery in 2016. Drawing inspiration from the quote “Thinker doesn’t fear, feared doesn’t think,” Mikhail encourages his colleagues to speak up and raises high the torch of extremely high-quality web design. In his free time, he enjoys playing guitar and djembe.


BACK TO TOP >