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 :smile: 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!)

[enricogior]

All contributions are amazing! I can't wait to see how many more great ideas you all will have for the other icons (the ones showed in the settings for each PowerToy module). I guess we will open a new issue for those. Thanks to all of you again for the fantastic work!

[niels9001]

@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!)

I like that - I think a monochrome-ish icon for the systray seperate from the actual app icon is required to make it all scale well.

[jonshipman]

Just something different.

[jacker07]

I combined the circuit board icon design and the vertical icon I've made a while ago, thought it'd be cool and nostalgic maybe?

A new idea. Battery + slinky = power + toy?

I'm still figuring out how to make this looks less busy and more recognizable. Also no idea if this qualifies as a slinky and a battery or not lol

Just something different.

That's a good one!

I've decided to expand on your idea a bit more. I made the wind-up key kinda dives into the pixels. I'm also thinking about the animation like, when the key spins it'll flare some colorful sparks.

[niels9001]

My final version of this concept. In the system tray, the icon will now be more in line with the other systray icons. Adding a status indicator (as mentioned by @crutkas ) is now also easier. Also shown below is how the new icon integrates with the new Fluent icons.

[crutkas]

Honestly, i'm in love with this @niels9001. More so when we couple it with color in the systray for status.

[dphfox]

Based on @niels9001 's refined design, I did some tweaks to bring ours closer together, since that's the look that everyone seems to be going for here 😀

I specifically sought to increase the colour contrast of the icon and make it much easier to distinguish / much less blurry and muddy looking. I hand-tweaked the colours to match the other Fluent icons without being too vibrant, did some further pixel optimisation work and brought the monochrome icon style in line with their design.

Here's what I got - I think this is a great middle ground which keeps the lovely look of niels' design while making it a bit more accessible and sharp.

edit: here's an alternate design with more squared buttons:

(pretty hype for this! everyone else's designs are really pretty so whichever design ends up in the final product will look stunning 🙂)

[niels9001]

@Elttob I really like this - maybe we could use the calculator gray for the backdrop so it stands out slightly better! The idea of reducing the colors (especially since the orange color fades away between yellow and red). On the other hand, it breaks a bit the rainbow effect. @crutkas Any thoughts on this related to the legacy of the icon?

I think we're at a point that we can do minor refinements on these concepts. @crutkas Do you think we could have some experts review these (like Christina or Mike that were on the Windows Insiders Podcast yesterday)?

[niels9001]

@Elttob I really like the evolutions!

Couple of things:

• Maybe we could make the backdrop a bit lighter, similar to the calculator-grey so it stands out a bit more? It's indeed a bit 'muddy' or dark.
• I like removing one of the colors, since the orange fades away with the red and yellow! (@crutkas can we do this, in terms of the legacy of the icon?)

I think we're at a point that we can do further minor refinements on these concepts. @crutkas could we get someone from the icon design team (like Christina or Mike that were present in the Windows Insiders Podcast yesterday) to chime in? I think we could use some guidance on e.g. the colors and best practices (also for accessibility reasons).

[mdtauk]

Here is a rough idea for the icon. Including a simplified 16px tray icon with status colours.

I placed the icon on various surfaces, to show how it stands out, and adapts to Light and Dark themes.

[crutkas]

@niels9001 i'm syncing with the icon team tomorrow :)

[mdtauk]

Here is a refinement on the logo idea I posted earlier

[dphfox]

@niels9001 Here's what it looks like with the grey as you suggested; it's pretty nice!

I also experimented with adding some more drop shadows to help make some of the shapes more distinct. What do you think?

[crutkas]

@elttob, i love the brighter grey. Maybe even match the grey from Calc?

wow, that is awesome.

For the color icons, i think top, left, right grey border would need to be maybe a pixel or two bigger. To match the calc / Movie & tv distance border

[niels9001]

Iterated a bit further - using a similar color scheme as the calculator, alarm and photos apps.

Added a small shadow at the bottom. And using the indicator colors (similar to @mdtauk and @Elttob earlier explorations) for the systray.

Start screen:

[dphfox]

@crutkas It's the same grey used in the Calculator icon; it might look different due to the different tile colour it's placed on.

I made some adjustments to my icon to make the padding thicker to match the stroke width of the other icons visually, as well as matching the drop shadow for the icon on the tile a bit better. Do you think this lines up better with the other icons?

edit: just saw an earlier comment asking about the icon having 4 colours as opposed to the original 5 - there's a couple reasons I chose to reduce the number of colour 'stripes' for the icon.

I've found that it's much more visually balanced with four colours when working on the smaller pixel-perfect icon as opposed to five; the width of the 'screen' on the icon is 12px, 18px, 24px, 36px and 50px at icon sizes 16x, 24x, 32x, 48x and 64x respectively. Four divides into most of those numbers very nicely (with the exception of the largest size, where it makes barely any visible difference). Having five colours would make them appear unevenly sized at those smaller sizes as 5px doesn't divide nicely, making the coloured 'stripes' appear uneven in width - this is exaggerated by the smaller size of the icon, making it very noticeable.

It's important for the icon to be sharp at those smaller sizes and to avoid placing items in between pixels, otherwise the icon would end up looking very blurry and the shapes would be hard to distinguish. If you'd like, I could give it a shot anyway, but with five colours I don't believe I'd be able to get it looking as sharp or as visually balanced 🙂

edit 2: alternate design with lighter shadows and smaller border radius, to keep in line with other icons

[mdtauk]

[mdtauk]

My Logo design alongside other Tiles

[Stanzilla]

@niels9001 @Elttob Awesome icons! I think it might be a tad too small on the live tile though? Compared to the other ones that is

[jacker07]

@mdtauk really like your icon, especially the gradient cuz it feels nostalgic. the rest looks super sharp and modern.

[mdtauk]

@mdtauk really like your icon, especially the gradient cuz it feels nostalgic. the rest looks super sharp and modern.

The idea was to represent the Microsoft logo colours, the colour bars from the current logo, at the same time, reducing the amount of elements that make up the logo.

[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