Setting Your SharePoint Framework WebPart Icon

Applies To: SharePoint Framework


Default “Page” icon for your webpart




Office UI Fabric Icon










Custom Icon






So here’s what it looks like in my local workbench:

Smells like a bug to me






You could simply resize it and get something like this:

Why you make Vesa cry?

Documentation Discrepancies


The description for the officeFabricIconFontName property looks like this:



The description for the iconImageUrl property looks like this:



4 thoughts on “Setting Your SharePoint Framework WebPart Icon

  1. Chris – Do you know what the icon specifications are when working with List View Command Sets? (SharePoint Framework Extensions).

    I’m having a few issues creating a command with an icon that responds the same way commands do in the UI in terms of scaling/visibility. Thanks!

    • Currently, the SPFx ListView Command Sets are in preview and there is a bug with command set images:

      “Currently, images are not properly referenced unless you are referring to them from absolute locations in a CDN within your manifest. This will be improved in future releases. (source)

      So, you should be able to use absolute addresses from your CDN (I have not tried this). I believe these images are 16x16px.

      I have opened an issue suggesting that they allow the use of Office UI Fabric icons (same way they do for the webpart icon as shown in this post): This is also how OOTB commands are displayed (which is why they scale and respond correctly).

  2. Hi and thanks for the great post.
    One question for you: If I want the icon png file to be a part of the code base itself (for example in an assets folder next to my components folder), how do I refer to it in the .json file?


Leave a Reply


You are commenting using your account. Log Out /  Change )

Google photo


Twitter picture


Facebook photo


Connecting to %s