PicMonkey Product Icons
In preparation for the launch of our redesigned application, I redrew more than 60 of our existing icons in a consistent style and footprint, as well as creating new ones for new flows and actions.
I specifically worked with UX designers to make sure that: icons followed a consistent visual footprint (with few exceptions), communicated well & looked visually consistent in-context and icon creation & export process was captured in documentation and fit into the UX design system.
Role icon design
Deliverables 60+ new product icons with a consistent footprint and style
Design goals
The original icons hadn’t been updated in years and the product itself was due for a revamp overall. To top if off, many of the icons were created one-off .pngs in Photoshop (by different designers), which meant they weren’t vectorized, or editable. In short, it was due for a long overdue visual overhaul.
Create a more consistent footprint and visual style
Maintain unique brand language in iconography
Redraw all icons as vector objects in order to edit them in the future
Design process & solution
During the research phase, we looked at many different styles of icons for inspiration. Through auditing existing icons and exploring new styles of icons in context, it became clear that a lot of the existing icons conceptually resonated with customers, and visually complemented our logo and brand typeface, Lato (sans-serif with humanist qualities). What was needed were some rules and guidelines to define and refine the set as a whole.
The old icons mixed sharp and rounded corners, line weights as well as different footprints. Stylistically sharp corners felt off brand for us and so it made sense to visually remove it from the new visual language. The new icons were designed in sets and in-context of one another, with legibility and scalability in mind. We updated icons that were hard to understand, to have better visual affordance and introduced a consistent corner radius that worked in conjunction with the UX design system.
Old vs. new icons side by side
Original icons had inconsistent line weight, footprint, mixed rounded and sharp corners, and no defined rules on how to create them.
New icons have a consistent line weight of 2px with rounded corners, general footprint of 20px by 20px, with very few exceptions.
New icons, in situation
