Redesigning the Segment icon library
Late last year, the design team at Segment decided it was high time to spruce up our library of icons. Having only used off-the-shelf icon sets until then, things had started looking a little mismatched. It was also a chance to breathe some more personality into our much loved brand. Here’s how we did it…
Observing
I started off with a quick audit of what we already had. I browsed the pages of our website, screenshotting all icons in their original context.
We then grouped icons by purpose. Some depict physical things, like on the careers page, while others represent abstract ideas (like “track API call”). Hierarchy was another factor to consider, as in some places, we needed icons at 2 different scales.
Jotting down ideas
Approach each icon as its own design problem. It can be hard to show some concepts “literally.” With every concept, write a list of attributes and characteristics — this list can spark lots of good ideas. Going straight to the Noun Project for ideas is tempting, but try to avoid it — you can almost always generate better ideas yourself with a little extra effort.
If you can’t think of the perfect way to depict something, that’s all right — icons seldom communicate ideas by themselves. Sometimes the best they can do is complement the idea being described.
Sketching
I find it handy to keep icon sketches all in the same notebook. Paper and pencil are really the best tools at this stage. Once you’ve sketched a few ideas, take one or two of them into Illustrator. Decide on a standard size, or set of sizes. At Segment, we had 3 levels of icon hierarchy, which is unusual (most companies have just one).
Create a lightly outlined background grid as a guide for drawing each icon. Having a set of shapes in standard sizes, like circles and squares, is useful, as icons often re-use these shapes. If you’re making a “liney-style” icon set, keep everything the same weight. When you copy and paste an icon from Illustrator into Sketch, avoid resizing icons in Sketch. It’s much better to draw them at the size they’ll actually be used at. Compare and contrast each new icon to previous icons in the set, to make sure that they look visually similar. It’s helpful if icons in a set all have a similar “amount of detail” in each.
A (wee) final tip
One last tip I have to offer is a specific technical one. If you’re planning to export your icons from Sketch as SVG, make sure you open each icon in the layers panel, and remove any mask layers that might have crept in when they transferred over from Illustrator. These can cause icon SVGs to render with missing bits and bobs when used on the web.
Best of luck!
