You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: hub/apps/design/signature-experiences/iconography.md
+11-8Lines changed: 11 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
description: Learn about app and system icons in Windows 11.
3
3
title: Iconography in Windows 11
4
4
ms.assetid: EC94D54F-4C24-4E16-B8E0-08F3916C00F0
5
-
ms.date: 06/24/2021
5
+
ms.date: 07/24/2024
6
6
ms.topic: article
7
7
keywords: windows 11, design, ui, uiux, icons, app icons, system icons, segoe fluent icons, segoe
8
8
ms.localizationpriority: medium
@@ -14,19 +14,20 @@ Iconography is a set of visual images and symbols that help users understand and
14
14
15
15
Windows 11 uses three types of icons: application, system, and file type. This article focuses on the first two.
16
16
17
+
This article describes how the [Fluent Design language](https://fluent2.microsoft.design/) is applied to Windows apps. For more information, see [Fluent Design Iconography](https://fluent2.microsoft.design/iconography).
17
18
## Application icons
18
19
19
20

20
21
21
22
Application icons represent your app in the Windows shell. They're primarily used to open your application, but they also represent your app wherever it appears in the Windows shell.
22
23
23
-
App icons should represent your app's core functionality through a metaphor. For more information about designing and constructing your app's icon, see [Iconography in Windows](../style/iconography/overview.md).
24
+
App icons should represent your app's core functionality through a metaphor. For more information about designing and constructing your app's icon, see [App icons](../style/iconography/overview.md).
24
25
25
26
## System icons
26
27
27
28

28
29
29
-
Windows 11 introduces a new system icon font, [Segoe Fluent Icons](..\downloads\index.md#fonts). This new font complements [geometry](geometry.md) in Windows 11.
30
+
Use system icons inside your app UI for items like command bars, navigation, or status indicators. Windows 11 introduces a new system icon font, [Segoe Fluent Icons](../style/segoe-fluent-icons-font.md). This new font complements [geometry](geometry.md) in Windows 11.
30
31
31
32
All glyphs in Segoe Fluent Icons are drawn in a monoline style. That means they're created through a single stroke of 1 epx.
32
33
@@ -36,15 +37,17 @@ Glyphs in Segoe Fluent Icons follow three aesthetic principles:
36
37
-**Harmonious**: Glyphs are based on simple and geometric forms.
37
38
-**Evolved**: Glyphs use modern metaphors that are easily understood.
38
39
39
-
### Sizing
40
+
For more information about using icons in your app UI, see [Icons in Windows apps](../style/icons.md).
Font metrics for Segoe Fluent Icons match how designers and developers are accustomed to working with SVG and bitmap icons.
44
47
45
48
Each font glyph is designed so that the footprint of the icon area is a square em. An icon with a 16-epx font size is the equivalent of a 16x16-epx icon, to make sizing and positioning more predictable.
46
49
47
-
### Anatomy
50
+
### Modifiers
48
51
49
52
You can visually construct system icon glyphs by combining a base icon with a modifier icon.
50
53
@@ -83,7 +86,7 @@ Understand the cultural connotations of symbols. Although iconography doesn't re
83
86
84
87
## Examples
85
88
86
-
> [!TIP]
87
89
> [!div class="nextstepaction"]
88
-
> [Open the WinUI 3 Gallery app and see Iconography principles in action](winui3gallery:/item/Icons).
89
-
> The **WinUI 3 Gallery** app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the [Microsoft Store](https://www.microsoft.com/store/productId/9P3JFPWWDZRC) or get the source code on [GitHub](https://github.com/microsoft/WinUI-Gallery)
90
+
> [Open the WinUI 3 Gallery app and see Iconography principles in action](winui3gallery:/item/Iconography)
Copy file name to clipboardExpand all lines: hub/apps/design/signature-experiences/motion.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
description: An overview of where and how motion is used in Windows 11
3
3
title: Motion in Windows 11
4
-
ms.date: 07/15/2021
4
+
ms.date: 07/24/2024
5
5
ms.topic: article
6
6
keywords: windows 11, design, ui, uiux, motion
7
7
ms.localizationpriority: medium
@@ -112,7 +112,7 @@ _Click the image to see it animated._
112
112
113
113
#### Animated Icon: Adds delight and reveals information through micro interactions
114
114
115
-
Use [animated icons](../controls/animated-icon.md) to implement lightweight, vectorbased, icons and illustrations with motion using [Lottie](/windows/communitytoolkit/animations/lottie) animations.
115
+
Use [animated icons](../controls/animated-icon.md) to implement lightweight, vector-based icons and illustrations with motion using [Lottie](/windows/communitytoolkit/animations/lottie) animations.
116
116
117
117
Animated icons draw attention to specific entry points, provide feedback from state to state, and add delight to an interaction.
description: Design and create an app icon for your Windows app.
4
4
keywords: windows 10, uwp
5
-
design-contact: judysa
6
-
ms.date: 10/29/2021
5
+
ms.date: 07/23/2024
7
6
ms.topic: article
8
7
ms.localizationpriority: medium
9
8
---
10
9
11
-
# Iconography in Windows
10
+
# App icons
12
11
13
-
App icons are the visual indicators we use to help users find and launch an application.
12
+
App icons are the visual indicators we use to help users find and launch an application on Windows.
14
13
15
14
It's the first impression of your app and we want to help make sure it's a great one. This article covers the best practices for Windows app icon design and implementation to provide the best experience in the Windows ecosystem.
16
15
16
+
This article describes icons that represent your app in Windows and the Windows Store. To learn about icons that you use inside your app UI, see [Icons in Windows apps](../icons.md).
17
+
17
18
## Where do app icons appear?
18
19
19
-
:::image type="content" source="images/win-11-icon-locations.png" alt-text="A diagram that shows an abstract image of the Windows 11 desktop.":::
20
+
:::image type="content" source="images/win-11-icon-locations.png" alt-text="A diagram that shows an abstract image of the Windows 11 desktop and start menu.":::
20
21
21
-
App icons appear in a variety of places in Windows
22
+
App icons appear in a variety of places in Windows:
22
23
23
24
:::row:::
24
25
:::column:::
@@ -43,21 +44,18 @@ App icons appear in a variety of places in Windows
43
44
44
45
### Keep it simple
45
46
46
-
**Create clean, straightforward, timeless designs**- Icons are quick visual cues that represent your app. simple, easy to understand designs help users recognize your app more quickly,
47
+
**Create clean, straightforward, timeless designs**— Icons are quick visual cues that represent your app. Simple, easy to understand designs help users recognize your app more quickly.
47
48
48
49
### Keep it universal
49
50
50
-
**Make it accessible, inviting, and easy to understand**- Avoid complex or overly abstract forms. An intricate shape may be appropriate in some cultures but not in others. Inclusive icons are better for everyone. We focus on human unifiers – our motivations, relationships, and capabilities. We design to extend human abilities and create a sense of belonging.
51
+
**Make it accessible, inviting, and easy to understand**— Avoid complex or overly abstract forms. An intricate shape may be appropriate in some cultures but not in others. Inclusive icons are better for everyone. We focus on human unifiers – our motivations, relationships, and capabilities. We design to extend human abilities and create a sense of belonging.
51
52
52
53
### Do less, better
53
54
54
-
**When every detail is thoughtfully crafted, delight happens** - The best apps offer beautiful design and reliable experiences. Your icon should illustrate app in a singular element using simple forms.
55
-
56
-
### Design and create your app's icon
57
-
58
-
Learn how to use [metaphor, shape, color, and shadow](app-icon-design.md) to design a beautiful and functional icon for your app.
59
-
60
-
Create icons that look good [at any size, on any screen](app-icon-construction.md).
55
+
**When every detail is thoughtfully crafted, delight happens**— The best apps offer beautiful design and reliable experiences. Your icon should illustrate your app in a singular element using simple forms.
61
56
62
-
If your app supports Windows 10, your app's icons will be displayed in Live Tiles. [Learn more about additional considerations for icons on Windows 10](live-tile-icons.md)
57
+
## Design and create your app's icon
63
58
59
+
-[Design guidelines for Windows app icons](app-icon-design.md)— Learn how to use metaphor, shape, color, and shadow to design a beautiful and functional icon for your app.
60
+
-[Construct the icon for your Windows app](app-icon-construction.md)— Create icons that look good at any size, on any screen.
61
+
-[Construction guidelines for Windows 10 icons](live-tile-icons.md)— If your app runs on Windows 10, your app's icons will be displayed in Live Tiles. Learn more about additional considerations for icons on Windows 10.
0 commit comments