BLOG > ARTICLE

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

2 min read

SharePointFramework

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:

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 theofficeFabricIconFontName.

officefabriciconfontname

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 theofficeFabricIconFontName 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:

officefabriciconfontname

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.

Merken

Waldek Mastykarz

Waldek is a Microsoft Office Development MVP and Head of Product at Rencore. He reinforces our product development adding loads of business experience from working as a SharePoint consultant for more than 10 years. Waldek is passionate about what he does and shares his enthusiasm through his blog and as a regular speaker at conferences and community events all over Europe. Recently, Waldek joined the SharePoint Patterns and Practices (PnP) Core Team to help developers make better use of the SharePoint and Office 365 platforms.