How to find SVG sprites and web icons on a website

A web icon can look like an ordinary image while having no standalone PNG or JPG behind it. It may be an inline SVG, one symbol inside a shared sprite, a CSS mask, or a glyph from an icon font. Saving a screenshot gives you pixels, but it throws away the quality and structure that made the icon sharp.

Identify the icon system before saving anything. Once you know how the page draws the symbol, you can back up or migrate assets you own without turning vectors into blurry bitmaps.

Inline SVG

An inline SVG is written directly into the HTML:

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path d="..." />
</svg>

There is no image URL because the vector instructions are part of the document. Inspect the element in Developer Tools and copy the complete <svg> markup for an authorized asset.

Keep the viewBox, paths, groups, gradients, masks, and accessibility attributes. Copying only one <path> can lose styling or geometry.

For a user-facing meaningful icon, make sure the final implementation has an accessible name. Decorative icons should generally be hidden from assistive technology.

External SVG files

Some pages use a normal image element:

<img src="/icons/download.svg" alt="Download">

This is straightforward. Open the URL, inspect the file, and save it if you have permission. An SVG is text-based, but treat it as active content when it comes from an untrusted source. It can contain links, styles, and other features that deserve review before reuse.

The image file format guide explains why SVG scales differently from raster images.

SVG symbol sprites

A sprite collects many symbols in one SVG:

<svg style="display:none">
  <symbol id="icon-download" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
</svg>

The visible icon references one symbol:

<svg aria-hidden="true">
  <use href="#icon-download"></use>
</svg>

The <use> element does not contain the drawing itself. Follow its href to the matching symbol. If the reference begins with a filename, such as /icons/sprite.svg#download, open that external sprite.

For a complete site migration, preserve the sprite and its IDs together. Renaming an ID without updating every <use> reference breaks icons silently.

How to inspect a use reference

Select the visible SVG and look for <use>. Copy the href or older xlink:href value. Search the document or loaded sprite for the referenced ID.

If the icon appears blank after copying, check:

• Missing viewBox
• Styles inherited from the original page
• fill="currentColor" without a color
• External sprite blocked by origin or path changes
• IDs renamed during optimization
• A mask or clip path defined elsewhere

Do not flatten everything to paths until you understand the dependency. Shared symbols are useful precisely because they avoid repeated markup.

CSS background icons

An icon can be painted as a CSS background:

.download-button::before {
  content: "";
  background: url("/icons/download.svg") center / contain no-repeat;
}

Inspect the pseudo-element and its computed background-image. The CSS background extraction guide covers relative URLs, multiple layers, and generated elements.

CSS masks

Masks use an image's shape while CSS supplies the visible color:

.icon {
  background-color: currentColor;
  mask: url("/icons/download.svg") center / contain no-repeat;
}

Saving the mask file can look like a black shape or transparent document. That is normal. The page applies color separately.

Preserve both the asset and the CSS rules during a migration. A screenshot cannot reproduce hover colors or theme changes cleanly.

Icon fonts

Icon fonts map characters or ligatures to glyphs. The HTML might contain:

<span class="material-symbols-outlined">download</span>

The visible shape comes from a font and its CSS, not an image URL. Developer Tools can show the rendered font and class rules.

To migrate an icon font you own or are licensed to use, preserve:

• Font files
• @font-face declarations
• Character or ligature mapping
• Weight and variation settings
• License and attribution requirements

ExtractPics itself uses a self-hosted subset of Material Symbols. Adding a new ligature without rebuilding that subset would display raw text instead of an icon. That is a useful reminder: the HTML name and font glyph must travel together.

Canvas-drawn icons

A canvas can draw paths or copy icons from a sprite at runtime. The DOM contains only <canvas>. Inspect the scripts and network requests in an application you control. The source may be an image atlas, vector data, or generated instructions.

If the application provides an export, use it. A screenshot is acceptable when the rendered canvas state is the intended artifact, but it is not a reusable vector source.

Find icon resources in the Network panel

Filter requests by SVG, font, or image. Reload the page and interact with menus so deferred assets load. Search filenames for sprite, icon, symbol, or known font extensions such as WOFF2.

The Initiator column can point back to the stylesheet or script. This is especially helpful when class names are generated and the DOM gives little context.

Use rendered extraction for a broad inventory

The ExtractPics image extractor can collect linked SVG files and image resources from a public rendered page. Inline SVG markup, icon fonts, and canvas instructions need additional inspection because they are not ordinary downloadable images.

That limitation is not a bug. An image inventory and a design-system inventory overlap, but they are not identical.

Preserve accessibility meaning

An icon's shape is only part of the asset. During migration, record whether it is:

• Decorative
• Accompanied by visible text
• An interactive control
• A status indicator
• A brand or trademark

An icon-only button needs an accessible name, often through visible text, aria-label, or an equivalent pattern. Copying the SVG without the button semantics can make the new interface inaccessible.

Do not confuse generic icons with logos

A download arrow may come from an open icon library. A company mark is likely protected by copyright and trademark. The extraction method can be the same while the permitted reuse is very different.

Use the logo, favicon, and social image guide for identity assets, and verify the license before publishing third-party marks.

A migration checklist

For every icon family you own:

1. Identify whether it is inline SVG, external SVG, sprite, mask, font, background, or canvas.
2. Record source files and license.
3. Preserve symbol IDs and references.
4. Capture required CSS, including currentColor behavior.
5. Document accessible names and decorative states.
6. Test at small and large sizes.
7. Test hover, focus, disabled, and dark-theme states.
8. Check that no raw ligature text appears when fonts fail.

Avoid exporting every vector as PNG "for simplicity." You lose scaling, theme color, and often accessibility behavior.

Security checks for copied SVG

SVG can contain more than shapes. Before adding a third-party SVG to your site, inspect scripts, event handlers, external references, foreign objects, and embedded data. Use a trusted sanitizer appropriate to your build process.

Do not paste unknown SVG markup directly into a CMS that treats it as safe HTML. For assets you control, minimize and validate them as part of the build.

Permission and licensing

Open-source icon libraries have licenses and sometimes attribution requirements. Purchased packs can restrict redistribution. Brand icons can have trademark rules even when a downloadable SVG is publicly available.

Keep the license beside the asset inventory. If the source is uncertain, use the image source and license checklist.

Keep the vector system intact

Do not start by hunting for a PNG. First ask how the browser drew the icon. The answer may be inline SVG, a symbol in a sprite, a CSS mask, a font glyph, or a canvas command.

Once you know the system, preserve the pieces that make it work: vector source, IDs, relevant CSS, accessible name, and license. A screenshot is useful in an audit report, but it is a bad replacement for an icon that is supposed to scale, inherit color, and remain sharp.