Signal-android: Pixel Launcher round icon (and make Android icon consistent with desktop and iOS)

[trgeiger]

I have:

• [x] searched open and closed issues for duplicates
• [x] read https://github.com/WhisperSystems/Signal-Android/wiki/Submitting-useful-bug-reports

---

Bug description

The new Pixel Launcher on Google's Pixel and Pixel XL now allows app-makers to use a round, stylistically coherent icon, as you can see in the screenshots below.

You might also notice in that screenshot that the current Signal icon in the Pixel Launcher looks a little out of place--taller, and not round in the same way as the rest of the icons. It would be great if Signal could match the UI/UX of the Pixels as many other top apps have done since the release of these new phones.

You can also see how some apps have adapted to the round icon support even with square or otherwise non-round icons below, such as the Play Store and Inbox.

Screenshots

Device info

Device: Pixel XL (marlin)
Android version: 7.1.1
Signal version: 3.24.1

[cbondurant]

I feel that the UX trends of other applications, as well as the UX choices of devices such as the Pixel are not sufficient reason alone to modify the style and look of the icon of Signal. There are plenty of very popular apps that do not follow the mainstream form of icon design, such as Discord, Twitch, Snapchat, and the settings app for the Nova Launcher. All of these are very popular apps.

[trgeiger]

Pixel Launcher doesn't require the app to change their primary icon--it allows an opt-in sort of mechanism for a round icon option. For example, the default Twitter icon is a square, but on Pixel Launcher it uses the round icon option. I guess that's what I'm suggesting, an opt-in to the Pixel round icon, especially since the Signal icon already almost fits.

[trgeiger]

As just another example, Materialistic - Hacker News also uses a square icon by default, but uses a round icon version on the Pixel Laucher. Some apps also, albeit less elegantly, integrate into the launcher by putting their default icon onto a white background, as you can see with some of the Google apps and Simple Habit in the screens above.

[moxie0]

We need to change the Signal Android icon to match the Signal iOS and Signal Desktop icon anyway. If anyone wants to take a shot at making that both material and round, please go for it.

[carstn]

@moxie0 The icon source assets are no longer online at Pixelapse (see #5845), and I haven't found them in the Signal-iOS or Signal-Desktop repos either. Do you know where the source assets used to generate the iOS/Desktop icons can be found?

[mawed]

I don't know if a round cut of the not round speech ballon will look so good, as the blue edge around will not be similar wide all around.

[mawed]

I think I would prefer something in the old Signal-logo-style more. (and yes it's not done very good, just for impressions)

[moxie0]

hmm yeah doing a cutout unfortunately doesn't work very well with this logo. we might have to settle for a tile that we try to make "material." @liliakai had a few mockups that were looking somewhat promising in that direction

[trgeiger]

I think that would be cool - there's precedent from Google themselves for round icons with a bit of an extension, so to speak. The Allo and Duo icons, for example:

[moxie0]

@trgeiger I love those and would love it if we could make the new signal icon in that style, but it's kind of an overwhelming number of circles (the speech circle, the "whisper" circle, and then the outer circle). Ends up looking too visually confusing I think, but maybe someone can make it work.

[trgeiger]

Hmm, yeah. I agree. I wonder if something like @mawed 's suggestion above where the whisper lines are the outer circle would work. A friend might be able to do a mock up, will keep posted.

[mawed]

@moxie0 something like this? I had to rotate the speech circle a little bit

[jeremymasters]

imo, that's too much blank white space. I'd submit that the quote bubble would have to be smaller by 1/3 or so. Also, there is a shadow from what would be light from about 10:30 clock position. Also, on the google ones there isn't a border as part of the key to understanding what the app is/does, but just part of the material shading.

[mawed]

@moxie should it be the exact same icon? Or just the same "style"?
If so the whisper lines could form as the outer form of the icon with the big white speech circle in it. But this would cause another icon in the same style.

[trgeiger]

Another possible source of inspiration, the round Hipchat logo:

[jeremymasters]

A couple more things out there that caught my eye. I realize these are ones that might need to be paid for, but directions to go might be sussed out by looking. Perhaps a lock inside or something.
https://www.colourbox.com/vector/vector-illustration-of-paper-round-speech-bubbles-eps10-vector-7148654

[moxie0]

@mawed I think it has to be basically the same, maybe just a materialized version of the same.

[liliakai]

I went with a square tile to avoid excessive bubble nesting.

[bungabunga]

@liliakai wow, it looks very nice. maybe only the circles should be a bit bigger compared with other icons on the homescreen.

[mawed]

@liliakai which program do you use to create this?
I think I would really like the version using the whisper lines as edges an I would try to make one in a good quality

[trgeiger]

Here's @liliakai 's made round:

[ghost]

here another mockup

another variation (with blue Signal):

[liliakai]

Looks like the D in https://www.discourse.org/. Pretty sure Allo and Duo chose their shapes to be reminiscent of the letters a and d. That doesn't really make sense with Signal.

[trgeiger]

I agree--too different than the icon on iOS and desktop also.

[jeremymasters]

I think @liliakai has the most material-istic design so far.

[ghost]

@liliakai
with some imagination we can "see" the s(ignal) ???

BTW: I like @mawed's https://cloud.githubusercontent.com/assets/11197868/21048831/a680fa6c-be11-11e6-9125-7b0495b1dac8.png

EDIT:
and the last one

[sweeper3000]

I really like the square icon by @liliakai and the round one by @trgeiger can be used for the pixel launcher. They have a really polished, hi-res look and I like how the round one has padding around the whisper lines.

[AlfonsoMuskedunder]

Are the shadows introduced sofar really in the spirit of material design? At least to me, they don't add a feeling of three dimensionality so much.

[cavega]

Please keep in mind that Google themselves have not updated all of their icons to have a round version. Just look at Play Music, Play Movies, Photos, etc...they just placed the original icon inside a circle. I'm sure as time passed they will fix the inconsistencies across their icons. I'm not designer but the solutions posted here just look to closed (copied from) Hipchat and Duo/Allo.

I don't think that the round icon has to fully resemble the shape of the original one. Take for instance the following examples from the Elun and Cryten icon packs.

IMO, the lock shape is what gives the Signal icon its identity.

[trgeiger]

@cavega That round keyhole icon is sort of what I pictured when I originally made this issue, and I still like it. I think the point @moxie0 brought up is that they want to unify the icon across desktop, iOS, and Android which would necessitate moving away from the keyhole.

[Stanzilla]

Here's a really good video about the guidelines for Material icons that also includes a template https://www.youtube.com/watch?v=GiFV-xfW9pk

You're mostly just missing the shadows though. Note that the roundIcon on Pixel devices is an additional property in the manifest that does not replace the regular icon. This way you could have the roundIcon only for the Pixels

[iadmir]

Why not go the other way, something like this might facilitate the unification?

And it could be applied to the desktop icon.

[iadmir]

Material design

[moxie0]

Looks nice! But it kind of breaks the metaphor, you know? Original design was inspired by the "whispering" speech bubble in comics

[iadmir]

@moxie I didn't know it, seems @liliakai has best solution but I think it should be less space between the bubble and whisper lines like on original icon.

[ghost]

IMO:
a) speech bubble must be more symmetric (within square icon):

(see also https://pbs.twimg.com/media/C15V7MrWQAEC17E.jpg and compare with WhatsApp icon)

b) more "centered" bubble:

[iadmir]

a) I agree, it looks better
b) Bubble is precisely aligned using the software without deviations. It may seem optically because of the shadows.

[moxie0]

This is great work everyone! The other thing we'd need to make this transition is a version for the notification bar, as well as a version for the action bar.

[AlfonsoMuskedunder]

Am I alone in thinking that the use of shadows is a bit inconsistent so far...?

E.g., the large bubble actually throws _two_ shadows - one small one, and the large one. (And why is the upper half of the bubble darker than the lower in some versions?)

In turn, the whisper dashs (pardon my english) around the bubble don't throw any kind of shadows. Why not use the smallish shadows for both the bubble and the dashs?

Please don't get me wrong, the logo looks pretty cool already.

[liliakai]

E.g., the large bubble actually throws two shadows - one small one, and the large one. (And why is the upper half of the bubble darker than the lower in some versions?)

This is consistent with duo/allo icons.

In turn, the whisper dashs (pardon my english) around the bubble don't throw any kind of shadows.

They do. In this version, at least.

[ghost]

here a mockup for the notification bar:

where:

1. the current one
2. new one original bubble resized: IMO the whisper line is not thick enough
3. new one modified (thicker whisper line + smaller inner bubble)

P.S. all my icons are not "materialized" (=mockups)

[AlfonsoMuskedunder]

@liliakai

E.g., the large bubble actually throws two shadows - one small one, and the large one. (And why is the upper half of the bubble darker than the lower in some versions?)

This is consistent with duo/allo icons.

OK, point taken. And yet - the Allo icon looks clean, while in my view the Signal logo mockup looks a little bit untidy (I hope you understand what I mean). In my view, there's "happening" a bit much. It could have something to do with the fact that the dashs and the bubble get a different shadow treatment.
(Has anyone tried leaving the one large shadow to the lower right out?)

But of course, just my two cents, I won't insist any further :)

[iadmir]

@p4nci was right about symmetry, I think it is necessary to modify existing icon (bubble and whispers line). I made some changes I think this looks up better.

iOS

Android

macOS / Desktop

Vector / EPS: https://www.dropbox.com/s/jbx7097hu350zpj/Signal-Icon-Vector.eps?dl=0

@AlfonsoMuskedunder

In turn, the whisper dashs (pardon my english) around the bubble don't throw any kind of shadows.

you're right, I added a shadow

[ghost]

@iadmir 👍 but I didn't meant the perfect symmetry.
I prefer more the original "elliptic" bubble, but it's up to OWS.

[iadmir]

I understand, but it is necessary to make this change with rotation of the original bubble!
IMO it's look much better.

Mockup for notifications:

[ghost]

@iadmir yep, 👍 for rotated but more elliptic!

Mockup for notifications:

the whisper line is almost unvisible (tested with real device: Nexus 5X).
IMO: we need modified icon for notification and action bar, see also my mockup.

[2-4601]

Is it required by Material design or other design guidelines that the notification icon must be the same as the app icon? If not, would it make sense to just use a whisper-lined bubble in notifications? I.e. remove the solid, white-filled bubble inside. This would make the whisper lines stand out better.

[iadmir]

@p4nci it's difficult to properly center the bubble when is elliptic!
IMO: "perfect symmetry" is best solution.

Comparation with WhatsApp icon.

Yes, whisper dashs must be bold in some way, some of my suggestions:

[liliakai]

Perfect symmetry pleases the eye, though in this case I think it sacrifices something friendly and organic from the original design, and moves us a little bit further from that comic book metaphor.

Also, if our goal here is cross platform icon consistency with least time and effort, it may be advisable to avoid imposing changes on the ios & desktop icons.

Here's another possible style for notification bar:

And action bar:

[iadmir]

This is just my design proposal, I wouldn't agree that moving away from the comic book metaphor because dialogue shapes may be different, elliptic dialogue bubble isn't the rule.

[bungabunga]

@iadmir comic cloud dialogues are rearly perfect circles, they're also mostly hand made (or at least looking so), so making signal cloud a perfect circle also makes it look a bit artificial.

[ghost]

here @liliakai's elliptic bubble in comparison with new elliptic bubble with "moved" bubble pointer:

The whisper lines must be redone!

[iadmir]

Ok, here is redesigned icon with elliptic bubble.

Vector / EPS: https://www.dropbox.com/s/20j7ar2d554vodu/source-vector-signal.eps?dl=0

iOS

Android - Material design

[Stanzilla]

That fold in the Android icon looks a bit off

[bungabunga]

Nice. The grey color in the comic cloud gives icon a nice 3D feeling. But it's a question if this 3D feeling isn't making the logo less comic-book-ish. Maybe a white only variant should also be here to compare and decide.

[iadmir]

@bungabunga I just updated my previous comment

[moxie0]

Thanks everyone, some real talent in this thread. Let's stick with the current "rotation" for now and focus on getting Android into parity with iOS and the desktop. Then we can think about whether or not we want to rotate all three later.

I think what we need here is a PR with the launcher icon, actionbar icon (top left in conversation list activity), and notification bar icon for all the screen densities. Thanks!

[FeuRenard]

I think what we need here is a PR with the launcher icon, actionbar icon (top left in conversation list activity), and notification bar icon for all the screen densities.

You missed the lock screen icon. lockscreen_watermark_light.png & lockscreen_watermark_dark.png

[sweeper3000]

There's now a PR: #6100

[mueller-ma]

The square icon is used to indicate Signal when using the direct share feature. In my opinion a round icon would look better here

[mspacek]

Seems I'm very late to the party, because I only update sporadically (I typically run my phone without a google account). IMO, changing the icon is a bad decision for several reasons:

1. Branding. The keyhole represented the most important feature of Signal: security. Playing devil's advocate, does no more keyhole mean no more encryption?

2. Familiarity. For very technically naive users, and visually impaired users (my Mom rates as both), a drastic change in icon is confusing. It's easy to come to the conclusion that "Signal has disappeared, now all I have is this weird icon in its place, has someone hacked my phone?"

3. It looks awful. I appreciate that a lot of work went into it, but the icon is uglier, more complex, yet conveys no meaning whatsoever. It's now just another generic chatty app icon. Why all the white space? What's with the dashed lines? Cut here with scissors? "Whisper" is the last thing the dashed lines say to me, and even if they did, most users would not associate "whisper" with Signal.

My impressions are based on what I've seen in Android 5 (CM 13), and I feel as strongly now about this as I did a week or two ago when I first saw it. If this is what the icon looked like the whole time on iOS, and there was a dire need to sync the icons between the two platforms, was there a discussion somewhere about which one should be changed? Was the decision based on which platform has more users?

[FeuRenard]

This issue should be fixed by #6100, right?

[Stanzilla]

Well I guess work never stops, you could make a new one for moving to Android O's adaptive icons https://developer.android.com/preview/features/adaptive-icons.html

[FeuRenard]

That's already tracked in #6511.

[jeremymasters]

Seems like this thread should get locked because it's just an ongoing discussion which would probably be better for the discussion forum.

[trgeiger]

I'm gonna close the issue since the original issue has been addressed in #6189