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.
-
John
commented
The OP seems to be a specialist, which I am not. From a simple non-knowledgeable user's point of view:
- I think the camera shape of Meet is clear. It has been since day one for me.
- I do mix up Drive and Calendar icons a lot; I think they are really too similar.
- It's true that Pass icon could be for anything, but since it's the only one like this, I recognise it easily.
- I think Authenticator's icon is great; it's like the designers dared do something new in the Proton paradigm, and it works well for me.
- Docs and Sheets are pretty, but they really don't seem to belong here; it says something like "we copy pasted an open source project in our secured realm, and we also took their icon".
- I've always seen the "functional message" of the VPN icon, but it's probably because I knew the first one from which it's derived; Newcomers will indeed probably miss it.
- I don't know whether it aligns with what OP says, but I would find value in keeping more or less the same icon set (modulo the above points), but increasing the visibility of each app's distinct colour in its icon (saying "this is app X"), and decreasing the original Proton violet to some discreet outlining or subtle reminder (adding "by the way, this is Proton --therefore secure)". I think around 70% distinct colour and 30% violet would do the job.
- Since day one, I've asked myself about Lumo's icon: "why?". Having a cat is fine for me, but why flat with such a saturated unique colour? At first, Lumo was really bad and that icon could convey some "work-in-progress" message. But now, Lumo is great and a "proud" icon should boast it. Maybe a translucent "holographic" cat would do, I don't know...