Configure SharePoint Framework Web Part Icon

When you develop a client-side web part using SharePoint Framework, you will have a default “Page” icon as the web part icon. However, based on the functionality, you may want to use a different web part icon.

In this tutorial, I will show you how to set a SPFx client-side web part icon using various ways.

Configure the SPFx web part icon using Fluent UI React icons.
Add an external web part icon to the SPFx web part
Define a SPFx web part image by using a base64-encoded image

By default, you can see the SPFx client-side web part icon looks like the screenshot below:

Table of Contents:

Configure SPFx Webpart Icon with Fluent UI React Icons

SharePoint manages the icons in the location below for any client-side web part.

src\webparts\iconConfigWebpart\iconConfigWebpartWebPart.manifest.json

When you open the file, you can see one JSON property: IconConfigWebpart. This contains the default icon name as Page. You can see the file looks like this:

 "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
    "group": { "default": "Advanced" },
    "title": { "default": "IconConfigWebpart" },
    "description": { "default": "IconConfigWebpart description" },
     "officeFabricIconFontName": "Page",
    "properties": {
      "description": "IconConfigWebpart"
    }
  }]

You can change this to any Fluent UI icons. You can check all the Fluent UI icons.

To change the web part icon, open the Fluent UI icons overview page, select the desired icon, and copy its name. Let’s say I choose Processing from the list of Fluent UI icons.

Then, open the src\webparts\iconConfigWebpart\iconConfigWebpartWebPart.manifest.json file of your SPFx solution and change the value of the ‘officeFabricIconFontName’ property to the copied name. Here is the code you can refer to:

 "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
    "group": { "default": "Advanced" },
    "title": { "default": "IconConfigWebpart" },
    "description": { "default": "IconConfigWebpart description" },
    "officeFabricIconFontName": "Processing",
    "properties": {
      "description": "IconConfigWebpart"
    }
  }]

Now, run the project using the command below, and you will see that the web part icon has changed from “Page” to “Processing”.

gulp serve

This is how to configure the SPFX web part icon and use a Fluent UI icon.

Next, I will show you how to change the SPFx web part icon and provide an external image.

Check out Create and deploy SharePoint Framework (SPFx) listview command set extension

Set an External Image as the SPFx Web Part ICON

If you do not like the icons from the Fluent UI icon list, you can also set an external image as the web part icon.

You can upload the image file to a SharePoint document library and provide the path from there.

Any external icon can be supplied as an absolute URL in the iconImageUrl property in the web part manifest.

Note:
Please remove the officeFabricIconFontName property from the web component manifest. Because, if you specify the web part icon by using the both ‘officeFabricIconFontName’ and ‘iconImageUrl’ properties, the icon specifies in the ‘officeFabricIconFontName’ is used.

You can provide any public image URL or store the image in the SharePoint document library (e.g., “https://tsinfotechnologies.sharepoint.com/sites/developer/Site%20Image/people.png”), and then provide that image path in the manifest file.

Once you copy the path, open the src\webparts\iconConfigWebpart\iconConfigWebpartWebPart.manifest.json and change the value of ‘iconImageUrl‘ in preconfigured entries code:

"preconfiguredEntries": [
    {
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
    "group": { "default": "Advanced" },
    "title": { "default": "IconConfigWebpart" },
    "description": { "default": "IconConfigWebpart description" },
      "iconImageUrl": "https://tsinfotechnologies.sharepoint.com/sites/developer/Site%20Image/people.png",
    "properties": {
      "description": "IconConfigWebpart"
    }
    }
  ]

Now, run the project using the command below, and you can see that the web part icon is an image.

gulp serve