Modernizing the PowerToys icon

[niels9001]

Summary of the new feature/enhancement

The current PowerToys icon feels dated. With the legacy and connection with Windows 95 this makes sense, but I believe modernizing it might be better to make it feel more native to Windows 10. In 2020, we'll see lots of inbox application icons modernized (more on Microsoft Design's push to re-design hundreds of OS icons here).

Another issue with the current icon is the fact that it feels outdated and doesn't scale very well to smaller sizes (for e.g. the systemtray)

Proposed technical implementation details

The proposal is to redesign the current PowerToys icon, so it feels part of the Windows 10 family of experiences (e.g. Terminal, other inbox apps)

[niels9001]

Here are some concepts I have created: celebrating legacy, but modern ;).

[zeealeid]

Here's my attempt :)

[crutkas]

Ooooo these are sweet!

[ghost]

Well, I have my vision of this :)
There is a room to improve I guess too.

[mdtauk]

Quick thought, if the aim is to move totally away from the current imagery and colouring.

[zeealeid]

Great idea! Here's my take on this. idk if I made it better or worse but I've changed the colors a bit and added 3 knobs below

[crutkas]

@zeealeid and @niels9001 can you create a systray variant and we can do in app screen shots? See, I like both your concepts.

Another interesting thing we can do is make the center be how we notify we are in admin with like orange or red.

[niels9001]

@crutkas Sure, will mock that up tonight. What would in-app screenshots look like? The icon only shows up in the installer right? Or you mean in the titlebar (on the settings screen)? I think the default UWP/WinUI 3.0 windows do not include an icon in the titlebar (compared to legacy win32 apps).

[crutkas]

The icon shows up in a few app scenarios the settings in the taskbar. We are shifting to MSIX so it will be there as well.

Big one is systray. I think we just do some branches / forks and see how stuff looks rendered out. We can test light / dark theme too.

[crutkas]

Two things we should think about also here. The color should maybe represent state. Issue #250 raised a good point.

• Running - Blank?
• Need attention - Yellow
• Need elevated - Orange
• Running Elevated - Red

[niels9001]

Good point. I like the concept of having a black-and-white system tray icon. We could then use color indicators to represent the states you mentioned.

If we stick to an app icon with the color stripes that will also be shown in the systray that might be challenging to combine with any indicators. Moving to a monochrome icon could solve this, will feel more 'native' and will declutter the systray:

[jacker07]

An attempt on one of my ideas. Hope you guys like it :)

[crutkas]

Something that just popped in my head, we need to validate colors work for color blind sets for showing state. Red/Green could look the same.

[jacker07]

I can finish all the other sizes of only two icons from this. Tell me which ones you really like 😄
Or maybe I'll leave this as some kind of reference(?) for the design team at Microsoft to build upon.

Also I didn't really think of designing for the color blind people since I have absolutely no experience at this. Hope you guys can provide me some feedback!

[crutkas]

First, 🤘🔥🔥🤘.

Feedback: I like your first concept earlier and i like 2 & 4. My feedback here are I wonder how they'll scale for task bar / systray. I think they are a tad busy.

For colorblind, i think they are fine, it is when you use colors for alerting for instance and mix things like red and green you need to be aware.

[Arlodotexe]

1 and 5, hands down

[JanabiSoft]

One and Only

[dphfox]

A couple of quick concepts I just made. Top row using more traditional colours, and bottom row uses more bluish colours inspired by some of the other Windows icons.

I wanted to experiment with breaking the colours out of their box, so I came up with three variants. On the left, the colours are coming out through the 'screen', in the middle they simply sit on top of it, and the right keeps it closer to the original design.

What do you think?

[FJduFou]

A couple of quick concepts I just made. Top row using more traditional colours, and bottom row uses more bluish colours inspired by some of the other Windows icons.

I wanted to experiment with breaking the colours out of their box, so I came up with three variants. On the left, the colours are coming out through the 'screen', in the middle they simply sit on top of it, and the right keeps it closer to the original design.

What do you think?

It's amazing but i's too little for the taskbar icon ...

[niels9001]

Here's another shot at my previous ones. Adding a systemtray version as well (both in color as in monochrome)

[FJduFou]

2 is verry good but you have a problem:

(the "+" is the light part, the "-" is the dark part)

[jacker07]

@crutkas May I ask for exactly what the states are?

[dphfox]

Here's some more icons I came up with, in a variety of colours for potential different states as mentioned prior.

Here's how they look at 16px:

And at 32px:

(I have these files saved on Figma if they're needed, btw!)

edit: bonus rainbow icons!

edit 2: and some sample usage!

edit 3: notification area icons + modified versions for 16px, 24px, 32px, 48px and 64px:

[jacker07]

So I decided to keep finalizing these two concepts of my own. Thoughts?

There are like 9 different icons here. It'd be way harder for @crutkas and his team to pick one from, so that led me wondering how would the collaboration process between all these awesome designers go?

EDITED Feb 17. Added monochrome icons.

[FJduFou]

Here's some more icons I came up with, in a variety of colours for potential different states as mentioned prior.

The frame 8 is verry good because the blue is the color of windows, and the icon is verry good in the taskbar, this respect the fluent design

[dphfox]

@Elttob Can you try a monochrome icon for the taskbar?

How's this?

edit: combined with some of the colours from above (this would be good for indicating status!)

[dphfox]

Added the coloured system tray icons to meet the initial requirements. I think they're pretty clean, but might tweak them a bit in the future if I have any new ideas on how to do them.

[jakobbouchard]

Added the coloured system tray icons to meet the initial requirements. I think they're pretty clean, but might tweak them a bit in the future if I have any new ideas on how to do them.

@Elttob I may be a bit late in the discussion, but I really liked your previous idea of having the gradient in the system tray. I love the latest iteration though. Some of the previous ones looked a bit like a trackpad icon, which is also why I liked the gradient idea. The gradient would work well with colours, as you showed previously.

[crutkas]

We're working with the icon team right now. May be 0.18, maybe 0.17 for new icon

[riverar]

Why does the PowerToys icon need to show state? Is there a feature in the works or planned that requires this feature? I'm also having a hard time understanding what the icon even represents. Is it supposed to be an old TV with a test pattern? What are all the buttons for? I don't want a gradient in my system tray, that's distracting.

[htcfreek]

@crutkas Will we have some PT icons with red and yellow colour or warning and stop sign? We could use such icons in the toast notifications. For example when the update failed or when the 'elevated running' notification is shown.

docs.microsoft.com > adaptive-interactive-toasts > app-logo-override

[crutkas]

Why does the PowerToys icon need to show state? Is there a feature in the works or planned that requires this feature? I'm also having a hard time understanding what the icon even represents. Is it supposed to be an old TV with a test pattern? What are all the buttons for? I don't want a gradient in my system tray, that's distracting.

Waiting on a mono line that we then can do status on. Example: detected an elevated app or An app that causes conflict.

[riverar]

@crutkas Not sure what that first part means. Second part seems like a bug (elevated apps). And not sure notifying the user about known bad apps is useful through an icon color change (or at all).

Is there a design spec for this?

[htcfreek]

Is there a design spec for this?

I don't think that we have a design spec.

But I have written down my thoughts of how we can handle this here: https://github.com/microsoft/PowerToys/issues/1958#issuecomment-613334280

[riverar]

Thanks @htcfreek

[Opinion]

I think conflicting apps can be detected at install time or simply listed in the README. (It's my understanding power users are the audience here.) Building out all this infrastructure for a handful of buggy apps seems extremely wasteful to me. (FancyZones elevated window issues seem temporary and fixable.)

[enricogior]

The new icon is now available in 0.18 https://github.com/microsoft/PowerToys/releases