Every Client Side Webpart within a SharePoint Framework App package can have an icon which is shown in the toolbox when we add a webpart to the modern page.
Following properties can be used to set a custom icon
- iconImageUrl: Using a custom image
- officeFabricIconFontName: Using a font icon
Client-Side Web Part icon using an image
Open the '[your webpart name].manifest.json' file from src/webparts/[your webpart name]. And replace the officeFabricIconFontName with iconImageUrl. This expects a path to an image of 38X38 dimension. At this time of writing this article only absolute URLs are accepted for this property. When its not possible to specify an absolute URL, we can encode an image into base 64 format and provide the encoded string to this property.
Client-Side Web Part icon using a font icon
This is used by default when you create a SharePoint Framework webpart solution. This property is set to "Page" and the page icon appears by default to all the custom webparts
Following are the possible values for this 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
When both the properties are specified, the property officeFabricIconFontName takes the precedence and iconImageUrl is ignored.
We can also specify an App Icon for a SharePoint Framework App Package which is shown in the Classic view of site contents page. Check the steps on my other post - SharePoint Framework: Set Custom App Icon