K2 Icon Development

Organizing, converting, and managing of K2's iconography archive into an automated powerhouse.

November 28, 2020
scottnero

Icons are all around us, we take them for granted but they are instrumental in our interaction with online products and services. Icons can also add style and visual interest to your user interface designs. Icon design is one of the purest forms of visual design, users need to recognize the meaning of a 16-pixel squared icon instantly. There is no room for error. Many SaaS products are so complex that they require thousands or more icons to guide users through the experiences, yet each icon must be instantly recognizable in context. K2 is one of those products; one of my first tasks is to take ownership of the 1048 icon library, convert all existing artwork into vector format, and organize the icon sets into master AI files for automated output and Adobe Library creation.

1. Locate and centralize all existing artwork

I am quick to learn that after 20 years of development many icons are scattered or missing, a third of the icons exist only in Microsoft Expression format which means they need to be re-drawn from scratch using Adobe Illustrator. All remaining Illustrator artwork will need to be examined for fidelity and re-drawn if necessary.

2. Ensure that all iconography uses 28 standard colors only

The K2 product icons are intended to follow a 28-color palette only. If any icons use colors other than the hexadecimal values below the batch conversion scripts will throw errors and the colors will have to be corrected and re-output.

3. Illustrator file structure is critical for SVG output

Each icon within each Illustrator design file must be composed of well-organized compound paths, and each layer must be logically named to produce structured SVG code.

4. Creating and publishing an Adobe Icon Library for global sharing.

Each icon is added to a well-organized Adobe Library and is shared with fellow designers around the globe. This provides an all-important master version of each icon and fidelity version which can be quickly edited and made instantly available to other designers.

Organizing your icon library into SVG code allows the potential for icon animation, dynamic re-colouring for dark/light mode interfaces, and much more, all with no preparation, just having an organized and efficient library at hand. Thank You for taking the time to hear about some of my time designing at K2 in Bellevue, Washington. I have many more stories that I could share. Reach out if you’d like to connect, I’d love to hear from you.