Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Guidelines for Segoe UI Symbol icons

Applies to Windows and Windows Phone

This document lists the useful glyphs provided by the Segoe UI Symbol font that you can use as icons.

Dos and don'ts

  • Use these glyphs only when you can specify the Segoe UI Symbol font.

Additional usage guidance

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.

Using a zero-width glyph

Many of the icons also have mirror forms available for use in languages that use bi-directional text.

If you are developing an app in C#/VB/C++ and XAML, you can choose to use the Symbol enumeration instead of the Unicode ID to specify glyphs from the Segoe UI Symbol font. If you are developing an app in JavaScript and HTML, you can choose to use the AppBarIcon enumeration instead of the Unicode ID to specify glyphs from the Segoe UI Symbol font.

Hearts

Heart icons

Rating stars

Rating icons

Checkbox components

Checkbox components

Radio button components

Radio button components

Miscellaneous

Miscellaneous icons

Scroll bar arrows

Scroll bar arrows

Progressive disclosure arrows

Progressive disclosure arrows

Back buttons

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 code20pt code42pt codeSymbolDescription
U+E2A4U+E0BAU+E071back buttonBack button
U+E2A5U+E0BBU+E0A6back button outlineBack button outline
U+E2A6U+E0C4U+E0A7back button arrowBack button arrow
U+E2A7U+E0D4U+E0A8back button fillBack button fill
U+E2A8U+E0B3U+E08Eback button reversedBack button reversed
U+E2A9U+E0ACU+E0AAback button mirroredMirrored back button
U+E2AAU+E0ADU+E0ABback button mirrored arrowMirrored back button arrow
U+E2ABU+E0AFU+E257back button mirrored reversedMirrored back button reversed

 

Back arrows for HTML

Add additional code to create circles around these glyphs.

Back arrows for HTML

AppBar glyphs

Use these glyphs in an AppBar. They're designed to be displayed at 14pt. Use additional code to create a circle around them.

AppBar icons

AppBar icons

AppBar icons

AppBar icons

AppBar icons

AppBar icons

Related topics

For designers
Guidelines for fonts
Guidelines for typography
For developers (HTML)
AppBarIcon enumeration
For developers (XAML)
Symbol enumeration

 

 

Show:
© 2014 Microsoft