Fixing Icons for Medium

Couple of months ago I got approached to fix up the old icons on Medium and make them pixel perfect, and also introduce each icon in two new sizes — 24px and 32px in SVG format.

This was actually quite the honour for me, I’ve been a big fan of Medium since day one. I was even one of the early beta testers when the platform first came out. I’ve always loved how simple and fresh it looked, I tend to be drawn to simple and minimal things.

So lets start, here is the “M” icon in the original SVG file that I got:

Original “M” SVG file.

As you can see, there are some unnecessary half pixels, and some points are not snapped to the grid.

So I got to work, lined everything up and made sure every point is snapped right to the grid, and here is the result:

Here is the “M” once I’ve lined everything up and snapped points to the pixel grid.

As you can see, the unnecessary half pixels are gone, and the points are snapped in the proper position, often times I had to work in 600% zoom.

This was the process for the rest of the icons, I went in there and made sure that each pixel was right where it needed to be, and also adjust it to the new sizes.

Here are some more examples:

Add further reading icon.
Add note icon.
Add media image icon.

I also noticed things like the icons being “outlined” when I went into the original SVGs, where in fact it should not be outlined, incase you want to change the icon in the future and for it to be editable at all times. Instead of outlining it on the actual icon you can outline it when exporting the SVG.

Here is the full preview of the finished and fixed icon set:

If anyone has any questions about this, or icon design in general, you can always tweet me, and check out my dribbble account for my latest work. If you want a visual update of what I’m up to, check out my instagram (and follow me).

I’d just like to say that it was amazing working with the people at Medium, it was very easy and they gave me lots of freedom (class A client in my books).

Huge thanks to Dustin Senos for letting me do this.