Quick Links Web Part Loses Icons: Causes and Workarounds

The Quick Links web part in SharePoint allows you to display a set of links with icons for quick navigation. You add an icon to a link, save the page, and later the icon is missing or replaced by a generic placeholder. This problem typically occurs because SharePoint stores icons as relative references that break when the page is moved, copied, or when the icon source file is deleted or renamed. This article explains why icons disappear and provides workarounds to keep them visible.

Why Quick Links Icons Disappear

The Quick Links web part stores each link icon as a relative URL in the web part properties. When you add an icon from the SharePoint icon picker, the system uploads the icon file to the Site Assets library of the current site and creates a relative path such as /sites/your-site/SiteAssets/icon-name.png. This path works only as long as the page remains in the same site and the file stays at that exact location.

Three common actions cause the icon reference to break:

Page Move or Copy Across Sites

When you move or copy a page to a different site, the Quick Links web part keeps the old relative URL. The icon file does not exist at that path in the new site, so SharePoint shows a generic link icon instead.

Icon File Deletion or Rename

If someone deletes or renames the icon file in the Site Assets library, the web part cannot load the image. The icon field still contains the old URL, but the file is no longer available.

Site Template or Save as Template

When you save a site as a template and create a new site from that template, the Quick Links web part references the original site’s Site Assets folder. The new site does not contain those files, so all icons revert to the default placeholder.

Workarounds to Keep Quick Links Icons Visible

The following workarounds prevent icon loss by removing the dependency on a specific file location. Apply the method that best fits your scenario.

Workaround 1: Use Inline SVG Code

Instead of selecting an icon from the picker, paste SVG markup directly into the icon field. The SVG code is stored as part of the web part data and travels with the page. No external file is needed.

1. Find or create an SVG icon
   Open a site such as Flaticon or Font Awesome, download the SVG file, or copy the SVG code. You can also write your own SVG markup.
2. Open the Quick Links web part properties
   Edit the page, select the Quick Links web part, and click the pencil icon to open the property pane.
3. Edit a link
   Click the link you want to change, then click the pencil icon next to that link.
4. Paste the SVG code into the Icon field
   In the link editor, locate the Icon field. Delete any existing value and paste your SVG code. The field accepts raw SVG markup. Click Save.
5. Republish the page
   Click Publish or Republish to save the changes. The icon now displays as an inline SVG and will not break when the page moves.

Workaround 2: Host Icons in a Dedicated Library

Store your icon files in a library that you control separately from the page. Use absolute URLs instead of relative paths. This method works best when you need to reuse the same icons across multiple sites.

1. Create a dedicated icon library
   In the site where you want to store icons, create a new document library named Icons. Upload all icon files to this library.
2. Get the absolute URL of each icon
   Select an icon file in the library, click the ellipsis menu, choose Details, and copy the Path value. The path looks like https://yourtenant.sharepoint.com/sites/yoursite/Icons/icon-name.png.
3. Edit the Quick Links link
   Open the page for editing, select the Quick Links web part, and edit the link that needs the icon.
4. Paste the absolute URL into the Icon field
   Delete the existing relative URL and paste the absolute URL you copied. Click Save.
5. Republish the page
   Publish the page. The icon now loads from the absolute URL and remains intact even if the page moves to another site, as long as the icon library exists at that URL.

Workaround 3: Use a SharePoint Framework Extension

For enterprise environments with many Quick Links web parts, a developer can create a SharePoint Framework (SPFx) extension that replaces broken icon references with fallback icons. This solution requires coding skills and deployment to the tenant app catalog. It is not a no-code workaround but is the most reliable for large-scale deployments.

What to Do When Icons Still Do Not Appear

Quick Links Icons Show a Red X

A red X indicates the icon file is missing or the URL is incorrect. Verify the file exists at the path stored in the web part. If you used a relative URL, check that the page is in the same site as the icon file. If you used an absolute URL, ensure the URL is correct and the file has not been moved or deleted.

Quick Links Icons Are Blurry or Pixelated

The Quick Links web part displays icons at 32×32 pixels. If your icon file is smaller than that, it may appear blurry. Use an SVG file or a PNG file that is at least 64×64 pixels. The web part will scale the image down, preserving sharpness.

Quick Links Icons Do Not Load After Page Restore

When you restore a page from the recycle bin or a previous version, the icon references revert to the state they were in at the time of the save. If the icon file has been deleted since then, the icon will not load. Reapply the icon using one of the workarounds above after restoring the page.

Relative URL vs Absolute URL vs Inline SVG: Icon Storage Methods

Item	Relative URL	Absolute URL	Inline SVG
Storage location	File in Site Assets library	File in any accessible library	Embedded in web part data
Survives page move	No	Yes, if library URL stays valid	Yes
Survives site template	No	No, unless library is also templated	Yes
Requires file upload	Yes	Yes	No
Ease of update	Replace file in library	Replace file at URL	Edit web part properties

You can now prevent Quick Links icon loss by choosing a storage method that matches your workflow. Use inline SVG for pages that may move across sites. Use absolute URLs for icons shared by multiple pages. If you manage many sites, consider an SPFx extension for automated fallback handling. The inline SVG method requires no additional files and is the simplest way to guarantee icons stay visible.