SharePoint Framework solutions offer Client Side Webparts and SPFx Extensions to add custom functionality to your SharePoint sites. When we package these components, they are bundled as a SharePoint Framework App Package with an extension .sppkg. These packages are installed (like the SharePoint Add-Ins) and shown as custom Apps in your Site Contents page. Showing a custom App Icon on this page for your App is important, as it can differentiate your App easily from other custom ones.
Create an AppIcon image
Prepare your AppIcon image with a dimension of 96X96. This is important, as images without this dimension are not applied as App Icons.
Set the Image as App Icon
- Copy the image to the sharepoint folder within your SharePoint framework solution directory.
- Open the package-solution.json file from the config folder and specify the App Icon using the iconPath property. (this accepts a path relative from the sharepoint folder).
- Build and package the app using gulp bundle & gulp package-solution commands.
- Add the app to your App Catalog and install in a site collection. The App will now have a custom App Icon.
However, this icon is not used in the Modern Pages, and only shown in the Site Contents page on a Classic view.
Its also a good idea to show a custom icon for client side webparts within your SPFx package. Steps to do this in my next post - SharePoint Framework: Set custom icons for Client Side Webparts