Unigram: Change app icon to match new Fluent-Design style Windows icons

Created on 23 Oct 2019  路  25Comments  路  Source: UnigramDev/Unigram

I think that the application should get a new icon, matching the new style of Windows icons.

enhancement

Most helpful comment

I love this one, I just prefer the color to be uniform without this line in the middle.
image

thanks for your feedback - here is a version without the overlap. I created the overlapping wings because most icons in the Fluent Design system consist of two or more different parts which are most of the time separated by shadows
Unigram_Icon

All 25 comments

I am not sure about which style you鈥檙e referring to.
By the way, I鈥檓 the only one working on this project and I鈥檓 not a designer...

I wasn't able to upload image for some reason, but I thinking about this style: https://imgur.com/a/8WZLBxI

If you specify requirements regarding format, size of UWP icons, I can create some suggestions :)

@FrayxRulez They're replacing monochrome assets for icons with colored icons like in Android/iOS ones

I see, but we need a designer for that!

@FrayxRulez - I'm an designer (and developer too, but JS focused). As I wrote, if you specify requirements of UWP icons, I can create some suggestions.

I have no clues about the requirements for UWP icons. But the logo should definitely keep the current shape.

Of course it should :)

I've made a few concepts for potential icons that may or may not be good for use. I've got 2 variations and one Office 365 clone.
unigram-ver1
unigram-ver2
unigram-o365
(yes I am aware there are some clipping issues with the pngs I'm sorry)

@mintykii IMO third one looks promising. First and second looks too "Skypey" for me. Anyway, my idea was make current icon colorful without doing anything else. But as I said, third one looks good, BUT (:D) I think app logo should be bigger.

I'm not a designer, but I think that dividing the current logo in two parts (wings) with two similar color is enough.
See Microsoft ToDo logo as reference here or the '>' in Windows Terminal logo here.

My proposal:

newicon_alone
newicon

My proposal:

newicon_alone
newicon

I like it, how would it look with dark taskbar?

@MarcAnt01
newicondark

@MarcAnt01
newicondark

Thanks, I like the icon. Anyway, most of Microsoft apps still have a monochrome color. I don't know if it worths to change it

@MarcAnt01

It worths, many new system/apps icons are on the way: https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4

Hi folks 馃憢
i would also share my idea for a fluent icon for unigram. i tried separating the logo into various parts ( @scriptfx) and added some fluent design elements and the original telegram gradient to it.

unigram_fluent

IMG_18sdf85

let me know what you think, i'm happy to share my design assets

Hi @nor0x! I actually like the icon, but I'm not a big fan of this part:
image

Did you try to design a plated version as well? (So with a blue ellipse as a background for the white plane)

Hi @FrayxRulez thanks for the reply! Here are some plated versions - but i will look into the overlapping part of the plane again

Unigram_Icon2
Unigram_Icon3
Unigram_Icon4

Hi folks 馃憢
i would also share my idea for a fluent icon for unigram. i tried separating the logo into various parts ( @scriptfx) and added some fluent design elements and the original telegram gradient to it.

unigram_fluent

IMG_18sdf85

let me know what you think, i'm happy to share my design assets

I like where this is going. I kinda prefer the icon without the circle (especially since the circle is used by the actual Telegram app and it would be better to differentiate them). The only thing that bugs me is that little white triangle, could you try making the lower blue "wing" fill that space, so that the icon is composed of just two overlapping blue wings that form the current logo?

I like where this is going. I kinda prefer the icon without the circle (especially since the circle is used by the actual Telegram app and it would be better to differentiate them). The only thing that bugs me is that little white triangle, could you try making the lower blue "wing" fill that space, so that the icon is composed of just two overlapping blue wings that form the current logo?

Hi all, thanks for the feedback. Here is a version without the white triangle thingy

Unigram_Icon

I like where this is going. I kinda prefer the icon without the circle (especially since the circle is used by the actual Telegram app and it would be better to differentiate them). The only thing that bugs me is that little white triangle, could you try making the lower blue "wing" fill that space, so that the icon is composed of just two overlapping blue wings that form the current logo?

Hi all, thanks for the feedback. Here is a version without the white triangle thingy

Unigram_Icon

I love this one, I just prefer the color to be uniform without this line in the middle.
image

I love this one, I just prefer the color to be uniform without this line in the middle.
image

thanks for your feedback - here is a version without the overlap. I created the overlapping wings because most icons in the Fluent Design system consist of two or more different parts which are most of the time separated by shadows
Unigram_Icon

Looking great :)

@nor0x can you send the SVG to me at https://t.me/MarcAnt01 ?

So that's it:
image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

HimbeersaftLP picture HimbeersaftLP  路  3Comments

JaggerJo picture JaggerJo  路  3Comments

MarcelBrusius picture MarcelBrusius  路  5Comments

inferno986return picture inferno986return  路  3Comments

TheGuardianWolf picture TheGuardianWolf  路  4Comments