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
description: Learn about app and system icons in Windows 11.
4
4
title: Iconography in Windows 11
5
5
ms.assetid: EC94D54F-4C24-4E16-B8E0-08F3916C00F0
6
6
ms.author: hickeys
@@ -12,74 +12,73 @@ ms.localizationpriority: medium
12
12
13
13
# Iconography in Windows 11
14
14
15
-
Iconography is a set of visual images and symbols that help users understand and navigate your app. Icons are used throughout the user interface as visual metaphors representing a concept, action, or status.
15
+
Iconography is a set of visual images and symbols that help users understand and move through your app. Icons are used throughout the user interface as visual metaphors that represent a concept, action, or status.
16
16
17
-
Windows 11 uses three different type of icons: application icons, system icons, and file type icons.
17
+
Windows 11 uses three types of icons: application, system, and file type. This article focuses on the first two.
18
18
19
19
## Application icons
20
20
21
-
21
+
22
22
23
-
Application icons represent your app in the Windows Shell. They are primarily used to launch your application, but also represent your app wherever it appears in the Windows shell.
23
+
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.
24
24
25
-
App icons should represent your app's core functionality through a metaphor. See [App Icons](../style/iconography/overview.md) for more information about designing and constructing your app's icon.
25
+
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).
26
26
27
27
## System icons
28
28
29
-
29
+
30
30
31
-
Windows 11 introduces a new system icon font, [Segoe Fluent Icons](..\downloads\index.md#fonts). This new font compliments Windows 11's [geometry](geometry.md).
31
+
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.
32
32
33
-
All glyphs in Segoe Fluent Icons are drawn in a Monoline style, which means they are created using a single stroke of 1 epx.
33
+
All glyphs in Segoe Fluent Icons are drawn in a monoline style. That means they're created through a single stroke of 1 epx.
34
34
35
35
Glyphs in Segoe Fluent Icons follow three aesthetic principles:
36
36
37
-
1.**Minimal**: Glyphs contain only the details necessary to communicate the concept.
38
-
2.**Harmonious**: Glyphs are based on simple and geometric forms.
39
-
3.**Evolved**: Glyphs use modern metaphors that are easily understood.
37
+
-**Minimal**: Glyphs contain only the details that are necessary to communicate the concept.
38
+
-**Harmonious**: Glyphs are based on simple and geometric forms.
39
+
-**Evolved**: Glyphs use modern metaphors that are easily understood.
Segoe Fluent Icons font metrics were developed to match how designers and developers are used to working with SVG and bitmap icons.
45
+
Font metrics for Segoe Fluent Icons match how designers and developers are accustomed to working with SVG and bitmap icons.
46
46
47
-
Each font glyph is designed so that the footprint of the icon area is a square em.
48
-
A 16 epx font size icon is the equivalent of a 16x16 epx icon, making sizing and positioning more predictable.
47
+
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.
49
48
50
49
### Anatomy
51
50
52
-
System icons glyphs can be visually constructed by combining a base icon with a modifier icon.
51
+
You can visually construct system icon glyphs by combining a base icon with a modifier icon.
53
52
54
-
**Base icons** are the main element of a visual metaphor. Base elements should should occupy the entire icon footprint.
53
+
*Base icons* are the main element of a visual metaphor. Base elements should occupy the entire icon footprint.
55
54
56
-
**Modifier icons** modify the meaning of the base icon. Modifier elements should be placed in one of the bottom quadrants of the icon footprint.
55
+
*Modifier icons* modify the meaning of the base icon. Modifier elements should be placed in one of the bottom quadrants of the icon footprint.
57
56
58
57
:::row:::
59
58
:::column:::
60
-
59
+
61
60
:::column-end:::
62
61
:::column span="3":::
63
62
**Base icon only**<br>
64
-
On its own, the paper sheet icon communicates the concept of a *file*
63
+
On its own, the paper sheet icon communicates the concept of a *file*.
65
64
:::column-end:::
66
65
:::row-end:::
67
66
:::row:::
68
67
:::column:::
69
-
68
+
70
69
:::column-end:::
71
70
:::column span="3":::
72
71
**Base icon + modifier icon**<br>
73
-
Adding an up arrow to the file icon changes the meaning of the icon to represent an *uploaded file*
72
+
Adding an up arrow to the file icon changes the meaning of the icon to represent an *uploaded file*.
74
73
:::column-end:::
75
74
:::row-end:::
76
75
77
76
### Layering
78
77
79
-
Icon layering is a technique used to overlap two different glyphs. We recommend using icon layering to create a different state of the same icon (e.g. active or selected state).
78
+
Icon layering is a technique that you use to overlap two glyphs. We recommend using icon layering to create a different state of the same icon (for example, an active or selected state).
80
79
81
-
80
+
82
81
83
82
### Localization
84
83
85
-
Understand the cultural connotations of certain symbols in different cultures. While in most cases iconography doesn't require localization, certain icons may be acceptable in one culture but not in another. Validate your iconography choices with the context in which they will be used.
84
+
Understand the cultural connotations of symbols. Although iconography doesn't require localization in most cases, certain icons might be acceptable in one culture but not in another. Validate your iconography choices with the context in which you'll use them.
0 commit comments