Conversation

Elvin 🌈
@elvin_not_11
We simplified the main brand icon by removing the shadows, refining the proportions and brightening the colors, to align with Google's more modern brand expression.
Side-by-side comparison between the current Chrome icon and the refreshed one, with keylines highlighting the subtly tweaked proportion.
29
749
Elvin 🌈
@elvin_not_11
Fun fact: we also found that placing certain shades of green and red next to each other created an unpleasant color vibration, so we introduced a very subtle gradient to the main icon to mitigate that, making the icon more accessible.
Side-by-side comparison between a Chrome icon that purely uses flat colors and gradients. The flat version has some unpleasant color vibration issues that the gradated version doesn't.
40
1,792
Elvin 🌈
@elvin_not_11
Then, we created OS-specific customizations. We want the icons to feel recognizably Chrome, but also well crafted for each OS. For example, on Windows, the icons take on an obviously gradated look, appearing at home on Windows 10 & 11.
An obviously gradated Chrome icon sitting on the taskbar in Windows 11 next to apps from Microsoft.
9
562
Elvin 🌈
@elvin_not_11
On ChromeOS, they use brighter colors without gradients to match the looks of the rest of system icons.
A flat Chrome icon with brighter colors sitting on the shelf on ChromeOS.
4
420
Elvin 🌈
@elvin_not_11
The ribbons include many details when viewed at large sizes, but transform into simple badges at small sizes, maintaining their legibility. The letter "B" and "D" representing "Beta" and "Dev" are manually hinted, so they look crisp even at a very small size.
Side-by-side comparison of the Chrome Beta icon at size 512 and 32. The 512 size uses a skeuomorphic ribbon, whereas the 32 size uses a simple badge, with the letter "B" manually hinted to look clear at such a small scale.
6
405
Elvin 🌈
@elvin_not_11
On iOS, our Beta app will start using a blueprint-like design, as a nod to Apple’s developer-focused apps, and the Stable app icon will have new proportions on the tile.
Two iPhones on top of each other, showing the new Chrome on iOS icon and the blueprint-like design used in the Beta channel on the home screen.
9
526
Elvin 🌈
@elvin_not_11
You might ask, “why bother with sth. so subtle?” We tailor Chrome’s experience to each OS, with features like Native Window Occlusion on Windows, day-one M1 support on macOS, Widgets on iOS/Android, and Material You on Android. We want our brand to convey the same level of care.
Two Chrome on iOS widgets side by side: the small search widget, and the medium quick actions widget.
6
428
Elvin 🌈
@elvin_not_11
You might also wonder, "did you consider sth. more different?" We did! E.g., we explored introducing more negative space. However, in context, the white required a stroke that shrunk the icon overall, and made it more difficult to recognize, especially next to other Google apps.
One of the many alternative directions we've considered, with more negative space between each element on the Chrome icon. It looked great in isolation, but in context the white stroke reduced the recognizability of the icon.
13
404
Elvin 🌈
@elvin_not_11
In the next few months, you’ll also start to see the refreshed version in app, on the web, and beyond.
Examples of in-app use cases of the refreshed Chrome icon: an icon next to the Settings title, in the omnibox, and as part of the Chrome Actions chip
3
362
Elvin 🌈
@elvin_not_11
Thanks all for the feedback (*especially* the ones about colors!!), kind words, and reactions 🙏 We will be refining the direction based on them 😃 There’s also a lot more behind-the-scenes we can’t cover in a thread, and hopefully we will share more in the future in some form.
8
207