SVG Icon Sprite Packer

SVG Icon Sprite Packer

Only a strict static SVG subset is accepted. The tool resolves internal ID collisions and keeps files in your browser.

1. Select SVG files

Up to 24 files · 256KiB each · 2MiB total

Files with scripts, external resources or unsupported SVG features are rejected. File names appear in the output's accessibility labels.

Add files or inspect the example.

2. 2 icons

Preview of star.svg

star.svg

#icon-star

viewBox: 0 0 24 24

Rewritten internal IDs: 1

Preview of circle.svg

circle.svg

#icon-circle

viewBox: 0 0 32 32

Rewritten internal IDs: 1

3. Sprite and usage example

Put icon-sprite.svg and the HTML on the same origin. Adjust each href path for your actual asset location.

SVG sprite

<svg xmlns="http://www.w3.org/2000/svg"><defs>
<symbol id="icon-star" viewBox="0 0 24 24"><defs><linearGradient id="icon-star--paint"><stop offset="0%" stop-color="#eab308"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 17 L5 22 L7 14 L2 9 L9 9 Z" fill="url(#icon-star--paint)"/></symbol>
<symbol id="icon-circle" viewBox="0 0 32 32"><defs><linearGradient id="icon-circle--paint"><stop offset="0%" stop-color="#2563eb"/><stop offset="100%" stop-color="#14b8a6"/></linearGradient></defs><circle cx="16" cy="16" r="12" fill="url(#icon-circle--paint)"/></symbol>
</defs></svg>

HTML

<svg width="32" height="32" role="img" aria-label="star.svg"><use href="icon-sprite.svg#icon-star"/></svg>
<svg width="32" height="32" role="img" aria-label="circle.svg"><use href="icon-sprite.svg#icon-circle"/></svg>

Comments & questions

SVG Icon Sprite Packer

Select several SVG icons and package them as symbols in one SVG file. The tool keeps each viewBox, makes a unique symbol ID from the file name, and rewrites duplicate gradient or clip IDs together with their references. Review each preview and ID, then save the sprite and HTML usage example. Place icon-sprite.svg at the path used by the HTML, on the same origin.

Key features

  • Combine up to 24 local SVG icons as symbols
  • Keep each icon's viewBox and aspect ratio
  • Rewrite colliding internal IDs and their url(#id) references
  • Preview icons and list symbol IDs and rewritten ID counts
  • Download the sprite and same-origin HTML example

How to use

  1. Inspect the two-icon example or select several SVG files.
  2. Review each preview, viewBox and generated symbol ID.
  3. Remove icons that do not belong in the sprite.
  4. Download the sprite and HTML example or copy the HTML.
  5. Place the sprite in your site's assets and test the adjusted href path in a browser.

Use cases

  • Manage icons with different viewBox sizes in one asset
  • Avoid collisions when multiple files use the same gradient ID
  • Reuse individual icon symbols through SVG use elements

Frequently asked questions

What happens if two files have the same name?

A numeric suffix makes the symbol IDs distinct, such as icon-star and icon-star-2.

Can two files both use a gradient ID named paint?

Yes. The tool prefixes each internal ID and rewrites its matching url(#paint) reference inside that icon.

Does this accept every SVG file?

No. It supports a static subset of paths, basic shapes, gradients, clipPath and text. Scripts, external images/fonts/CSS, use, masks, filters, animation, entities and unsupported attributes are rejected.

Why does the HTML use example not render?

Place icon-sprite.svg at the actual path referenced by href on the same origin. Browsers restrict external SVG use references across origins.

Can the preview differ from my live page?

Yes. Font availability, inherited CSS and how the external sprite is used can change its appearance. Check the downloaded output on your destination site.

Privacy

Selected SVG files stay in this browser's memory and are not sent to this tool's server API. Previews use inspected SVG data URLs without loading external resources.

Related Tools

SVG to PNG / JPEGImage to SVG VectorFavicon GeneratorWasm Module InspectorHreflang Matrix CheckerAST Query PlaygroundContainer Build GraphDependency Graph ExplorerSemver Range LabCron Schedule AuditorPatch Review WorkbenchSource Map ExplorerLocalization Catalog AuditorStructured Data ReviewerHTTP Archive AnalyzerWebhook Signature LabProtobuf Schema WorkbenchGraphQL Schema LabAvro Schema EvolutionLocal SQL WorkbenchSchema Form BuilderMesh Repair WorkbenchPipe Network LabRobot Arm Kinematics LabThermal Network LabBeam Response LabGear Train DesignerTolerance Stackup LabSensor Calibration FitPCB Stackup PlannerDigital Filter DesignerNetwork Reachability MapSun Shadow MapGPS Error SimulatorDigital Logic SimulatorAnalog Circuit LabMechanism Linkage LabAnalysis Mesh GeneratorOpenAPI Contract InspectorDatabase Migration PlannerDimensional Equation CheckerTruss Force LabBoolean Minimization LabControl Response LabQueueing Simulation LabGeofence Event SimulatorCoordinate Reference LabSurvey Traverse LabRaster Classification LabChoropleth Design LabMap Print ComposerRaster Reprojection LabElevation Contour MakerTerrain Viewshed LabWatershed DelineatorMap Tile PackagerText File Encoding WorkbenchFilesystem Portability AuditorSBOM License ExplorerFile Signature Auditornpm Lockfile Conflict ResolverSource Secret AuditorOffline Web Package BuilderCertificate Chain InspectorTorrent Metainfo InspectorChunked File PackagerEncrypted File VaultDuplicate File FinderArchive WorkbenchDesign Token ManagerSpacing Token DesignerResponsive Type SystemPackaging Dieline DesignerFlex Layout PlaygroundCSS Grid PlaygroundRegex Equivalence LabMarkdown Repository AuditorLog Template MinerResponsive Layout AuditorEmail Template PreviewInternal Link GraphState Machine TesterPetri Net SimulatorGit History VisualizerCurl Request WorkbenchBinary Protocol DesignerHex File EditorBinary Patch WorkbenchFile Signature WorkbenchAPI Mock SandboxSchema Column MapperEvent Log SessionizerER Diagram DesignerTime Series Gap AuditorStratified Data SplitterData Lineage DesignerDecision Tree LabData Anonymization WorkbenchData Expectation RunnerJSON Schema ValidatorBasket Pattern AnalyzerRobots Policy TesterSEO HTML AuditorAccessibility Structure AuditorSyndication Feed WorkbenchIndexNow Payload BuilderCrawl Log AnalyzerCSP Policy WorkbenchSearch Performance AnalyzerCSV Formula Risk AuditorCORS Response SimulatorCache Header LabCookie Policy InspectorWeb Vitals Trace LabSitemap Health AuditorBatch File RenamerFile Manifest VerifierFolder Space MapFolder Difference ReviewerRoute Order OptimizerGeoJSON Map EditorPolygon Overlay LabCartographic Label PlacerSpatial Table JoinGeoJSON Topology AuditorGPX Track AnalyzerTrack Privacy RedactorCSV Table JoinCSV Pivot WorkbenchScientific Data ProfilerTabular Cleaning WorkbenchRecord ReconciliationData Dictionary BuilderCanonical Graph AuditorRedirect Plan TesterHTTP response and ping reference testBrowser and System InformationJSON ↔ YAML ConverterXML ↔ JSON ConverterHTML FormatterJavaScript MinifierMock Data Generator.gitignore GeneratorLicense GeneratorUser-Agent ParserPassword Strength CheckerCode to ImageXML FormatterHTTP Status Code LookupMIME Type LookupJS & SQL String EscapeCSS Box Shadow GeneratorCSS Gradient GeneratorIndent ConverterNumber Base ConverterUnicode Escape ConverterUnicode InspectorJSON Structure DiffMarkdown Table GeneratorBase64 EncoderJSON FormatterURL EncoderSQL FormatterCron Expression GeneratorRegex TesterUUID GeneratorHash GeneratorTimestamp ConverterJWT DecoderHTML Entity ConverterMarkdown PreviewCSS MinifierMeta Tag GeneratorJSON ↔ CSVCase ConverterImage to Base64
Explore all Dev Tools tools →Image/Media →Text/Convert →Life/Fun →