Icons

Fabric uses a custom font for its iconography. This font contains glyphs that you can scale, color, and style in any way. You can even flip them for right-to-left localization. To use the icons, combine the base ms-Icon class with a modifier class for the specific icon.

<i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>

Note the aria-hidden attribute, which prevents screen readers from reading the icon. In cases where meaning is conveyed only through the icon, such as an icon-only navigation bar, be sure to apply an aria-label to the button for accessibility.

  • ms-Icon--GlobalNavButton
  • ms-Icon--MapPin
  • ms-Icon--Airplane
  • ms-Icon--Tablet
  • ms-Icon--QuickNote
  • ms-Icon--ChevronDown
  • ms-Icon--ChevronUp
  • ms-Icon--Edit
  • ms-Icon--Add
  • ms-Icon--Cancel
  • ms-Icon--More
  • ms-Icon--Settings
  • ms-Icon--Video
  • ms-Icon--Mail
  • ms-Icon--People
  • ms-Icon--Phone
  • ms-Icon--Pin
  • ms-Icon--Shop
  • ms-Icon--Link
  • ms-Icon--Filter
  • ms-Icon--Zoom
  • ms-Icon--Microphone
  • ms-Icon--Search
  • ms-Icon--Camera
  • ms-Icon--Attach
  • ms-Icon--Send
  • ms-Icon--PageFill
  • ms-Icon--Forward
  • ms-Icon--Back
  • ms-Icon--Refresh
  • ms-Icon--Share
  • ms-Icon--Lock
  • ms-Icon--Blocked
  • ms-Icon--FavoriteStar
  • ms-Icon--FavoriteStarFill
  • ms-Icon--ReadingMode
  • ms-Icon--Remove
  • ms-Icon--Checkbox
  • ms-Icon--CheckboxComposite
  • ms-Icon--CheckboxIndeterminate
  • ms-Icon--CheckMark
  • ms-Icon--BackToWindow
  • ms-Icon--FullScreen
  • ms-Icon--Print
  • ms-Icon--Up
  • ms-Icon--Down
  • ms-Icon--Delete
  • ms-Icon--Save
  • ms-Icon--Sad
  • ms-Icon--SIPMove
  • ms-Icon--EraseTool
  • ms-Icon--GripperTool
  • ms-Icon--Dialpad
  • ms-Icon--PageLeft
  • ms-Icon--PageRight
  • ms-Icon--MultiSelect
  • ms-Icon--Play
  • ms-Icon--Pause
  • ms-Icon--ChevronLeft
  • ms-Icon--ChevronRight
  • ms-Icon--System
  • ms-Icon--Globe
  • ms-Icon--ContactInfo
  • ms-Icon--Unpin
  • ms-Icon--Contact
  • ms-Icon--Memo
  • ms-Icon--Unlock
  • ms-Icon--Calendar
  • ms-Icon--SaveAs
  • ms-Icon--Filters
  • ms-Icon--Contrast
  • ms-Icon--Rotate
  • ms-Icon--PanoIndicator
  • ms-Icon--Warning
  • ms-Icon--Financial
  • ms-Icon--ShoppingCart
  • ms-Icon--Flag
  • ms-Icon--Move
  • ms-Icon--Page
  • ms-Icon--TouchPointer
  • ms-Icon--Merge
  • ms-Icon--Admin
  • ms-Icon--TVMonitor
  • ms-Icon--Car
  • ms-Icon--EatDrink
  • ms-Icon--LocationCircle
  • ms-Icon--Home
  • ms-Icon--SwitcherStartEnd
  • ms-Icon--IncidentTriangle
  • ms-Icon--MapDirections
  • ms-Icon--Location
  • ms-Icon--Work
  • ms-Icon--Recent
  • ms-Icon--LocationDot
  • ms-Icon--News
  • ms-Icon--Chat
  • ms-Icon--Group
  • ms-Icon--View
  • ms-Icon--Clear
  • ms-Icon--Sync
  • ms-Icon--Download
  • ms-Icon--Help
  • ms-Icon--Upload
  • ms-Icon--Emoji
  • ms-Icon--ClosePane
  • ms-Icon--OpenPane
  • ms-Icon--PreviewLink
  • ms-Icon--Bookmarks
  • ms-Icon--Document
  • ms-Icon--ProtectedDocument
  • ms-Icon--OpenInNewWindow
  • ms-Icon--MailFill
  • ms-Icon--Rename
  • ms-Icon--Folder
  • ms-Icon--Picture
  • ms-Icon--ShowResults
  • ms-Icon--Message
  • ms-Icon--CalendarDay
  • ms-Icon--CalendarWeek
  • ms-Icon--MailReplyAll
  • ms-Icon--Read
  • ms-Icon--PaymentCard
  • ms-Icon--Copy
  • ms-Icon--Important
  • ms-Icon--MailReply
  • ms-Icon--Sort
  • ms-Icon--GotoToday
  • ms-Icon--Font
  • ms-Icon--FontColor
  • ms-Icon--FolderFill
  • ms-Icon--Permissions
  • ms-Icon--DisableUpdates
  • ms-Icon--Italic
  • ms-Icon--Underline
  • ms-Icon--Bold
  • ms-Icon--MoveToFolder
  • ms-Icon--OpenFile
  • ms-Icon--FontDecrease
  • ms-Icon--FontIncrease
  • ms-Icon--CellPhone
  • ms-Icon--Tag
  • ms-Icon--Library
  • ms-Icon--PostUpdate
  • ms-Icon--NewFolder
  • ms-Icon--UnsyncFolder
  • ms-Icon--SyncFolder
  • ms-Icon--BlockContact
  • ms-Icon--AddFriend
  • ms-Icon--BulletedList
  • ms-Icon--Preview
  • ms-Icon--DockLeft
  • ms-Icon--DockRight
  • ms-Icon--Repair
  • ms-Icon--RadioBullet
  • ms-Icon--Stopwatch
  • ms-Icon--Clock
  • ms-Icon--AlarmClock
  • ms-Icon--Hospital
  • ms-Icon--Timer
  • ms-Icon--FullCircleMask
  • ms-Icon--LocationFill
  • ms-Icon--ChromeMinimize
  • ms-Icon--ChromeClose
  • ms-Icon--Accept
  • ms-Icon--Handwriting
  • ms-Icon--StackIndicator
  • ms-Icon--Completed
  • ms-Icon--Label
  • ms-Icon--FlickDown
  • ms-Icon--FlickUp
  • ms-Icon--FlickLeft
  • ms-Icon--FlickRight
  • ms-Icon--LightningBolt
  • ms-Icon--Info
  • ms-Icon--CalculatorAddition
  • ms-Icon--CalculatorSubtract
  • ms-Icon--PrintfaxPrinterFile
  • ms-Icon--ChevronUpSmall
  • ms-Icon--ChevronDownSmall
  • ms-Icon--ChevronLeftSmall
  • ms-Icon--ChevronRightSmall
  • ms-Icon--ChevronUpMed
  • ms-Icon--ChevronDownMed
  • ms-Icon--ChevronLeftMed
  • ms-Icon--ChevronRightMed
  • ms-Icon--ChromeBack
  • ms-Icon--PresenceChickletVideo
  • ms-Icon--Reply
  • ms-Icon--DoubleChevronDown
  • ms-Icon--DoubleChevronLeftMed
  • ms-Icon--CaretHollow
  • ms-Icon--CaretSolid
  • ms-Icon--Pinned
  • ms-Icon--PinnedFill
  • ms-Icon--Chart
  • ms-Icon--RevToggleKey
  • ms-Icon--RightDoubleQuote
  • ms-Icon--Sunny
  • ms-Icon--Ringer
  • ms-Icon--PDF
  • ms-Icon--SortLines
  • ms-Icon--Ribbon
  • ms-Icon--MultiSelectMirrored
  • ms-Icon--Broom
  • ms-Icon--MusicInCollectionFill
  • ms-Icon--List
  • ms-Icon--Asterisk
  • ms-Icon--ErrorBadge
  • ms-Icon--CircleRing
  • ms-Icon--CircleFill
  • ms-Icon--BookmarksMirrored
  • ms-Icon--BulletedListMirrored
  • ms-Icon--CaretHollowMirrored
  • ms-Icon--CaretSolidMirrored
  • ms-Icon--ChromeBackMirrored
  • ms-Icon--ClosePaneMirrored
  • ms-Icon--DockLeftMirrored
  • ms-Icon--DoubleChevronLeftMedMirrored
  • ms-Icon--HelpMirrored
  • ms-Icon--ListMirrored
  • ms-Icon--MailReplyMirrored
  • ms-Icon--MailReplyAllMirrored
  • ms-Icon--OpenPaneMirrored
  • ms-Icon--ShowResultsMirrored
  • ms-Icon--Lightbulb
  • ms-Icon--StatusTriangle
  • ms-Icon--EmojiNeutral
  • ms-Icon--EmojiDisappointed
  • ms-Icon--HomeSolid
  • ms-Icon--Articles
  • ms-Icon--DietPlanNotebook
  • ms-Icon--DrugLookUp
  • ms-Icon--Running
  • ms-Icon--CirclePlus
  • ms-Icon--Coffee
  • ms-Icon--Money
  • ms-Icon--StockDown
  • ms-Icon--StockUp
  • ms-Icon--Soccer
  • ms-Icon--AutoRacing
  • ms-Icon--Drop
  • ms-Icon--Heart
  • ms-Icon--HeartFill
  • ms-Icon--Door
  • ms-Icon--DoubleBookmark
  • ms-Icon--Certificate
  • ms-Icon--CloudDownload
  • ms-Icon--WindDirection
  • ms-Icon--CSS
  • ms-Icon--JS
  • ms-Icon--Section
  • ms-Icon--ToggleFilled
  • ms-Icon--ToggleBorder
  • ms-Icon--SliderThumb
  • ms-Icon--ToggleThumb
  • ms-Icon--Documentation
  • ms-Icon--Badge
  • ms-Icon--AlbumRemove
  • ms-Icon--MessageFill
  • ms-Icon--TabletSelected
  • ms-Icon--MobileSelected
  • ms-Icon--LaptopSelected
  • ms-Icon--TVMonitorSelected
  • ms-Icon--DeveloperTools
  • ms-Icon--InsertTextBox
  • ms-Icon--Event
  • ms-Icon--Cake
  • ms-Icon--Tiles
  • ms-Icon--Org
  • ms-Icon--PartyLeader
  • ms-Icon--DRM
  • ms-Icon--CloudAdd
  • ms-Icon--AppIconDefault
  • ms-Icon--Embed
  • ms-Icon--Teamwork
  • ms-Icon--PeopleAdd
  • ms-Icon--Glasses
  • ms-Icon--Shield
  • ms-Icon--Header
  • ms-Icon--PageAdd
  • ms-Icon--NumberedList
  • ms-Icon--Glimmer
  • ms-Icon--SkypeCheck
  • ms-Icon--SkypeClock
  • ms-Icon--SkypeMinus