Gridicons is our open source icon set for WordPress.com. No one works on it full-time, but it’s a passion project for a handful of designers at Automattic. Icon design is a nice break from regular work, and it’s something you can start and finish in less than a day.
Collaboration
A core tenet of Gridicons is to encourage collaboration between designers. Gridicons is completely version controlled on GitHub, and every icon submission receives critical feedback. This process deserves its own blog post, but in short, we’ll brainstorm ideas for metaphors and iterate until we reach a solution. One great example of this process is from the coupon icon. The iteration process can be followed in the coupon icon pull request on GitHub.
Drawing the icon
For this example, I’ll pick the most recent addition to Gridicons — the bug. This icon is used for reporting software bugs on WordPress.com. The previous icon was not a part of Gridicons, and it didn’t quite follow the Gridicon guidelines.
Fortunately, when you’re contributing to an existing icon set, the hard part of defining the style of the icon set is already done. The icons in Gridicons are solid and geometric, but soft edges make the them more approachable.
Search icon sites
Once we have a firm idea on what metaphor to use for the icon, I’ll search a few icon sites and get ideas for the icon drawing. If applicable, I’ll search Google for photos of the real object to refer to. This can be useful for tangible objects like bugs, homes, trucks, cameras, etc. During this step, I’ll loosely sketch ideas that I think will work. I try to generate as many ideas as I can in a small time period, and I don’t get very detailed. Pencil and paper work best for me because it’s most efficient.
Move to the computer
Next, I’ll move to the computer and refine the icon. Because the icons are geometric, it’s faster for me to build the icons in Illustrator than it is to draw perfect shapes with a pencil. Even if the pencil drawing is really good, something gets lost in translation when you transfer your work to the computer.
Just like the sketching step, I try to make as many icons in Illustrator as I can. These aren’t done loosely, so there are fewer ideas, but they are closer to the eventual solution.
I also think about other icons in Gridicons and how the new icon relates. Does it follow the guidelines? Does it share the same characteristics? I continuously reshape and remix ideas until I decide on a good direction.
Sweat the details
Once I like an icon direction, I start making tweaks and several variations. These details are hard to notice but overall make the icon look more polished. For the bug icon, I adjusted the scale of the head and torso, rounded the “elbows” of the legs, and connected the two halves of its body.
As a final step, I view the icon at 100% scale and check the pixel preview. It’s important the vector shapes are made cleanly, with no stray points. Then, I address any last feedback on GitHub, and the icon is ready to ship!
Like I mentioned, Gridicons is open source! If you want to contribute, head over to the GitHub repo.
Automattic Design 
