Customize icons in the widget selector

You control the icons that are displayed with each widget in the widget selector, using the following widget properties:

• IconName
  Holds the name of the icon that you can choose from a list of icons provided by Sitefinity.
  For example, IconName=”document”
• IconUlrl
  Using this property, you can provide a link to a custom image that you have downloaded.
  For example, IconUrl=”/airplane.svg”

NOTE: If you have both properties configured for a widget, the IconUrl property takes precedence over IconName property.

Perform the following:

1. Download the image that you want to use as an icon.

   NOTE: The image must comply with the icon image requirements, listed below.

2. Upload the image in the wwwroot folder of your project.
3. Edit the ViewComponent of the widget by adding the link to the image in the following way:

4. Save your changes and build your solution.

The image that you want to use as custom widget icon must comply with the following:

• Be an SVG image format
• Be a monotone image
• Be 16x16, 24x24, or 40x40 pixels

List of Sitefinity widget icons

You use the IconName property with the predefined icons provided by Sitefinity.

You can find the list in Icons » Editors Widgets Icons.

You must override the default widget and then you can change the icon in the same way as for custom widgets.

The following sample displays the IconName property added to the Document list widget:

For more information, see Extend the built-in widgets.