UX Design Critique: Proton App Icon System
UX Design Critique: Proton App Icon System
Overall assessment
This icon set fails the core job of an app launcher: enabling fast, pre-attentive recognition. A user opening this switcher cannot identify apps without reading labels. That's a fundamental usability failure, not a stylistic preference.
Color hierarchy is broken
Eight of ten icons sit in the same purple-blue-pink gradient family. Color is the fastest channel in visual perception — processed pre-attentively in roughly 200ms, before shape recognition kicks in. By collapsing eight apps into one hue family, Proton has eliminated its strongest recognition signal.
The two exceptions (Docs blue, Sheets green) prove the cost of the choice: they're the only icons your eye locks onto immediately. Everything else requires conscious search.
This isn't a brand-cohesion win. It's brand-cohesion over usability — and the trade is bad, because users interact with the launcher hundreds of times per week and see the marketing lineup once.Shape language lacks distinctiveness
Strong icon systems use silhouette as the second recognition channel after color. Proton's silhouettes collide:
Calendar and Drive — both rounded squares with a folded corner. Same proportions, same gradient direction. At 24-32px they're functionally identical.
Pass and VPN — both minimal downward-pointing geometric primitives (rhombus, triangle). Different shapes technically, same visual weight and reading.
Mail and Meet — both have a folded/peaked top edge silhouette. In a quick scan they cluster.
When color fails and silhouette overlaps, there is no fallback. The user is forced into label-reading, which is the slowest recognition mode available.
- Glyphs are semantically empty This is the deepest problem. App icons should encode function in shape:
Envelope → mail
Folder → file storage
Key/lock → passwords
Shield/globe → VPN
Card stack → wallet
Date grid → calendar
Proton gets two right (Mail's envelope, Drive's folder). The rest are abstract:
Pass is a rotated square. It has no relationship to passwords, vaults, keys, or credentials. A new user cannot infer the function from the icon.
VPN is a downward triangle — closer to a play button than a shield, tunnel, or network symbol. No functional signal.
Calendar's meaning comes entirely from the "31" badge. Strip the badge and the silhouette is just a folded square — same as Drive.
Wallet is an abstract blob with a coin. The coin carries the meaning; the container shape doesn't.
Meet is a folded purple shape. No video, no camera, no people, no conversation cue.
Lumo is a cat. Cute, but unrelated to AI assistance — purely a mascot, no functional signal.
Proton has built a system where the gradient is the message and the shape is decoration. This is inverted. In functional iconography, shape carries meaning and color is the brand layer applied on top. The current system has a strong brand layer with no functional layer underneath, which is why every icon feels interchangeable.
4. Inconsistent visual treatment
The set isn't even internally consistent in approach:
Calendar is a 3D-perspective mockup with a date badge — a literal app screenshot rendered as an icon.
Docs and Sheets are flat, document-style glyphs with implied paper texture.
VPN, Pass are flat geometric primitives.
Mail, Drive, Meet, Wallet are gradient-on-flat-shape compositions.
Lumo is an illustrated character.
Five different visual treatments across ten icons. The set doesn't read as a designed family — it reads as artwork accumulated over time without a unifying system. Compare to Apple's macOS or Microsoft 365: every icon in those suites follows a single, declared visual language.
5. The "New" badges expose the deeper issue
Three icons carry "New" badges (Sheets, Lumo, Meet). The badges are doing recognition work the icons themselves should be doing. If users could identify apps by their icons, they wouldn't need badges to find the new ones — the unfamiliar shape would be the signal.
What a fix looks like
Assign each app a dominant hue. Keep the gradient style; vary the base color. Mail purple, Calendar blue, Drive magenta, VPN green, Pass orange, Wallet gold, Meet teal, Lumo violet. Same family, distinguishable at 16px.
Redraw the abstract glyphs to carry function. Pass → key or vault. VPN → shield or globe. Calendar → actual date grid, not a folded square. Meet → camera or speech bubble.
Pick one visual treatment and apply it everywhere. Either flat geometric, or document-style with implied depth, or illustrated. Not all three. Lumo's illustrated cat is particularly out of place.
Audit silhouette differentiation explicitly. Lay all icons out at 16px in monochrome. If any two are confusable in that test, redesign them.
Bottom line
The Proton icon set has strong individual aesthetic execution and weak system-level design thinking. The gradients are well-crafted; the system they sit inside doesn't function. This is fixable — Docs and Sheets show the design team has the capability — but it requires accepting that brand cohesion was over-prioritized at the expense of recognition, and rebalancing the system accordingly.
Worth doing before adding the eleventh app to the suite, because each new icon added to the current system makes the recognition problem incrementally worse.