Design Guide
Product launch icons represent Microsoft apps. Their primary role is to identify a Microsoft capability and the collaboration and productivity it enables. They can also allow people to take an action, like buying, downloading, or launching the app.
These icons draw a connection to our Microsoft brand, but they do not represent the company and should never be used in place of the Microsoft logo.
As the product icons scale below 48 pixels, they simplify in detail in favor of readability. Use icons at specific sizes, instead of scaling them, to create pixel-perfect results.
When scaling product icons larger than 48 pixels, use the full-fidelity icon and scale by factors of four, (48, 64, 96…). Scaling to 4x the base icon, i.e. 48 pixels to 192 pixels, ensures pixel perfection.
Not all icons need to be redrawn, only some icons that seriously deviate from the FDS style need to be redrawn. For example, in the picture below, Adobe series application icons do not perform well on the dark taskbar. The background brightness of the icon is too close to the brightness of the taskbar itself on the dark wallpaper, and it is impossible to distinguish it. It is necessary to redraw it. Whereas the Autodesk family of icons works well in the taskbar.
If the icon has a rectangular background that is not part of the brand, the icon should be redrawn because the rectangular background shrinks the main image of the brand, making it appear too small on the taskbar.
Preserve original brand identity
- Color scheme
This is one of the most important parts of the brand image. Prioritize keeping the original brand color scheme, and then consider redrawing it in FDS style
- Shape
The shape of the Logo is also one of the important parts of the Logo and should be kept as completely as possible
- At least one of them should be kept to ensure the association with the source icon
These icons are from Office design team
More info:
These icons are from the Windows design team
More info:
https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4
https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416
Please try to use the app you want to redraw the icon at least once, you should at least know what it does
We can get inspiration from historical icons, and we can also get the direction of the brand from historical development
Please fully try all the possibilities you can think of
Please don't be limited to the Fluent style, perhaps various styles can give you different inspirations.
You can find very good quality icon references from two places:
Maybe you have a new inspiration now, please fully try all the possibilities you can think of
-
Is the icon self-explanatory and concisely expresses what the app does?
-
Does the icon maintain the association with the brand, maintain - rather than break people's impression of the brand?
-
Does the icon look good in all areas - taskbar, start menu, application list, file explorer, application title bar (if modifiable)?
-
Whether the icons perform well in both dark and light modes - including the title bar, taskbar, start menu, file explorer, especially in the case of the default wallpaper must meet the contrast requirements.
-
Does the icon perform well at all sizes - from 16x16 to 256x256
If all modified versions are not complete and surpass the blueprint in at least most cases, please continue to modify, or continue to use the original icon.
File type icons indicate specific files or file formats.
Multicolor file type icons look best at 16, 48, and 96 pixel sizes in most Microsoft UIs.
These icons are available as SVGs and.webps. SVGs are vectors and are therefore more versatile and can be resized easily, but not all browsers support SVGs. PNGs have wider browser support but require many sizes to remain visually crisp.