Added GNOME/KDE-style Icon

[elsiehupp]

The existing icon on Linux doesn't fit with the GNOME icon-design guidelines. (KDE's guidelines are extremely similar, with the main difference being a preference for a specific style of shadow.) In this PR, I've added a version of the icon that should look more at home on GNOME and KDE.

The background color and glyph are based on the official logomark, and the 3D effect I pulled from my previous work on the Joplin Snap icon, which in turn incorporates design cues from the official GNOME icons.

There are two files: an SVG file that can be used directly for the application icon, and a PSD file that includes an editable version of the emboss shadow (since SVG doesn't include native support for this).

The new SVG file doesn't actually do anything yet because I don't know how the packaging process selects the icon, and the icon I added is only really for Linux. (It's not immediately apparent to me where the macOS icon lives, but it's clearly not the same as the one in this directory.)

Thoughts? Feedback?

EDIT: here's a PNG export that can be viewed inline:

EDIT: here's screenshot showing the icon in context:

I'm not entirely sure why there is a faint line around the glyph (in addition to the emboss).

[germain-gg]

Thank you @elsiehupp for your first contribution to Element 👏
I'll tag the @vector-im/design team for a style review

I don't think that Photoshop is used internally. My bet would be that this logo should be part of the team's Figma collection. Feel free to check the brand guidelines on Figma

[elsiehupp]

Hi @gsouquet I can take a look at uploading the design to Figma.

I just checked, and I don’t see the source for the macOS icon anywhere in the linked document.

It would appear that the existing official macOS icon for Element is in violation of the brand guidelines because (like the version I’ve uploaded here) it uses a 3D effect on the glyph, and additionally it uses a full-bleed green background rather than a green circle on a white background.

Here’s the macOS icon (which I’ve extracted from the application package itself, rather than from any source repository):

If it’s preferable, I could try and duplicate the same 3D effects and proportions from the macOS icon onto the GNOME/KDE icon. The main difference is just the shape and subtle gradient of green background. (The macOS icon already has a very subtle gradient, but it could stand to be a little less subtle.)

[t3chguy]

That icon comes from #117

[elsiehupp]

That icon comes from #117

Cool! Though still that’s exactly the same asset that’s included in the application package. That is, it’s a baked raster file, not the vector original.

[elsiehupp]

The brand guidelines specifically show the logo as being in a circular field, so I made a version of the icon that mimics the 3D glyph from the macOS icon while using the circle template from the GNOME/KDE guidelines:

EDIT: I’ve added a version of the icon with the rounded-square canvas and the version of the glyph copied from the macOS icon, as well as the macOS icon itself, and the existing Linux icon, for side-by-side comparison.

EDIT 2: I had resized the existing icon to make it match the correct margins, but that isn’t how it actually renders, so I’ve replaced with the no-margin version for a proper comparison. (macOS compensates for missing margins, while GNOME does not. I don’t know about KDE or any other desktop environments.)

The main aspect that isn’t compatible with SVG is the layer effects on the glyph. FWIW KDE’s version of the icon guidelines uses a hard shadow with 2D glyphs, like so (which can be fully vector in SVG):

The pseudo-3D edge at the bottom of the circle is also specific to KDE. GNOME generally doesn’t encourage the use of abstract 3D canvas shapes, instead favoring icons that resemble functional objects.

Personally I’m somewhat more inclined towards the rounded square than the circle for Linux, because it more closely resembles the superellipse used on macOS.

[elsiehupp]

Any thoughts here? It would be nice to be able to bring the Linux icon in line with the macOS Big Sur one.

The icons I posted previously are below.

Existing Linux icon (flat, oversized, with iOS/macOS corner radii):

Existing macOS icon (rendered/3D, has correct margins, uses "squircle" outline):

Square GNOME/KDE-style icon (as close as possible to the macOS one, adapted to GNOME/KDE styling):

Circular GNOME/KDE-style icon (like the square one, but using a circle):

A circle actually more closely matches the official brand guidelines:

Again, I'd be happy to adapt the macOS icon using the exact original vector file (rather than trying to recreate it manually), if anyone has a copy of it...

[elsiehupp]

Oh, and here you can see what I mean with the existing Linux icon being oversized (i.e. not having margins):

The official macOS Big Sur icon template includes margins (as does the GNOME icon template), but macOS Big Sur is also clever about scaling icons that don't use the correct margins, while GNOME is not.

[hwittenborn]

This feels like something that should be covered by Adwaita to me, and not Element itself. Just like other icon themes, I feel like its their responsibility to make everything look cohesive.

To continue on that - this looks like it's trying to fit the Adwaita icon theme. While that is the default icon theme on GNOME, it doesn't mean that it is somehow globally used or anything. Plenty of other icon themes exist in which this kind if icon wouldn't really serve well (for example, the default Yaru icon theme on Ubuntu, where I don't think this would blend too much).

I agree with the margin issues though. I experience the same issue with some other apps when using my system's default theming, and it annoys me quite a bit.

[elsiehupp]

This feels like something that should be covered by Adwaita to me, and not Element itself. Just like other icon themes, I feel like its their responsibility to make everything look cohesive.

These icon designs are actually a compromise between the GNOME and KDE design guidelines. The design guidelines actually aren’t explicitly Adwaita or Breeze, and Adwaita (and possibly also Breeze) explicitly rules out override third-party application icons. By contrast, Yaru does override third-party application icons, as do most other “themed” distro icon sets.

IMHO probably the safest option would be a version of the circular icon (i.e. without the pseudo-3D edge at the bottom), because (a) it avoids having to make a decision about corner radii, and (b) it most closely matches the official Element brand guidelines.

Here’s the existing Element macOS icon masked as a circle and matched to the GNOME/KDE margins, alongside the exact icon from the brand guidelines scaled to the GNOME/KDE margins:

And here’s the icon in my dock:

The foreground figure in the macOS icon is actually proportionally larger than it should be according to the brand guidelines, so there’s a second, slightly larger circle immediately behind the masked copy of the macOS icon in the above image. I’m having trouble exporting an editable PSD, so you’ll just have to take my word for. As always, it would be useful if there was a source PSD of the macOS icon’s layer effects so they could be losslessly scaled.

If you want an Element icon that matches Yaru (Suru) or another heavily themed icon set, the thing to do would be to contribute an icon to that set because, again, those sets explicitly override third-party application icons, while Adwaita and Breeze do not. I could probably do so myself in a few minutes using the circular or square template. Though Element could also include “official” alternate icons in this repository as a way of encouraging downstream adoption.

[elsiehupp]

To be honest, the absolutely most basic thing Element could do to fix the existing Linux icon would be just to use the existing macOS icon on Linus, as well, since it has the embossed figure and the correct margins. In general “Big Sur”-style icons look more or less okay in GNOME.

[hwittenborn]

I do agree on the current style not being my favorite (not a big fan of the completely flat style).

I just think Element should have it's own style (with a different style of icon), and not necessarily something that fits the GNOME/KDE icon guidelines.

I guess if it has to be changed, you've already put this all in, so I wouldn't really see any reason not to use it.

[elsiehupp]

I just think Element should have it's own style (with a different style of icon), and not necessarily something that fits the GNOME/KDE icon guidelines.

In general I would say the GNOME guidelines are fairly stylistically neutral, other than silhouettes and margins. Mainly they explain how to design an icon that scales down well, which isn’t really an issue in this case due to the simplicity of the design.

The KDE guidelines are a little more stylistically specific, in that they explicitly suggest subtle gradients (which the Element icon for macOS already has), pseudo-3D, and sharp angled shadows. The pseudo-3D seemed to be the thing that was bothering you the most, and I didn’t do the sharp angled shadowing in the first place because it was too specifically KDE.

In general, the icon guidelines for GNOME and KDE are pretty lax, in the same vein as the icon guidelines for macOS and iOS. The laxity is reflected in the fact that the Element icon macOS for macOS doesn’t look terribly out of place on either GNOME or KDE, though ironically the existing Linux icon kind of does.

I guess if it has to be changed, you've already put this all in, so I wouldn't really see any reason not to use it.

While the version I have is definitely usable, from an official adoption standpoint this is kind of pending the designer of the macOS icon releasing the lossless source file, as well as the maintainers showing any sort of interest in this pull request, lol.

[elsiehupp]

In general it would be useful if the app icons were part of the Figma, and there were explicit guidelines about the sorts of differences the macOS icon has when compared to the base logo. I’m pretty sure the existing macOS icon doesn’t actually follow the brand guidelines in the Figma, lol.

[domi41]

Thank you @elsiehupp for this great, painstakingly precise work ; I hope this MR won't get ghosted.