K2 Icon Development

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.

Step 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.

I confirmed with my Design Manager all file locations where iconography can be found, which icon sets are required to be converted first, and in what order the 24 icon sets will need to be completed.

Step 2 - Ensure 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.

I find that some icons are correct, many have 1 or 2 colors out of place, and some are incorrect altogether. I collect all my completed icons in 1 of 3 master Illustrator files organized by icon size and fidelity.

Step 3 - Publishing an Adobe Icon Library

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.

Each icon is output from Illustrator into the SVG file format. I then use a custom designed batch script that writes the JSON which will tell our products asset manager to understand the size, fidelity, and color of each icon within the product design. Everything is uploaded into the product using Visual Studio Code.

Organizing your icon library into SVG code allows the potential for icon animation, dynamic re-coloring for dark/light mode interfaces, and much more, all with no preparation, just having an organized and efficient library at hand.