Issue with SVG webpart icon in Full-Width section

[mkm17]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version 1.21.1
• browser version 141.0.7390.66

Describe the bug / error

Hi,
In our web part, we noticed that its icon is affecting the spacing in the dropdown selector between the section option and the web part option when it’s used in a full-width section and the page is in edit mode.

The issue occurs specifically when we use the iconImageUrl property in the web part. The visual effect is shown below.

The same icon renders correctly in other contexts.

Steps to reproduce

1. Create a new SharePoint page
2. Edit the page
3. Add a new full-width section
4. Add a webpart with iconImageUrl icon,
5. Check dropdown to select the correct element to be edited

Expected behavior

The icon size should be limited to the container size in case when the iconImageUrl is used

[Ashlesha-MSFT]

Hello @mkm17,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.
If you don’t receive a reply within two working days, please use this escalation form to escalate.

[Ashlesha-MSFT]

@mkm17,
I tried to reproduce your issue, but I'm not seeing the same behavior. I wanted to share my testing details to see if I'm missing something or if there are specific conditions that trigger this issue.
What I did:

1. Created an SPFx webpart (SPFx 1.21.1)
2. Added "iconImageUrl": "https://TENANT.sharepoint.com/sites/MainSite/SiteAssets/OIP.png" in the manifest
3. Bundled and packaged the solution (gulp bundle --ship and gulp package-solution --ship)
4. Deployed the .sppkg to App Catalog
5. Created a SharePoint page with a full-width section

My Results:
The custom iconImageUrl is displaying correctly in the webpart selector dropdown

[mkm17]

Hi @Ashlesha-MSFT, thank you for checking. The icon in the web part selection panel looks ok. What I meant was the dropdown used to select either the web part or section properties in a full-width section.

Could you please check that area? ->

[Ashlesha-MSFT]

@mkm17,
I'm also trying to reproduce this issue but facing a different problem. I've added "supportsFullBleed": true to my web part manifest and deployed it, but my custom web part is not appearing in the full-width section at all.
When I try to add web parts to a full-width section, I only see "Banner" web part available. My custom "SvgIconTest" web part doesn't appear in the full-width column picker, even though it has supportsFullBleed: true
Are there any additional configuration steps needed beyond setting supportsFullBleed: true?
Would it be possible for you to share a minimal SPFx project that reproduces the spacing issue?

[mkm17]

@Ashlesha-MSFT Hi, I’ll prepare the test package and share it shortly. Thank you for your help.

[Ashlesha-MSFT]

@mkm17,
I've been testing this issue and I believe I may have found some insights related to SVG image sizing.
When I open the SVG file directly in a browser, it appears very small—almost like a tiny icon rendered in the corner. However, when the same SVG is referenced in the web part via the iconImageUrl property, it displays correctly in the web part selector and doesn’t cause spacing issues in my environment.
In browser -

While adding to Full-Width section -

For testing, I’d suggest trying properly formatted SVG icons (with defined width, height, and viewBox attributes) from Microsoft’s Fluent UI System Icons repository: https://github.com/microsoft/fluentui-system-icons/tree/main/assets

This might help verify whether the issue is specific to SVG scaling rather than a broader layout or spacing problem in the full-width section.