Egencia Icon Set
Since 2015, a handful of designers had approached our icon library with the goal of an overhaul, but the project was never fully completed. So, over time, the icon library grew and morphed into a disjointed and sometimes redundant set of icons with little unification or systems-thinking behind it.
The aim of renewing this project was to bring the entire icon set onto the same level, creating a new and consistent system to use across our product ecosystem as a recognizable family.
Much like typeface design, icon design often gets overlooked. It’s easy to forget that humans design icons and that we can control their look and feel, making them into a unique brand asset. An icon family can have a similar impact as a font and can make a bold statement toward the brand personality.
The first step for a project like this is gathering inspiration. Some companies I took a look at were in the travel space, some are considered design leaders, some were both. Below are my quick notes about some of the inspiration I found.
• Round and very friendly
• Thin line icons
• Well designed and respresentative pictograms
• Primarily filled icons
• LOB icons (hotel, car) use same angles - differentiates them in the market
• Still fairly round and friendly
• Amenity icons in hotel tiles are not very cohesive when looking at angles, border radius, and attention to detail
• Don't really go with the LOB icons
Google Flights Icons
• In general, cohesive, detail-oriented set
• Less bold in personality than airbnb and kayak, but still consistent
• Still feels like google
• Amazing attention to detail in the Leg Room icons, with 3 total for different seat pitches
• Really interesting attention to detail
• Multiple colors (SVG implementation)
• Strongly cohesive and stylistic set
• Round, friendly, almost childish, lots of personality
• Boldly represents Facebook's brand
• Navigation icons are lined, but have some sort of filled selection state
• Primary icons under the More menu are brightly colored, with multiple colors, whereas secondary are grayscale, yet still multiple shades
The Design Approach
We didn't retain many of the old details in the new set. In essence, we threw out everything and started over. This presented us with a great opportunity as well as a great challenge. To tackle a set of over 220 icons, we came together to discuss what kind of character we wanted them to have. There are various ways to approach a challenge like this, and simply saying “Professional” or “Friendly” wasn’t quite enough.
Icon design is a great example of thinking systematically. For a set of 200 icons to feel like a cohesive family, they need to have consistent characteristics and similarities carried throughout each one. With the new icon set, we have 3-4 consistent design treatments that became visual rules to shape their actual design. As we got further into designing the set, it was natural for exceptions to these rules to pop up, and in those cases, we considered each exception within the context of the whole family.
We carefully considered attributes such as line weight, border radius and negative space in each glyph, as well as a few unique design treatments that carried across a handful of icons to make them ours.
Below are some examples of unique treatments of handles and "feet."
After months of design review, hundreds of iterations, and countless examples of icon groups displayed in context, we landed on a finalized set that we were excited to use. There were many steps following our excitement, including mapping, implementation, and bringing all of our platforms onto the same page.
It is in our DNA to strive to give users the very best experience, and with our new set of icons, Egencia’s design library just got a step closer.
Below, please see a few comparisons as well as the icons in-context.