Guidelines for Segoe UI Symbol icons
This document lists the useful glyphs provided by the Segoe UI Symbol font that you can use as icons.
- Use these glyphs only when you can specify the Segoe UI Symbol font.
Most of the UI controls added to Segoe UI Symbol are mapped to the Private Use Area of Unicode (PUA). The PUA allows font developers to assign private Unicode values to glyphs that don’t map to existing code points. This can be useful when creating a symbol font, but it creates an interoperability problem. If the font is not available, the glyphs won’t show up. Only use these glyphs when you can specify the Segoe UI Symbol font.
If you are working with tiles, you can't use these glyphs because you can't specify the tile font and PUA glyphs are not available via font-fallback.
Many of these glyphs are available with zero width. You can layer zero-width glyphs on top of each other. For example, if you insert a red solid heart with zero width (U+E00B), the cursor does not advance to the end of the heart since it has zero width. Next, if you insert a black outlined heart (U+E006), the outlined heart is layered on top of the solid heart.
Many of the icons also have mirror forms available for use in languages that use bi-directional text.
Glyphs for back buttons are available in 3 different sizes so that the weight of the outer ring is consistent at 16pt, 20pt, and 42pt. These glyphs are designed to support layering.
|16pt code||20pt code||42pt code||Symbol||Description|
|U+E2A5||U+E0BB||U+E0A6||Back button outline|
|U+E2A6||U+E0C4||U+E0A7||Back button arrow|
|U+E2A7||U+E0D4||U+E0A8||Back button fill|
|U+E2A8||U+E0B3||U+E08E||Back button reversed|
|U+E2A9||U+E0AC||U+E0AA||Mirrored back button|
|U+E2AA||U+E0AD||U+E0AB||Mirrored back button arrow|
|U+E2AB||U+E0AF||U+E257||Mirrored back button reversed|
Add additional code to create circles around these glyphs.
Use these glyphs in an AppBar. They're designed to be displayed at 14pt. Use additional code to create a circle around them.
- For designers
- Guidelines for fonts
- Guidelines for typography
- For developers (HTML)
- AppBarIcon enumeration
- For developers (XAML)
- Symbol enumeration