Iconography
As part of Xfinity’s rebrand, our team was asked to help craft a new set of icons that were digital first and better reflect our brand.
The goal of this project was to create a more holistic and ownable iconography library that met the needs of various teams across digital and print, while picking up visual cues from Xfinity's new brand identity. Since icons would be used within the product UI and in marketing communications we had to insure that icons would be adaptable and legible at a spectrum of sizes. In addition to creating consistency across teams, we partnered with our engineering team to build a front end tool that centralized delivery of iconography assets for design and dev teams. I lead the team creatively, crafting the style and building out the first library of assets. I then worked closely with an agency to build out the additional 200+ icons needed by our design teams. Currently, I oversee creation of any new icon needs and management of the library.
Icons take cues from Xfinity's logo and brand typeface, with consideration of UI components that would house and live along side with iconography. They’re designed to illustrate our brand personality, while aiming to balance our human side with functionality.
Once our core style components were defined, I began to identify and define our key shapes and grid, creating the framework to build the full library of icons. Our key shapes leverage quadrilateral forms with a corner radius consistent with other branded elements found in our UI. For more rounded shaped icons, our pill use a large corner radius that is just under creating a perfect circle, while sharp shaped icons use rounded rectangles. The extended style in our key shapes compliment the brand's typography rules.
At its core, our iconography had to work for our product teams and adapt to various product experience needs. To make the iconography functional for designers I needed to account for fill states, different UI patterns, and how icons would scale.
After all requirements were met, I moved from exploration stage to production, creating a set of icons specifically for UI use and set that could be used at larger scale in communications, making sure there was consistency in themes, forms, and metaphors for a cohesive branded iconography library.
System icons developed specifically for use in product UI
Set of icons developed specifically for use in branded marketing communications
Examples of icons in UI
Examples of iconography in marketing