Skip to content

@Jahnp Jahnp released this Oct 16, 2019

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.

  1. AccessibiltyChecker
  2. AccountActivity
  3. AccountBrowser
  4. ActionCenter
  5. AddHome
  6. AddIn
  7. AddLink
  8. AddReaction
  9. AddToShoppingList
  10. AddWork
  11. AlertSettings
  12. AllCurrency
  13. AppIconDefaultAdd
  14. AppIconDefaultList
  15. AuthenticatorApp
  16. BacklogList
  17. Bank
  18. BarChartVerticalEdit
  19. BarChartVerticalFill
  20. BarChartVerticalFilter
  21. BarChartVerticalFilterSolid
  22. Blocked2Solid
  23. BlockedSiteSolid12
  24. Blog
  25. BookAnswers
  26. BookmarkReport
  27. Brush
  28. BuildDefinition
  29. BulletedListBullet
  30. BulletedListBulletMirrored
  31. BulletedListText
  32. BulletedListTextMirrored
  33. BulletedTreeList
  34. BullseyeTarget
  35. BullseyeTargetEdit
  36. ButtonControl
  37. CalculatorPercentage
  38. CalendarYear
  39. Calories
  40. CampaignTemplate
  41. ChangeEntitlements
  42. ChartTemplate
  43. ChatBot
  44. CheckboxFill
  45. CheckListCheck
  46. CheckListCheckMirrored
  47. CheckListText
  48. CheckListTextMirrored
  49. Childof
  50. ChromeFullScreen
  51. ChromeRestore
  52. CityNext2
  53. ClearFormattingA
  54. ClearFormattingEraser
  55. ClearSelection
  56. ClearSelectionMirrored
  57. ClipboardList
  58. ClipboardListMirrored
  59. CloudImportExport
  60. ColumnVerticalSection
  61. ColumnVerticalSectionEdit
  62. CommentActive
  63. CommentSolid
  64. Compare
  65. ComplianceAudit
  66. ConnectVirtualMachine
  67. ContactHeart
  68. ContactList
  69. Coupon
  70. CRMCustomerInsightsApp
  71. CRMProcesses
  72. CRMServices
  73. CubeShape
  74. CustomizeToolbar
  75. D365TalentHRCore
  76. D365TalentInsight
  77. D365TalentLearn
  78. DatabaseSync
  79. Dataflows
  80. DataflowsLink
  81. DataManagementSettings
  82. Decimals
  83. DecreaseIndentArrow
  84. DecreaseIndentArrowMirrored
  85. DecreaseIndentText
  86. DecreaseIndentTextMirrored
  87. DefenderTVM
  88. DependencyAdd
  89. DependencyRemove
  90. Devices2
  91. DiagnosticDataBarTooltip
  92. Diamond
  93. DisconnectVirtualMachine
  94. DistributeDown
  95. DoubleDownArrow
  96. DuplicateRow
  97. EaseOfAccess
  98. eDiscovery
  99. EditCreate
  100. EntitlementPolicy
  101. EntitlementRedemption
  102. Event12
  103. EventDateMissed12
  104. EventToDoLogo
  105. Eyedropper
  106. EyeShadow
  107. FabricFolderConfirm
  108. FabricNetworkFolder
  109. FabricTextHighlight
  110. FabricTextHighlightComposite
  111. FabricUserFolder
  112. FileRequest
  113. FilterSettings
  114. FitPage
  115. FitWidth
  116. Flashlight
  117. FlowChart
  118. Flower
  119. Focus
  120. Footer
  121. Forum
  122. FrontCamera
  123. FunnelChart
  124. Game
  125. GenericScanFilled
  126. GIF
  127. GlobalNavButtonActive
  128. Go
  129. GoMirrored
  130. GoToDashboard
  131. GreetingCard
  132. GripperDotsVertical
  133. GroupList
  134. Header
  135. Hide3
  136. HistoricalWeather
  137. HomeGroup
  138. HomeVerify
  139. HorizontalTabKey
  140. IgnoreConversation
  141. ImportAllMirrored
  142. IncomingCall
  143. IncreaseIndentArrow
  144. IncreaseIndentArrowMirrored
  145. IncreaseIndentText
  146. IncreaseIndentTextMirrored
  147. InformationBarriers
  148. InkingTool
  149. Insert
  150. Installation
  151. InternalInvestigation
  152. KeyboardClassic
  153. KnowledgeArticle
  154. Link12
  155. LinkedDatabase
  156. Lock12
  157. M365InvoicingLogo
  158. MailAttached
  159. MailOptions
  160. MailSchedule
  161. Manufacturing
  162. MapLayers
  163. MarkAsProtected
  164. MedalSolid
  165. Media
  166. MicOff2
  167. MicrosoftTranslatorLogo
  168. MicrosoftTranslatorLogoBlue
  169. MicrosoftTranslatorLogoGreen
  170. MiniContractMirrored
  171. MiniExpandMirrored
  172. ModelingView
  173. MountainClimbing
  174. MuteChat
  175. NewMail
  176. NumberedListNumber
  177. NumberedListNumberMirrored
  178. NumberedListText
  179. NumberedListTextMirrored
  180. NumberSymbol
  181. OfficeChat
  182. OfficeChatSolid
  183. OfflineStorage
  184. Onboarding
  185. OneDriveLogo
  186. OpenEnrollment
  187. OpenInNewTab
  188. OpenWith
  189. OpenWithMirrored
  190. Orientation2
  191. PageArrowRight
  192. PageData
  193. PageHeader
  194. PageHeaderEdit
  195. PageLink
  196. PageList
  197. PageListFilter
  198. PageShared
  199. PassiveAuthentication
  200. PasswordField
  201. PenWorkspace
  202. Photo
  203. Photo2Fill
  204. PhotoVideoMedia
  205. PinnedSolid
  206. PinSolid12
  207. PinSolidOff12
  208. PlainText
  209. PlaybackRate1x
  210. PlayReverse
  211. PlayReverseResume
  212. PollResults
  213. PowerAppsCDS
  214. PowerBILogo16
  215. PowerBILogoBackplate16
  216. PowerShell
  217. PowerShell2
  218. Presentation
  219. Presentation12
  220. ProductCatalog
  221. ProductionFloorManagement
  222. ProductList
  223. ProductRelease
  224. ProductVariant
  225. ProjectDocument
  226. PromotedDatabase
  227. PublishContent
  228. QandA
  229. QandAMirror
  230. QRCode
  231. QuadColumn
  232. Quantity
  233. RealEstate
  234. RecruitmentManagement
  235. RectangleShape
  236. Relationship
  237. ReleaseDefinition
  238. ReleaseGate
  239. ReleaseGateCheck
  240. ReleaseGateError
  241. ReminderTime
  242. RemoveFromShoppingList
  243. RemoveFromTrash
  244. RemoveLinkChain
  245. RemoveLinkX
  246. RepeatAll
  247. RepeatOne
  248. ReportDocument
  249. ReportLock
  250. ReportWarning
  251. Rerun
  252. ReservationOrders
  253. ResetDevice
  254. ResponsesMenu
  255. ReturnKey
  256. RingerSolid
  257. Rotate90Clockwise
  258. Rotate90CounterClockwise
  259. SaveTemplate
  260. SaveToMobile
  261. ScaleVolume
  262. ScatterChart
  263. SchoolDataSyncLogo
  264. ScreenCast
  265. SearchData
  266. SearchNearby
  267. SecondaryNav
  268. SeeDo
  269. ShakeDevice
  270. Shapes
  271. SharepointAppIcon16
  272. ShieldAlert
  273. Shirt
  274. ShowGrid
  275. ShowTimeAs
  276. Signin
  277. SkypeArrow
  278. SkypeCircleArrow
  279. SkypeCircleSlash
  280. SkypeSlash
  281. Slideshow
  282. SmartGlassRemote
  283. SnapToGrid
  284. SpecialEvent
  285. StackColumnChart
  286. StackedColumnChart2
  287. StackedColumnChart2Fill
  288. StatusCircleBlock
  289. StatusCircleSync
  290. StickyNotesOutlineAppIcon
  291. StickyNotesSolidAppIcon
  292. StorageOptical
  293. Street
  294. StreetsideSplitMinimize
  295. SyncStatus
  296. SyncStatusSolid
  297. TabCenter
  298. TableComputed
  299. TableGroup
  300. TableLink
  301. TabOneColumn
  302. TabThreeColumn
  303. TabTwoColumn
  304. TagSolid
  305. TagUnknown
  306. TagUnknown12
  307. TagUnknown12Mirror
  308. TagUnknownMirror
  309. TeamsLogo16
  310. TeamsLogoFill16
  311. Telemarketer
  312. TimePicker
  313. ToDoLogoOutline
  314. ToggleLeft
  315. ToggleRight
  316. Toolbox
  317. Translate
  318. TriangleShape
  319. Trim
  320. TrimEnd
  321. TrimStart
  322. TripleColumnWide
  323. Uneditable2
  324. Uneditable2Mirrored
  325. UnpublishContent
  326. UnSetColor
  327. UnstackSelected
  328. Untag
  329. UpgradeAnalysis
  330. USB
  331. UserGauge
  332. UserOptional
  333. UserWarning
  334. Variable2
  335. VerifiedBrand
  336. VerifiedBrandSolid
  337. Video360Generic
  338. VideoLightOff
  339. ViewOriginal
  340. VisioDiagramSync
  341. VisuallyImpaired
  342. WarningSolid
  343. WavingHand
  344. WebAppBuilderFragment
  345. WebAppBuilderFragmentCreate
  346. WebAppBuilderModule
  347. WebAppBuilderSlot
  348. Webcam2
  349. Webcam2Off
  350. WebComponents
  351. WebTemplate
  352. Wheelchair
  353. WifiWarning4
  354. WorkItemAlert
  355. ZoomOut
  356. ZoomToFit
Assets 3

@Jahnp Jahnp released this May 13, 2019

New

  • #1172 Adds the new, updated brand icons, including the new Office App Icons and the Fluent File Type Icons
Assets 3

@Jahnp Jahnp released this Apr 16, 2019

This release updates Fabric to include a new set of styles that support the Fluent Design System.

What this release includes

The Fluent style updates include new colors, type styles, depths (shadows), and motion helpers. Here are details on some of the style updates:

  • Colors are updated to include neutrals that are warmer and more approachable. There are also new color palettes for different types of use cases, like Personas, Communication, and a shared set for common components like personas, sites, and more.
  • Typography has been updated to a new common type ramp that is or will be in use across core Microsoft apps, leveraging the latest type weights from Fluent.
  • Depth styles now include a common set of shadow levels from Fluent, which can be applied to context menus, dialogs, panels, and other surfaces.
  • Motion styles have been updated to match the latest Fluent styles.

Note: this release is also backwards-compatible with 9.x classes, meaning it does not remove any existing class names. We recognize that most Fabric Core users are likely using these classes, so we've retained them in .MDL2.scss files. We will monitor their usage to see if it makes sense to remove them in the future.

What this release does not include

We aren't including the new Office App Icons in this release (#1162). We're still working on some details to release these soon, but in the meantime, we want to get the base Fluent styles out the door.

What is Fluent?

Fluent is Microsoft's Design System, which includes the following principles:

  • Adaptive: Experiences feel natural on each device
  • Empathetic: Experiences are intuitive and powerful
  • Beautiful: Experiences are engaging and immersive

You can read more about these principles on the Fluent Design System website.

Breaking Changes

To cleanly support the new Fluent styles, the contents of some .scss files no longer include their MDL2 styles, e.g. _Animation.scss. Those have been moved to *.MDL2.scss files, e.g. _Animation.MDL2.scss. While this is not technically a breaking change if you're using Fabric.css, it will be breaking if you are using any of the MDL2 variables & mixins from the below files in 9.x.

9.x filename 10.x filename
_Color.Variables.scss _Color.Variables.MDL2.scss
_Font.Variables.scss _Font.Variables.MDL2.scss
_Color.Mixins.scss _Color.Mixins.MDL2.scss
_Font.Mixins.scss _Font.Mixins.MDL2.scss
_Animation.scss _Animation.MDL2.scss
_Font.scss _Font.MDL2.scss

If you are consuming these .scss files directly downstream, you may need to switch to the MDL2 variants to include those classes in your compiled SCSS. To use the MDL2 variables and mixins, consider importing dist/_References.scss, which imports all Fluent and MDL2 .scss files.

What else is new

Deprecated

  • The MDL2 styles are deprecated in the 10.x releases, but for backwards-compatibility will not be removed until a future date.
Assets 3

@mikewheaton mikewheaton released this Sep 18, 2018

Fixed

  • #1133 Avoids a potential bug with the responsive classes by reducing the gap between breakpoints.
  • #1129 Reduces the specificity of the ms-box-shadow() mixin.
Assets 3

@mikewheaton mikewheaton released this Mar 21, 2018

Fixed

  • #1107 Removes unused files that were remnants from the old Office UI Fabric, before it was split into Core (this project) and the JS components.

Changed

  • #1106 Changes the primary theme color very slightly from #0078d7 to #0078d4.
Assets 3

@mikewheaton mikewheaton released this Mar 13, 2018

New

  • #1099 Updates the icon font to version 2.68, adding 27 new icons.
  • #1103 Adds mixins and classes for the neutralQuaternary and neutralQuaternaryAlt colors.

Documentation

  • #1098 Cleans up the README.
Assets 3

@mikewheaton mikewheaton released this Jan 26, 2018

New

  • #1091, #1093 Updates to the latest icon font, adding a total of 27 new icons.

Fixed

  • #1089 Corrects the font name for three localized fonts to ensure they are loaded as expected.

Changed

  • #1090 Uses the latest document icons for the BrandIcon component.
Assets 3

@mikewheaton mikewheaton released this Jan 3, 2018

Fixed

  • #1083 Fixes a bug (introduced in version 9.3.0 by #1070) where animation and transition classes weren't working on many browsers, due to the incorrect usage of a media query that is not yet widely available. This fix restores animation for most users while continuing to remove it for those who prefer reduced motion and are on supported browsers.

  • #1082 Updates the license for this repository to point to the correct location of the Fabric assets license.

Assets 3

@mikewheaton mikewheaton released this Dec 5, 2017

New

  • #1069 Adds a new ms-background-position() mixin, which outputs left-to-right and right-to-left styles for the background-position property.
  • #1071, #1074 Add 26 new icons. 🌶
  • #1070 Improves accessibility by wrapping animations in the prefers-reduced-motion media query. This allows users to opt-out of animations, which is especially important for those with vestibular disorders. You can read more about the media query on CSS-Tricks.

Deprecated

  • #1074 Deprecates the HumanResources icon. This will be removed in an upcoming major release.

Documentation

  • #1065 Updates the NuGet package documentation to comply with Microsoft's new publishing policies.
Assets 3

@mikewheaton mikewheaton released this Nov 14, 2017

New

  • #1060: Updates to version 2.55 of the icon font, adding 55 new icons. 🎉

Fixed

  • #1057: Fixed a typo in the icons.json data file. 🖊
Assets 3
You can’t perform that action at this time.