Getting Down and Dirty with Icon Editing

July 24, 2015

This is the second part of our Essential Guide to SVG Icons. In Part 1 we discussed the basics of SVG icons as well as some quick and easy methods for scaling and recoloring icons. This time we’ll open up the icon in an editor and make it sharp and perfect! Sounds scary? Don’t worry, we’re here for you!

Basic Editing

Sometimes you may need to edit more than the size and color of an icon. Even if you’ve never done it, moving and adjusting some parts of an icon is easy! Let’s take an example where you’re using an icon which is not pixel precise for the resolution you need.

We have Android L icons designed for a 24×24 grid, the same way Google does it. However, some of the icons are missing in the Android icon pack, so you have to take them from the Windows icon pack (for example, logos of Microsoft products which don’t have an Android version). If you use the icon as is, it will look blurred:

So you may need to take a Windows icon and adjust some points so they fit into the 24×24 grid perfectly.

The original image on the left looks blurred, while the edited image on the right is sharp.

What did we do here? Here is the new image over the original one:

For such corrections, we recommend using either Adobe Illustrator or Sketch.

Basic Editing of Icons in Adobe Illustrator

In this section we’ll scale a 26×26 icon to 24×24 and adjust it to make it sharp. We’ll need Adobe Illustrator and an icon. If you’d like to follow along, grab one of our free SVG icons from the free icon pack.

After opening the image with Illustrator, you’ll see this:

If you turn on Pixel Preview by pressing Cmd+Alt+Y (Ctrl+Alt+Y on Windows), you’ll see that the horizontal and vertical lines are sharp:

Let’s check the size of the image. Select all (Cmd+A or Ctrl+A) and click Transform in the toolbar:

As you can see, it’s 26×26 px. Now let’s resize it. Let’s set it to 24×24 and press Enter.

Sometimes that works just fine, but not for this icon. The pixel preview looks pretty bad now, with blurred lines on the page:

Select some of the points and move them using the up and down arrow keys. Hint: you can select not only individual points, but lines between those points as well.

After moving three lines, we’ll get the right page, like this:

The folder with letter W is different. Let’s scale it a little to make it more narrow. For that, choose the Selection Tool just next to our Direct Selection Tool (shortcut: v), and scale it horizontally:

Now all we have to do is to move the upper and lower sides of the folder to make it shorter.

At this point we should be proud of the result: we’ve shaved 1 px off each side of the icon:

The shaved off pixel is highlighted in green

Congratulations, you did it! Please let us know if this guide worked for you. Leave comments!