Specifying the icon of a SharePoint Framework Client-Side Web Part

For every Client-Side Web Part that we build using the SharePoint Framework we can specify the icon to make it easily distinguishable amongst other Web Parts visible in the toolbox.

Specifying the icon of a SharePoint Framework Client-Side Web Part

When building Web Parts, providing them with an icon helps users find it amongst other Web Parts. Icons of Client-Side Web Parts are set in the Web Part manifest preconfiguredEntries section and there are two ways to set the Web Part icon.

Specifying the Client-Side Web Part icon using an image

One way to set an icon of a Client-Side Web Part is by using a custom image. Using the iconImageUrl property you should specify an absolute URL to an image of 38x38px:

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",

  "id": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b",
  "componentType": "WebPart",
  "version": "0.0.1",
  "manifestVersion": 2,

  "preconfiguredEntries": [{
    "groupId": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b",
    "group": { "default": "Default" },
    "title": { "default": "Weather" },
    "description": { "default": "Shows weather in the given location" },
    "iconImageUrl": "https://contoso.com/weather.png",
    "properties": {
      "location": ""
    }
  }]
}

Specifying the Client-Side Web Part icon using a font icon

Another way to set the icon of a Client-Side Web Part is by specifying the name of the font icon using the officeFabricIconFontName.

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",

  "id": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b",
  "componentType": "WebPart",
  "version": "0.0.1",
  "manifestVersion": 2,

  "preconfiguredEntries": [{
    "groupId": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b",
    "group": { "default": "Default" },
    "title": { "default": "Weather" },
    "description": { "default": "Shows weather in the given location" },
    "officeFabricIconFontName": "Sunny",
    "properties": {
      "location": ""
    }
  }]
}

Weather Web Part using a custom icon displayed in the SharePoint Workbench Toolbox

Despite its name, the officeFabricIconFontName property doesn’t support all icons listed at http://dev.office.com/fabric/styles. Here is the list of all icons that you can use with the officeFabricIconFontName property.

  • Add
  • AddGroup
  • AlignCenter
  • AlignLeft
  • AlignRight
  • Attach
  • Back
  • BackToWindow
  • BlowingSnow
  • Bold
  • BulletedList
  • Calendar
  • Camera
  • Cancel
  • Chart
  • CheckMark
  • ChevronLeft
  • ChevronRight
  • CirclePlus
  • Clear
  • ClearFormatting
  • ClearNight
  • CloudWeather
  • Cloudy
  • Completed
  • CompletedSolid
  • Delete
  • DocLibrary
  • Duststorm
  • Edit
  • EditMirrored
  • Embed
  • Emoji2
  • ExcelLogo
  • FacebookLogo
  • FavoriteStar
  • FavoriteStarFill
  • Filter
  • Financial
  • Fog
  • Folder
  • FolderOpen
  • Font
  • FontStyleSerif
  • Forward
  • Freezing
  • Frigid
  • FullScreen
  • Globe
  • Group
  • HailDay
  • HailNight
  • Header
  • Italic
  • Link
  • Message
  • MobileSelected
  • More
  • MultiSelect
  • Nav2DMapView
  • News
  • NumberedList
  • OfficeVideoLogo
  • OneNoteLogo
  • OpenFile
  • OpenWith
  • Org
  • Page
  • PageAdd
  • PartlyCloudyDay
  • PartlyCloudyNight
  • Photo2
  • Photo2Add
  • Photo2Remove
  • PhotoCollection
  • Picture
  • Play
  • PowerApps
  • PowerBILogo
  • PowerPointLogo
  • Precipitation
  • Preview
  • Rain
  • RainShowersDay
  • RainShowersNight
  • RainSnow
  • Recent
  • Refresh
  • Remove
  • RemoveLink
  • Reshare
  • Ribbon
  • RightDoubleQuote
  • Save
  • Search
  • Settings
  • Share
  • SharepointLogo
  • SIPMove
  • Snow
  • SnowShowerDay
  • SnowShowerNight
  • Squalls
  • StackIndicator
  • Sunny
  • SwayLogo
  • Sync
  • System
  • Tablet
  • TabletSelected
  • Teamwork
  • Thunderstorms
  • Tiles
  • TVMonitorSelected
  • TwitterLogo
  • Underline
  • Unfavorite
  • Video
  • View
  • VisioLogo
  • Webcam
  • WordLogo
  • WorldClock
  • YammerLogo
  • Zoom
  • ZoomIn
  • ZoomOut

And here is how they look like:

Overview of icons supported by SharePoint Framework Client-Side Web Parts

In case you want to have a closer look at how the icons look like I’ve built a sample Web Part that shows them. You can find the Web Part on GitHub at https://github.com/waldekmastykarz/spfx-iconfontnames-webpart.

One icon to rule them all

The icon specified using the officeFabricIconFontName takes precedence over the image icon set using the iconImageUrl property. In case you specify both values, the icon from the officeFabricIconFontName property will be used.

Others found also helpful: