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:

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.

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

2. 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"
    }
  }]

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

1. 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"
    }
    }
  ]

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

gulp serve

This is how to add an external web part icon in the SharePoint framework (spfx). Let’s see how to define a web part image using a base64-encoded image.

Read SharePoint Framework CRUD Operations using React

Configure SPFx Web Part Icon Using Base64-Encoded Image

Instead of providing the web part icon URL directly, we can also provide the Base64-encoded image. You can base64-encode your picture and use the Base64 string instead of the URL.

There are several online services available to get a base64-encoded image code.

1. Firstly, open this URL, then either drag and drop the image or upload it as shown in the image below. Once the image is uploaded, it converts into a base64 string. Then, copy the converted image by clicking “copy image”.

2. Then paste it into the web part manifest’s iconImageUrl property. The base64 string value of the iconImageUrl property below is too large, so I have added ‘…’ to it. So you can see the base 64 string value file of the image I have used.

"preconfiguredEntries": [
    {
      "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
      "group": { "default": "Advanced" },
      "title": { "default": "IconConfigWebpart" },
      "description": { "default": "IconConfigWebpart description" },
    "iconImageUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAACAASURBVHic7J13dFzF2f8/26vKqnfJkiXZcpN77xVTDKFDIJQ0IIGQYEra701CSIITkgBJyEs6hFBCCL0YjLHBxr1iS3KX1Xuvq93fH0J5g2zZe9vuXWk...",
      "properties": {
      "description": "IconConfigWebpart"
    }
    }
  ]

To test it locally, run the’ gulp serve’ command, which will add the base64-encoded image to the client-side SPFx web part, as shown below.

This is how to configure the SPFX web part image using a base64-encoded image.

I hope you found this article helpful!, In this tutorial, we saw how to configure the web part icon in a SPFX client-side web part in three different ways: configuring the web part icon with Fluent UI React icons, adding an external icon, and then adding a base64-encoded image.

Do let me know if you still have any questions.

You may like the following spfx tutorials:

• Create SPFx Dynamic Accordion Webpart Using PnP Controls React
• SharePoint Framework – Fluent UI React ChoiceGroup (Radio Button) and Checkbox Example
• Restrict SPFx List View Command Set Extension to Specific List/Library
• Display SharePoint list items using SPFx (SharePoint Framework)
• Configure Web Part Icon in SPFx (SharePoint Framework)
• Create a SharePoint List using SharePoint Framework