Windows Dev Center

Guidelines for Segoe MDL2 icons

Applies to Windows and Windows Phone

This topic lists the useful glyphs provided by the Segoe MDL2 Assets font that you can use as icons, and provides guidance around glyph usage.

Recommendations

  • Use these glyphs only when you can explicitly specify the Segoe MDL2 Assets font.

Additional usage guidance

The Windows 8/8.1 Segoe UI Symbol icon font has been replaced with the Segoe MDL2 Assets font effective with the release of Windows 10. It can be used in much the same manner as the older font, but many glyphs have been redrawn in the Windows 10 icon style with the font’s metrics set so that icons are aligned within the font’s em-square instead of on a typographic baseline.

Note  An Em is a unit of measure in the font. 1 Em in the font is equal to 100% of the specified point value at 72ppi. For example 16pt is equal to 16px at 72ppi (aka 100% Plateau). The new MDL2 fonts are designed so that the footprint of the icon area is a square Em. So if you put 16px for Width and Height in the code, you get a 16x16px icon footprint. That does not always mean the icon will be the full dimension of the footprint.
 

The Segoe UI Symbol will still be available as a "legacy" resource. But it is advised that all applications be updated to use the new Segoe MDL2 Assets.

Most of the icons and UI controls included in the Segoe MDL2 Assets font 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 is 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 MDL2 Assets 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.

Unlike with Segoe UI Symbol, the icons in the Segoe MDL2 Assets font are not intended for use in-line with text. This means that some older "tricks" like the progressive disclosure arrows no longer apply. Likewise, since all of the new icons are sized and positioned the same, they do not have to be made with zero width; we have just made sure they work as a set. Ideally, you can overlay two icons that were designed as a set and they will fall into place. We may do this to allow colorization in the code. For example, U+EA3A and U+EA3B were created for the Start tile Badge status. Because these are already centered the circle fill can be colored for different states.

Segoe UI Symbol also relied on “zero width” glyphs for layering and colorization, as in this example, a black outline (U+E006) could be drawn on top of the zero-width red heart (U+E00B).

Using a zero-width glyph

All glyphs in Segoe MDL2 Assets have the same fixed width with a consistent height and left origin point, so layering and colorization effects can be achieved by drawing glyphs directly on top of each other.

Many of the icons also have mirrored forms available for use in languages that use right-to-left text directionality such as Arabic, Farsi, and Hebrew.

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 MDL2 Assets 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 MDL2 Assets font.

Also, keep in mind that the Segoe MDL2 Assets font includes many more icons than we can show here. Many of these are intended for specialized purposed and are not typically used anywhere else.

Hearts

CodeSymbolEnumDescription

U+E006

JJ841126.HeartLegacy(en-us,WIN.10).png

HeartLegacy

Outlined heart

U+E0A5

JJ841126.HeartFillLegacy(en-us,WIN.10).png

HeartFillLegacy

Solid heart

U+E007

JJ841126.HeartBrokenLegacy(en-us,WIN.10).png

HeartBrokenLegacy

Broken heart

U+E00B

JJ841126.HeartFillZeroWidthLegacy(en-us,WIN.10).png

HeartFillZeroWidthLegacy

Solid heart (zero width)

U+E00C

JJ841126.HeartBrokenZeroWidthLegacy(en-us,WIN.10).png

HeartBrokenZeroWidthLegacy

Broken heart (zero width)

 

Rating stars

CodeSymbolEnumDescription
U+E224RatingStarLegacyRatingStarLegacyOutlined star
U+E0B4JJ841126.RatingStarFillLegacy(en-us,WIN.10).pngRatingStarFillLegacySolid star
U+E00AJJ841126.RatingStarFillZeroWidthLegacy(en-us,WIN.10).pngRatingStarFillZeroWidthLegacySolid star (zero width)
U+E082JJ841126.RatingStarFillReducedPaddingHTMLLegacy(en-us,WIN.10).pngRatingStarFillReducedPaddingHTMLLegacySolid star (reduced padding for use in HTML)
U+E0B5JJ841126.RatingStarFillSmallLegacy(en-us,WIN.10).pngRatingStarFillSmallLegacySmall star
U+E7C6JJ841126.HalfStarLeft(en-us,WIN.10).pngHalfStarLeft Half star, left side

U+E7C7

JJ841126.HalfStarRight(en-us,WIN.10).pngHalfStarRightHalf star, right side

 

Checkbox components

CodeSymbolEnumDescription
U+E001CheckMarkLegacyCheckMarkLegacyCheck mark
U+E002CheckboxFillLegacyCheckboxFillLegacyFilled checkbox
U+E003CheckboxLegacyCheckboxLegacyCheckbox
U+E004CheckboxIndeterminateLegacyCheckboxIndeterminateLegacyIndeterminate state
U+E005CheckboxCompositeReversedLegacyCheckboxCompositeReversedLegacyReversed
U+E008CheckMarkZeroWidthLegacyCheckMarkZeroWidthLegacyCheck mark (zero width)
U+E009CheckboxFillZeroWidthLegacyCheckboxFillZeroWidthLegacyFill (zero width)
U+E0A2CheckboxCompositeLegacyCheckboxCompositeLegacyComposite
U+E739CheckboxCheckboxCheckbox
U+E73ACheckboxCompositeCheckboxCompositeComposite checkbox
U+E73BCheckboxFillCheckboxFillFilled checkbox
U+E73CCheckboxIndeterminateCheckboxIndeterminateIndeterminate state
U+E73DCheckboxCompositeReversedCheckboxCompositeReversedReversed composite
U+E73ECheckMarkCheckMarkCheck mark

 

Miscellaneous

CodeSymbolEnumDescription

U+E134

CommentLegacyCommentLegacyComment

U+E113

FavoriteLegacyFavoriteLegacy

U+E195

UnfavoriteLegacyUnfavoriteLegacy

U+E734

FavoriteStarFavoriteStarFavorite outlined

U+E735

FavoriteStarFillFavoriteStarFill

U+E8D9

UnfavoriteUnfavorite

U+E19F

LikeLegacyLikeLegacy

U+E19E

DislikeLegacyDislikeLegacy

U+E19D

LikeDislikeLegacyLikeDislikeLegacy

U+E116

VideoLegacyVideoLegacy

U+E714

VideoVideo

U+E20B

MailMessageLegacyMailMessageLegacyMail legacy

U+E248

ReplyLegacyReplyLegacyReply

U+E249

Favorite2LegacyFavorite2LegacyFavorite filled

U+E24E

Unfavorite2LegacyUnfavorite2LegacyUnfavorite

U+E25A

MobileContactLegacyMobileContactLegacyMobile contact

U+E25B

BlockedLegacyBlockedLegacyBlocked contact

U+E25C

TypingIndicatorLegacyTypingIndicatorLegacyTyping indicator

U+E25D

PresenceChickletVideoLegacyPresenceChickletVideoLegacyVideo presence chicklet

U+E25E

PresenceChickletLegacyPresenceChickletLegacyPresence chicklet

 

Scroll bar arrows

CodeSymbolEnum
U+E00EScrollChevronLeftLegacyScrollChevronLeftLegacy
U+E00FScrollChevronRightLegacyScrollChevronRightLegacy
U+E010ScrollChevronUpLegacyScrollChevronUpLegacy
U+E011ScrollChevronDownLegacyScrollChevronDownLegacy
U+E016ScrollChevronLeftBoldLegacyScrollChevronLeftBoldLegacy
U+E017ScrollChevronRightBoldLegacyScrollChevronRightBoldLegacy
U+E018ScrollChevronUpBoldLegacyScrollChevronUpBoldLegacy
U+E019ScrollChevronDownBoldLegacyScrollChevronDownBoldLegacy

 

Back buttons

Legacy glyphs for back buttons are available in 2 different sizes so that the weight of the outer ring is consistent at 20pt, and 42pt. Two new proportional chrome back buttons are also available. These glyphs are designed to support layering.

CodeSymbolEnumDescription
U+E0C4BackBttnArrow20LegacyBackBttnArrow20LegacyBack button arrow, 20pt
U+E0A6BackBttnArrow42LegacyBackBttnArrow42LegacyBack button arrow, 42pt
U+E0ADBackBttnMirroredArrow20LegacyBackBttnMirroredArrow20LegacyMirrored back button arrow reversed, 20pt
U+E0ABBackBttnMirroredArrow42LegacyBackBttnMirroredArrow42LegacyMirrored back button arrow reversed, 42pt
U+E830ChromeBackChromeBack Chrome back button
U+EA47ChromeBackMirroredChromeBackMirrored Chrome back mirrored button

 

Back arrows for HTML

Add additional code to create circles around these glyphs.

CodeSymbolEnumDescription
U+E0D5ArrowHTMLLegacyArrowHTMLLegacyArrow for HTML use
U+E0AEArrowHTMLMirroredLegacyArrowHTMLMirroredLegacyMirrored version of U+E0D5

 

AppBar glyphs

Use glyphs from the following list for an AppBar. By convention, they're referred to by their enum names. And they're designed as 20x20px icons with no circle.

CodeSymbolEnumDescription
U+E8FBAcceptAccept
U+E910AccountsAccounts
U+E710AddAdd
U+E8FAAddfriendAddFriend
U+E7EFAdminAdmin
U+E8E3AligncenterAlignCenter
U+E8E4AlignleftAlignLeft
U+E8E2AlignrightAlignright
U+E71DAllappsAllApps
U+E723AttachAttach
U+E8A2AttachcameraAttachCamera
U+E8D6AudioAudio
U+E72BBackBack
U+E73FBacktowindowBackToWindow
U+E8F8BlockcontactBlockContact
U+E8DDBoldBold
U+E8A4BookmarksBookmarks
U+E7C5BrowsephotosBrowsePhotos
U+E8FDBulletedlistBulletedList
U+E8EFCalculatorCalculator
U+E787CalendarCalendar
U+E8BFCalendardayCalendarDay
U+E8F5CalendarreplyCalendarReply
U+E8C0CalendarweekCalendarWeek
U+E722CameraCamera
U+E711CancelCancel
U+E8BACaptionCaption
U+E7F0CCCC
U+E8EACellphoneCellphone
U+E8C1CharactersCharacters
U+E894ClearClear
U+E8E6ClearselectionClearSelection
U+E89FClosepaneClosePane
U+E753CloudCloud
U+E90ACommentComment
U+E77BContactContact
U+E8D4Contact2Contact2
U+E779ContactinfoContactInfo
U+E8CFContactpresenceContactPresence
U+E8C8CopyCopy
U+E7A8CropCrop
U+E8C6CutCut
U+E74DDeleteDelete
U+E8F0DirectionsDirections
U+E8D8DisableupdatesDisableUpdates
U+E8CDDisconnectdriveDisconnectDrive
U+E8E0DislikeDislike
U+E90EDockbottomDockBottom
U+E90CDockleftDockLeft
U+E90DDockrightDockRight
U+E8A5DocumentDocument
U+E896DownloadDownload
U+E70FEditEdit
U+E899EmojiEmoji
U+E76EEmoji2Emoji2
U+E728FavoritelistFavoriteList
U+E734FavoritestarFavoriteStar
U+E735FavoritestarfillFavoriteStarFill
U+E71CFilterFilter
U+E11AFindlegacyFindLegacy
U+E7C1FlagFlag
U+E8B7FolderFolder
U+E8D2FontFont
U+E8D3FontcolorFontcolor
U+E8E7FontdecreaseFontDecrease
U+E8E8FontincreaseFontIncrease
U+E8E9FontsizeFontSize
U+E72AForwardForward
U+E908FourbarsFourBars
U+E740FullscreenFullScreen
U+E774GlobeGlobe
U+E8ADGoGo
U+E8FCGotostartGoToStart
U+E8D1GototodayGoToToday
U+E778HangupHangup
U+E897HelpHelp
U+E8C5HidebccHideBCC
U+E7E6HighlightHighlight
U+E80FHomeHome
U+E8B5ImportImport
U+E8B6ImportallImportAll
U+E8C9ImportantImportant
U+E8DBItalicItalic
U+E765KeyboardclassicKeyboardClassic
U+E89BLeavechatLeaveChat
U+E8F1LibraryLibrary
U+E8E1LikeLike
U+E8DFLikedislikeLikeDislike
U+E71BLinkLink
U+EA37ListList
U+E81DLocationLocation
U+E715MailMail
U+E8A8MailfillMailFill
U+E89CMailforwardMailForward
U+E8CAMailreplyMailReply
U+E8C2MailreplyallMailReplyAll
U+E912ManageManage
U+E8CEMapdriveMapDrive
U+E707MappinMappin
U+E77CMemoMemo
U+E8BDMessageMessage
U+E720MicrophoneMicrophone
U+E712MoreMore
U+E8DEMovetofolderMoveToFolder
U+E90BMusicinfoMusicInfo
U+E74FMuteMute
U+E8F4NewfolderNewFolder
U+E78BNewwindowNewWindow
U+E893NextNext
U+E905OnebarOneBar
U+E8E5OpenfileOpenFile
U+E8DAOpenlocalOpenLocal
U+E8A0OpenpaneOpenPane
U+E7ACOpenwithOpenWith
U+E8B4OrientationOrientation
U+E7EEOtheruserOtherUser
U+E1CEOutlinestarlegacyOutlineStarLegacy
U+E7C3PagePage
U+E77FPastePaste
U+E769PausePause
U+E716PeoplePeople
U+E8D7PermissionsPermissions
U+E717PhonePhone
U+E780PhonebookPhoneBook
U+E718PinPin
U+E768PlayPlay
U+E8F3PostupdatePostUpdate
U+E8FFPreviewPreview
U+E8A1PreviewlinkPreviewLink
U+E892PreviousPrevious
U+E8D0PriorityPriority
U+E8A6ProtecteddocumentProtectedDocument
U+E8C3ReadRead
U+E7A6RedoRedo
U+E72CRefreshRefresh
U+E8AFRemoteRemote
U+E738RemoveRemove
U+E8ACRenameRename
U+E90FRepairRepair
U+E8EERepeatallRepeatAll
U+E8EDRepeatoneRepeatOne
U+E730ReporthackedReportHacked
U+E8EBReshareReshare
U+E7ADRotateRotate
U+E89ERotatecameraRotateCamera
U+E74ESaveSave
U+E78CSavelocalSaveLocal
U+E8FEScanScan
U+E8B3SelectallSelectAll
U+E724SendSend
U+E7B5SetlockscreenSetLockScreen
U+E97BSettileSetTile
U+E713SettingsSettings
U+E72DShareShare
U+E719ShopShop
U+E8C4ShowbccShowBCC
U+E8BCShowresultsShowResults
U+E8B1ShuffleShuffle
U+E786SlideshowSlideshow
U+E1CFSolidstarlegacySolidStarLegacy
U+E8CBSortSort
U+E71AStopStop
U+E913StreetStreet
U+E8ABSwitchSwitch
U+E8F9SwitchappsSwitchApps
U+E895SyncSync
U+E8F7SyncfolderSyncFolder
U+E8ECTagTag
U+E907ThreebarsThreeBars
U+E7C9TouchpointerTouchPointer
U+E78ATrimTrim
U+E906TwobarsTwoBars
U+E89ATwopageTwoPage
U+E8DCUnderlineUnderline
U+E7A7UndoUndo
U+E8D9UnfavoriteUnFavorite
U+E77AUnpinUnPin
U+E8F6UnsyncfolderUnSyncFolder
U+E74AUpUp
U+E898UploadUpload
U+E8AAVideochatVideoChat
U+E890ViewView
U+E8A9ViewallViewAll
U+E767VolumeVolume
U+E8B8WebcamWebcam
U+E909WorldWorld
U+E904ZerobarsZeroBars
U+E71EZoomZoom
U+E8A3ZoominZoomIn
U+E71FZoomoutZoomOut

 

Battery icons

CodeSymbolEnumCodeSymbolEnum
E996BatteryUnknownBatteryUnknownEC02MobBatteryUnknownMobBatteryUnknown
E850Battery0Battery0EBA0MobBattery0MobBattery0
E851Battery1Battery1EBA1MobBattery1MobBattery1
E852Battery2Battery2EBA2MobBattery2MobBattery2
E853Battery3Battery3EBA3MobBattery3MobBattery3
E854Battery4Battery4EBA4MobBattery4MobBattery4
E855Battery5Battery5EBA5MobBattery5MobBattery5
E856Battery6Battery6EBA6MobBattery6MobBattery6
E857Battery7Battery7EBA7MobBattery7MobBattery7
E858Battery8Battery8EBA8MobBattery8MobBattery8
E859Battery9Battery9EBA9MobBattery9MobBattery9
E83FBattery10Battery10EBA0MobBatter10MobBatter10
E85ABatteryCharging0BatteryCharging0EBABMobBatteryCharging0MobBatteryCharging0
E85BBatteryCharging1BatteryCharging1EBACMobBatteryCharging1MobBatteryCharging1
E85CBatteryCharging2BatteryCharging2EBADMobBatteryCharging2MobBatteryCharging2
E85DBatteryCharging3BatteryCharging3EBAEMobBatteryCharging3MobBatteryCharging3
E85EBatteryCharging4BatteryCharging4EBAFMobBatteryCharging4MobBatteryCharging4
E85FBatteryCharging5BatteryCharging5EBB0MobBatteryCharging5MobBatteryCharging5
E860BatteryCharging6BatteryCharging6EBB1MobBatteryCharging6MobBatteryCharging6
E861BatteryCharging7BatteryCharging7EBB2MobBatteryCharging7MobBatteryCharging7
E862BatteryCharging8BatteryCharging8EBB3MobBatteryCharging8MobBatteryCharging8
E83EBatteryCharging9BatteryCharging9EBB4MobBatteryCharging9MobBatteryCharging9
ea93BatteryCharging10BatteryCharging10EBB5MobBatteryChargin10MobBatteryChargin10
E863BatterySaver0BatterySaver0EBB6MobBatterySaver0MobBatterySaver0
E864BatterySaver1BatterySaver1EBB7MobBatterySaver1MobBatterySaver1
E865BatterySaver2BatterySaver2EBB8MobBatterySaver2MobBatterySaver2
E866BatterySaver3BatterySaver3EBB9MobBatterySaver3MobBatterySaver3
E867BatterySaver4BatterySaver4EBBAMobBatterySaver4MobBatterySaver4
E868BatterySaver5BatterySaver5EBBBMobBatterySaver5MobBatterySaver5
E869BatterySaver6BatterySaver6EBBCMobBatterySaver6MobBatterySaver6
E86ABatterySaver7BatterySaver7EBBDMobBatterySaver7MobBatterySaver7
E86BBatterySaver8BatterySaver8EBBEMobBatterySaver8MobBatterySaver8
EA94BatterySaver9BatterySaver9EBBFMobBatterySaver9MobBatterySaver9
EA95BatterySaver10BatterySaver10EBC0MobBatterySaver10MobBatterySaver10

 

Related topics

For designers
Guidelines for fonts
W3C on which languages are written right-to-left (RTL)?
For developers (XAML)
Symbol enumeration
For developers (HTML)
AppBarIcon enumeration

 

 

Show:
© 2015 Microsoft