Office UI Fabric
The front-end CSS framework for building experiences for Office and Office 365.
Developed by Organization:OfficeDev
Used languages: CSS(464.95 kB), JavaScript(54.08 kB), HTML(18.50 kB), TypeScript(14.63 kB)
| Written | Sass Less JS |
| Templates | |
| Documents | |
| Framework design | metro |
| Feature type | full |
Current version
11.0.0
283.77 kB
Last release
Oct 17, 2019
Created at May 20, 2015
Last commit
Oct 17, 2019
Open Issues
44
Forks
441
Star
3,313
Watchers
250
Release Notes on October 17, 2019 for 11.0.0
This release includes the icon changes captured in PR #1195 . While that change is mostly minor additions and changes to the icon font, it removes 4 icons that are no longer supported, so it's technically a breaking change if you were using those icons.
Here're the release notes adapted from that PR.
Update icons to v3.54
This release updates the base Fabric Core icon set to more closely match Fabric React's. The big news here is that this adds 356 new icons to Fabric Core. There may be some additional visual tweaks to existing icons as well, to match the latest design intent in Fabric React.
First, let's review what else has been changed.
No more .woff2 and .ttf support
After the last release of the icons, there were a number of changes to the icon font/production toolchain that resulted in some different outputs. Today, that means that .woff2 and .tt files are not included. These may be restored in a future addition, but for now, .woff is the only format that will be provided.
Renamed icons
Two icons have been renamed from their original versions. These include:
| Old name | New name | |---|---| | OneDrive | OneDriveLogo | | ToggleOff | ToggleRight |
The original names have been retained in the definitions, variables, mixins, and classnames to support backwards compatibility.
Removed icons (breaking changes)
Four icons have been removed that are no longer supported for public distribution. These are considered a breaking change as they will affect the build and runtime usage of anyone using Fabric Core <=10 with any of these icons today.
Icons removed include:
- ExternalGit
- GitFork
- MTMLogo
- NonprofitLogo32
New icons
356 new icons have been added to Fabric Core. These represent requests from dozens of Microsoft product teams and other developers using Fabric Core.
- AccessibiltyChecker
- AccountActivity
- AccountBrowser
- ActionCenter
- AddHome
- AddIn
- AddLink
- AddReaction
- AddToShoppingList
- AddWork
- AlertSettings
- AllCurrency
- AppIconDefaultAdd
- AppIconDefaultList
- AuthenticatorApp
- BacklogList
- Bank
- BarChartVerticalEdit
- BarChartVerticalFill
- BarChartVerticalFilter
- BarChartVerticalFilterSolid
- Blocked2Solid
- BlockedSiteSolid12
- Blog
- BookAnswers
- BookmarkReport
- Brush
- BuildDefinition
- BulletedListBullet
- BulletedListBulletMirrored
- BulletedListText
- BulletedListTextMirrored
- BulletedTreeList
- BullseyeTarget
- BullseyeTargetEdit
- ButtonControl
- CalculatorPercentage
- CalendarYear
- Calories
- CampaignTemplate
- ChangeEntitlements
- ChartTemplate
- ChatBot
- CheckboxFill
- CheckListCheck
- CheckListCheckMirrored
- CheckListText
- CheckListTextMirrored
- Childof
- ChromeFullScreen
- ChromeRestore
- CityNext2
- ClearFormattingA
- ClearFormattingEraser
- ClearSelection
- ClearSelectionMirrored
- ClipboardList
- ClipboardListMirrored
- CloudImportExport
- ColumnVerticalSection
- ColumnVerticalSectionEdit
- CommentActive
- CommentSolid
- Compare
- ComplianceAudit
- ConnectVirtualMachine
- ContactHeart
- ContactList
- Coupon
- CRMCustomerInsightsApp
- CRMProcesses
- CRMServices
- CubeShape
- CustomizeToolbar
- D365TalentHRCore
- D365TalentInsight
- D365TalentLearn
- DatabaseSync
- Dataflows
- DataflowsLink
- DataManagementSettings
- Decimals
- DecreaseIndentArrow
- DecreaseIndentArrowMirrored
- DecreaseIndentText
- DecreaseIndentTextMirrored
- DefenderTVM
- DependencyAdd
- DependencyRemove
- Devices2
- DiagnosticDataBarTooltip
- Diamond
- DisconnectVirtualMachine
- DistributeDown
- DoubleDownArrow
- DuplicateRow
- EaseOfAccess
- eDiscovery
- EditCreate
- EntitlementPolicy
- EntitlementRedemption
- Event12
- EventDateMissed12
- EventToDoLogo
- Eyedropper
- EyeShadow
- FabricFolderConfirm
- FabricNetworkFolder
- FabricTextHighlight
- FabricTextHighlightComposite
- FabricUserFolder
- FileRequest
- FilterSettings
- FitPage
- FitWidth
- Flashlight
- FlowChart
- Flower
- Focus
- Footer
- Forum
- FrontCamera
- FunnelChart
- Game
- GenericScanFilled
- GIF
- GlobalNavButtonActive
- Go
- GoMirrored
- GoToDashboard
- GreetingCard
- GripperDotsVertical
- GroupList
- Header
- Hide3
- HistoricalWeather
- HomeGroup
- HomeVerify
- HorizontalTabKey
- IgnoreConversation
- ImportAllMirrored
- IncomingCall
- IncreaseIndentArrow
- IncreaseIndentArrowMirrored
- IncreaseIndentText
- IncreaseIndentTextMirrored
- InformationBarriers
- InkingTool
- Insert
- Installation
- InternalInvestigation
- KeyboardClassic
- KnowledgeArticle
- Link12
- LinkedDatabase
- Lock12
- M365InvoicingLogo
- MailAttached
- MailOptions
- MailSchedule
- Manufacturing
- MapLayers
- MarkAsProtected
- MedalSolid
- Media
- MicOff2
- MicrosoftTranslatorLogo
- MicrosoftTranslatorLogoBlue
- MicrosoftTranslatorLogoGreen
- MiniContractMirrored
- MiniExpandMirrored
- ModelingView
- MountainClimbing
- MuteChat
- NewMail
- NumberedListNumber
- NumberedListNumberMirrored
- NumberedListText
- NumberedListTextMirrored
- NumberSymbol
- OfficeChat
- OfficeChatSolid
- OfflineStorage
- Onboarding
- OneDriveLogo
- OpenEnrollment
- OpenInNewTab
- OpenWith
- OpenWithMirrored
- Orientation2
- PageArrowRight
- PageData
- PageHeader
- PageHeaderEdit
- PageLink
- PageList
- PageListFilter
- PageShared
- PassiveAuthentication
- PasswordField
- PenWorkspace
- Photo
- Photo2Fill
- PhotoVideoMedia
- PinnedSolid
- PinSolid12
- PinSolidOff12
- PlainText
- PlaybackRate1x
- PlayReverse
- PlayReverseResume
- PollResults
- PowerAppsCDS
- PowerBILogo16
- PowerBILogoBackplate16
- PowerShell
- PowerShell2
- Presentation
- Presentation12
- ProductCatalog
- ProductionFloorManagement
- ProductList
- ProductRelease
- ProductVariant
- ProjectDocument
- PromotedDatabase
- PublishContent
- QandA
- QandAMirror
- QRCode
- QuadColumn
- Quantity
- RealEstate
- RecruitmentManagement
- RectangleShape
- Relationship
- ReleaseDefinition
- ReleaseGate
- ReleaseGateCheck
- ReleaseGateError
- ReminderTime
- RemoveFromShoppingList
- RemoveFromTrash
- RemoveLinkChain
- RemoveLinkX
- RepeatAll
- RepeatOne
- ReportDocument
- ReportLock
- ReportWarning
- Rerun
- ReservationOrders
- ResetDevice
- ResponsesMenu
- ReturnKey
- RingerSolid
- Rotate90Clockwise
- Rotate90CounterClockwise
- SaveTemplate
- SaveToMobile
- ScaleVolume
- ScatterChart
- SchoolDataSyncLogo
- ScreenCast
- SearchData
- SearchNearby
- SecondaryNav
- SeeDo
- ShakeDevice
- Shapes
- SharepointAppIcon16
- ShieldAlert
- Shirt
- ShowGrid
- ShowTimeAs
- Signin
- SkypeArrow
- SkypeCircleArrow
- SkypeCircleSlash
- SkypeSlash
- Slideshow
- SmartGlassRemote
- SnapToGrid
- SpecialEvent
- StackColumnChart
- StackedColumnChart2
- StackedColumnChart2Fill
- StatusCircleBlock
- StatusCircleSync
- StickyNotesOutlineAppIcon
- StickyNotesSolidAppIcon
- StorageOptical
- Street
- StreetsideSplitMinimize
- SyncStatus
- SyncStatusSolid
- TabCenter
- TableComputed
- TableGroup
- TableLink
- TabOneColumn
- TabThreeColumn
- TabTwoColumn
- TagSolid
- TagUnknown
- TagUnknown12
- TagUnknown12Mirror
- TagUnknownMirror
- TeamsLogo16
- TeamsLogoFill16
- Telemarketer
- TimePicker
- ToDoLogoOutline
- ToggleLeft
- ToggleRight
- Toolbox
- Translate
- TriangleShape
- Trim
- TrimEnd
- TrimStart
- TripleColumnWide
- Uneditable2
- Uneditable2Mirrored
- UnpublishContent
- UnSetColor
- UnstackSelected
- Untag
- UpgradeAnalysis
- USB
- UserGauge
- UserOptional
- UserWarning
- Variable2
- VerifiedBrand
- VerifiedBrandSolid
- Video360Generic
- VideoLightOff
- ViewOriginal
- VisioDiagramSync
- VisuallyImpaired
- WarningSolid
- WavingHand
- WebAppBuilderFragment
- WebAppBuilderFragmentCreate
- WebAppBuilderModule
- WebAppBuilderSlot
- Webcam2
- Webcam2Off
- WebComponents
- WebTemplate
- Wheelchair
- WifiWarning4
- WorkItemAlert
- ZoomOut
- ZoomToFit