SVG Icon Extractor
Extract individual icons and symbols from complex SVG files and sprite sheets.
SVG icon extraction
Extract icons from SVG sprites, symbol sets and icon libraries.
Paste SVG markup, upload a file or try the built-in sample. SVG Icon Extractor finds every symbol, nested SVG and named group, then lets you copy or download each one as an independent SVG file. Everything runs locally — your files are never uploaded.
Local only
Symbol extraction
Sprite support
No upload
Drop an SVG file here
or paste SVG markup into the editor below.
Could not extract icons
Please check the SVG markup and try again.
Source
SVG Preview
Paste SVG markup or upload a file to preview the source here.
Processed locally
Symbols: —
Groups: —
Nested SVGs: —
Shared defs: —
Scripts: —
External assets: —
Detection report
Extraction Summary
Extracted Icons
Large icon set detected. SVGTrim shows icons in batches to keep the page fast. Use Download All as ZIP to export every extracted icon at once.
No extractable icons found.
The SVG does not contain any symbols, named groups or nested SVG elements that can be extracted as individual icons. Try pasting an SVG sprite, icon library or multi-symbol file.
How It Works
SVG Icon Extractor scans the SVG markup for three types of extractable elements: symbol elements (the standard way to define reusable icons in SVG sprite sheets), nested SVG elements (SVG documents embedded inside a parent SVG), and named group elements whose id attribute suggests they represent an individual icon rather than a generic layer or container. For each candidate found, the extractor builds a complete standalone SVG document by copying the element's children and collecting any defs — gradients, clip paths, masks, filters and markers — that the element's content references. The result is a set of independent, self-contained SVG files that can be previewed, copied and downloaded without any server round-trip. SVGTrim extracts SVG icons locally in your browser. Your SVG files are never uploaded, and all processing happens on your device.
Use Cases
- Breaking apart an SVG sprite sheet into individual icon files so each icon can be referenced independently in a project without loading the entire sprite
- Extracting icon symbols from an icon library file delivered by a design tool in order to use individual icons in a web or mobile project
- Pulling out specific icons from a large SVG bundle to reduce the payload of a page that only needs a subset of the available icons
- Converting a symbol-based SVG icon set into standalone SVG files for use in environments that do not support the SVG use-and-symbol pattern
- Auditing an SVG sprite to discover how many unique icons it contains and what their viewBox values, element counts and file sizes are before optimizing
FAQ
What types of icons can SVG Icon Extractor find?
SVG Icon Extractor detects three source types. Symbols: any <symbol id="..."> element, which is the standard container for reusable icons in an SVG sprite. Nested SVGs: any <svg> element inside the root SVG that has an id attribute or contains visible content. Named groups: any <g id="..."> element whose id looks like an icon name rather than a generic layer label — ids like icon-home, user or search are included while g1, layer1 or background are excluded.
Does SVG Icon Extractor upload my files?
No. SVGTrim extracts SVG icons locally in your browser. Your SVG files are never uploaded, and all processing happens on your device. The DOMParser API reads the markup in memory, icon candidates are identified and exported entirely client-side, and no network request is made for your SVG data.
Will gradients and other definitions be included in the exported SVG?
Yes, when an extracted icon references a definition — such as a linearGradient, radialGradient, clipPath, mask, filter or pattern — the extractor traces those references and includes the relevant defs in the standalone output SVG. Transitive dependencies are followed so that a gradient referenced by a clipPath is also included. Definitions that are not referenced by the icon are not copied.
What is an SVG sprite?
An SVG sprite is a single SVG file that contains multiple icons defined as <symbol> elements, typically with the root SVG set to display:none. Individual icons are referenced from HTML using <svg><use href="#icon-name"></use></svg>. This pattern reduces HTTP requests by combining all icons into one file. SVG Icon Extractor can unpack a sprite back into individual icon files.
What does the detection report show?
The detection report shows four counts: symbols found, nested SVGs found, icon groups found and total extractable icons. If the SVG contains <use> elements that reference other parts of the document, a warning is shown because extracted icons may depend on shared definitions outside their own element scope.
Why are some groups not detected as icons?
SVG Icon Extractor applies a filter to group ids to avoid treating generic layout elements as icons. Groups with ids matching patterns like layer1, group2, background, frame, container, wrapper, g1 and similar are excluded. Groups with ids that describe a specific icon — such as home, icon-user, search, or arrow-right — are included. If your groups use generic ids, consider renaming them before running the extraction.
Can I extract icons from a file that uses <use> references?
The extractor does not fully expand <use> references in this version. If the SVG contains <use> tags, a warning is shown in the detection report. The icons that are direct symbol or group candidates are still extracted, but icons that are only referenced via <use> and not defined as standalone elements will not appear in the results. The extracted SVG content may reference definitions that are shared across multiple icons.