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.
After nine months of incorporating iconography into every sprint cycle, I finally completed my goal of converting K2's icon library to efficient vector images. The artwork is created in Adobe Illustrator files and organized by icon set and icon fidelity. My final task is to ensure that every designer at K2 can access the original artwork in the form of a robust Adobe Library available on the Adobe Cloud for designers to edit and contribute to for years to come.
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.