Contribution
I took the initiative to create an icon set for eero Insight and led the effort of establishing iconography guidelines.
Drawbacks
That was the state of icon assets when I joined eero team. The main problem they had was the lack of the ownership and Iconography guidelines.
![old icons](../images/iconography/iconography1.png)
![old icons misalignments](../images/iconography/iconography2.png)
As a result, icons used in production had many imperfections, like these misalignments.
Several icons across the set didn’t follow consistent patterns.
![old icons corners](../images/iconography/iconography3.png)
![old icons in left nav](../images/iconography/iconography4.png)
On top of that, icons were often misused in the product and duplicated, causing customer confusion.
Audit
I started with conducting icon audit across multiple design assets and the eero product itself. I started with conducting icon audit across multiple design assets and the eero product itself. Then, I organized all the icons in a single sheet, making it easier to work with.
![icons audit](../images/iconography/iconography6.png)
System
After that, I worked with the team on design principles we should follow to create our new icon set.
![principles](../images/iconography/iconography7.png)
I also established design grids to use for Navigational (24px) and Table (16px) icons.
![icons safe areas](../images/iconography/iconography8.png)
To make the new icon set consistent, I established several guidelines, like 2px Safe areas.
![icons safe areas](../images/iconography/iconography9.png)
I also created keylines to follow while creating icons with Circle, Square, Horizontal and Vertical shapes.
![icons keylines](../images/iconography/iconography10.png)
![icon styles](../images/iconography/iconography11.png)
Besides that, I defined basic style requirements, like Corner radius, Angle, and Stroke width.
Icon set
Then, I started creating icons according to established principles and guidelines.
![functional icons tracker list](../images/iconography/iconography12.png)
![new icons in left nav context](../images/iconography/iconography13.png)
Along the way, I was testing how new icons look and feel in the product.
Next steps
After creating the initial set, I plan to work on another category of icons used across eero products–Illustrative, which represent network devices.
![icons examples in a table view](../images/iconography/iconography16.png)
Guidelines
I’m also working on the written form of the Iconography guidelines that design team can follow to create new icons.
![iconography guidelines](../images/iconography/iconography17.png)
Open source
The icons project inspired me to start working on an open source icon set which I plan to launch in the Figma community.
![icons in an alphabetical order](../images/iconography/iconography18.png)
![icons variations](../images/iconography/iconography19.png)
It will consist of Regular, Filled, Rounded, and Sharp variations of icons.
Thanks for reading!