Alert This post is over a year old, some of this information may be out of date.

Using base64 encoded images as the web part icon in SPFx

Web part icons help you to distinguish your web part between all the others.

Show image Modern client-side web parts
Modern client-side web parts

SharePoint Framework provides use two options at this moment of specifying an icon:

  • Office UI Fabric font icons (officeFabricIconFontName)
  • Images by providing a URL (iconImageUrl)

Info: Waldek Mastykarz wrote a great article about this a while ago. Read more about it here: Specifying the icon of a SharePoint Framework Client-Side Web Part.

Probably, when you are creating web parts for a certain product or company you want to include the logo instead of using the Office UI Fabric font. You could do this by uploading your image and adding the URL of the image to the iconImageUrl property.

But did you know that you can also make use of Base64 encoded images?

Base64 what?

Instead of specifying an URL to an image to load, you can encode your image. That way you do not have to upload your image to an online location, and there is no extra request necessary to retrieve the image.

For example, this image:

Show image PnP SharePoint
PnP SharePoint

Becomes this:

Show image PnP SharePoint encode image
PnP SharePoint encode image

The great thing about it is that you can maintain everything in one location and do not have to worry about where you are going to store the icon images.

How to convert your image

There are a lot of online converters, one that I use frequently is

On that website you upload the image, the website encodes it and provides you with a couple of options. The one you need to be used in the web part manifest is the copy image option.

Show image Encoded image
Encoded image

Once copied, add it to the iconImageUrl property and you are all set to go.

Show image Web part with encoded image instead of using an URL
Web part with encoded image instead of using an URL


Back to top