ONE FILE – ALL IMAGES
<img> tagCombine multiple images in one SVG file and use each image individually with <img>.
How it works ↓SVG, WEBP, AVIF, PNG, JPG, GIF and SVG sprites are detected automatically.
Matching file names replace existing images, even with a different extension.
Upload: up to 5 MB in total
Add your SVGs or images. Previews and ready-to-copy HTML tags appear automatically.
Quick start
The download contains icons-sprite.svg, icons-sprite.css and an HTML page.
Copy icons-sprite.css or icons-sprite.css into a folder such as css/. Add this line to the existing <head> section of your HTML page:
<link rel="stylesheet" href="css/icons-sprite.css">Copy icons-sprite.svg or icons-sprite@2x.svg into a folder such as img/.
Insert the image tag where you want it in the <body>:
<img src="img/icons-sprite.svg#home-icon" alt="House">
AVIF, WEBP, JPG, PNG and GIF files are embedded in the SVG sprite as their original files. Transparency and animation frames are preserved. Animated GIFs and AVIFs are also exported separately and referenced directly, not via sprite.svg#name. Of these animated formats, only animated SVGs are displayed through the sprite. The images are not converted into vectors. AVIF images require a browser with AVIF support, even inside an SVG sprite. AVIF image data remains unchanged. Optional lossless optimization removes supported descriptive XMP metadata when this reduces file size. A PNG fallback with picture markup or CSS image-set is optionally available through “AVIF fallback”.
Your workspace is saved locally for this browser tab and restored after reloading. Reopening the URL from the address bar in the same tab also keeps your images. Without a saved tab identifier, the workspace starts empty. Images are sent to our server to create the package only when you download it. “Clear” also removes the saved workspace.
THE TECHNOLOGY BEHIND IT
In a classic image sprite, several images sit next to or below one another in a shared image file, often a PNG. The website loads that file with background-image. Using background-position and a defined crop size, it reveals only the chosen image – like a small window onto a large picture.
This generator stores the images as separate layers in one SVG file – similar to Photoshop. Each image gets its own ID, which lets you display it using an <img> tag:
<img src="img/icons-sprite.svg#home-icon" alt="House">The name after # selects the image. The :target CSS rule inside the sprite reveals the matching layer; the others stay hidden. This is an SVG sprite using fragment IDs and CSS :target. You do not need to calculate pixel positions.
The included CSS file is part of the setup: Link icons-sprite.css on your website. It sets each image’s original width and correct aspect ratio. The CSS inside the SVG file selects the layer; no additional JavaScript is needed.
A symbol sprite stores each icon as a <symbol> and displays it with <use> inside an SVG element. This is particularly useful for vector icons whose colours should be controlled by the website’s CSS, provided the icons are designed for it. This generator instead creates a sprite for the <img> tag: select an image by its fragment ID and embed it like a regular image with alternative text. This suits images and icons with a defined appearance. Their internal shapes and colours cannot be changed directly through the website’s CSS.
For comparison: Classic image sprites on MDN ↗ · CSS :target on MDN ↗
In Photoshop, one file can contain several images on separate layers. This sprite organizes its images in a similar way: Each image has its own SVG area at the same display position. You can think of these areas as a stack of layers on top of one another. Each has a name, such as sun, moon or landscape.
assets/site-sprite.svg3 layers
#landscape
<img>
The hash symbol # selects the layer. In the image URL assets/site-sprite.svg#sun, the part before # identifies the shared file. The part after it is a URL fragment that refers to the SVG area with id="sun". The CSS pseudo-class :target matches this area. The built-in rules display it and keep all other areas hidden.
/* First, hide all image layers */
svg.icon { display: none; }
/* Show only the layer selected by #name */
svg.icon:target { display: inline; }A sprite bundles icons that are often used together and makes them easier to maintain. The browser can reuse the same file for several images. How much this saves during loading depends on factors such as caching and delivery.
The entire sprite file is loaded even for a single image. Separate files are therefore often more practical for large photo collections or many long animations. If one image changes, you need to upload the shared sprite file again.
You do not need to calculate image crops or pixel positions. To choose another image, just change the name after #. Several <img> elements on your website can use the same sprite file at the same time, each showing a different layer. The SVG file still contains all the images.
Not all images are alike
In a traditional CSS background sprite, several images share one large image area. A specific part is displayed using background-image and background-position. This sprite uses separate, named SVG areas instead. You select an image with <img src="icons-sprite.svg#name">.
Select images by name. Use #home-icon to select the image you want from the sprite. There is no need to find its position on a large image sheet or calculate pixel coordinates for the correct background crop.
Describe images with alternative text. Use alt to add a description for screen readers or images that cannot be displayed. For purely decorative images, use alt="". Unlike HTML images, CSS background images have no attribute for this text.
Choose the size and proportions. Set width and height with HTML or CSS, just as you would for other images. The included CSS file contains each image’s aspect ratio, so you can adjust its appearance to suit your website.
Replace images easily. Open the sprite and add the new image with the same filename. The file format can be different. Then upload the updated sprite. If the dimensions differ, update the CSS file and, if needed, the sizes in your HTML too.
Find images and descriptions in your HTML. The image tag appears exactly where you use the image on your website, making it easy to find and edit. You can also add <figure> and captions, just as with other HTML images.
Use Retina or HiDPI images. Upload images with twice or three times the pixel dimensions. Choose 2× or 3× to divide display dimensions accordingly. The “Retina/HiDPI” option adds @2x / @3x to the sprite filename and updates its references.Background images remain useful for decorative areas and repeating patterns. The IMG sprite is particularly suitable for named icons and images that you want to use as individual HTML images.
CURRENT BROWSERS
| Browser | Devices | Minimum version* |
|---|---|---|
 Google Chrome
|
Desktop and Android | Version 88 (2021) (currently 153) |
 Microsoft Edge
|
Windows, macOS and Linux | Version 88 (2021) (currently 153) |
 Mozilla Firefox
|
Desktop and Android | Version 89 (2021) (currently 155.0.1) |
 Opera |
Windows, macOS and Linux | Version 74 (2021) (currently 135) |
 Apple Safari
|
Mac, iPhone and iPad | Version 15 (2021) (currently 27) |
| AVIF images require AVIF support even inside an SVG sprite. Static AVIF images: Chrome 85 (2020), Edge 121 (2024), Firefox 93 (2021), Opera 71 (2020), Safari on Mac 16.4 (2023), and Safari on iPhone/iPad 16.1 (2022). Safari 16.1–16.3 on Mac has limited support and requires macOS Ventura. Check SVG sprite rendering in the target browser. AVIF browser support on Can I Use ↗ | ||
* The deciding feature here is CSS aspect-ratio, which sets the aspect ratios in the package: Chrome and Edge from 88, Firefox from 89, Opera from 74, Safari and iOS Safari from 15. View browser support for aspect-ratio on Can I use ↗ SVG image elements, href and :target are already available in these versions. These are minimum versions for the downloaded files derived from the individual technologies, not separately tested approvals for each browser version. Research date: September 15, 2026. The parentheses show the currently verified stable release; this information is not updated automatically. For Firefox, this is Mozilla’s downloadable release 155.0.1; the documentation already lists 156 as stable on its release date today.
Use the generated sprites with <img> or as CSS background images. Embedding with <use> is not intended for this export. Test the included example page on your web server in your target browsers. When loading files from another domain or a CDN, security settings may restrict loading.
Animated GIFs and AVIFs: For technical reasons, these animations are not exported inside the SVG sprite, as playback there cannot be guaranteed across browsers. The generator exports them as separate files and embeds them directly using src, srcset, picture or CSS backgrounds. Copy the supplied folder ending in -animated too. Animated AVIFs require browser support for AVIF image sequences; disable “AVIF fallback”, as PNG fallback supports static images only.
Animated SVGs: Automatic SVG animations (SMIL) and CSS keyframes are supported. They are loaded from the shared sprite using sprite.svg#identifier. Other layers are made transparent. JavaScript, external animation files and animations triggered by clicks or mouse interaction are not supported. Browser support for SVG animations ↗
Technical references: MDN version data for aspect-ratio, CSS :target, SVG image element and GIF limitation, SVG as an image.
Browser logos from the Browser Logos collection.
QUESTIONS & ANSWERS
Yes. All features and downloads are free, with no account or payment required. The total upload limit is 5 MB. Technical safety limits apply; there is no plan-based image limit.
Your images stay in the browser when you add and preview them. Only when you download the package are the selected image contents, dimensions and layer identifiers sent to our server. The server creates the sprite and ZIP package. The application does not permanently store your images or package. Your workspace is not saved permanently either.
Yes. You can mix formats and reopen an existing sprite created by this generator. The total upload limit is 5 MB. Embedding the images can increase the final sprite size.
Yes. Automatic SVG animations (SMIL) and CSS animations using @keyframes are preserved in the sprite. Embed the image with an <img> tag as usual. No additional JavaScript is needed.
The animation must be fully contained in the SVG file. JavaScript, externally loaded animations, and animations triggered by clicks or mouse movement are not supported.
Animated SVGs use sprite.svg#identifier with src, srcset, picture and CSS backgrounds. Separate SVG files are not needed. Your selected display size, including Retina/HiDPI settings, is preserved. In sprites containing SVG animations, other images are made transparent to avoid the startup pause observed in Chrome and Brave.
Static AVIF images are embedded without recompression in the SVG sprite. Displaying them still requires a browser with AVIF support. See the “Browser compatibility” section for details.
For static AVIF images, you can enable “AVIF fallback”. The download then includes separate AVIF and PNG files: example markup uses picture for images, while CSS backgrounds and the body use image-set with PNG as the fallback. The browser selects a supported format automatically. Transparency is preserved, and the fallback works with Retina/HiDPI. Format selection requires no JavaScript. Responsive body scaling still requires the supplied JavaScript. Animated AVIF files are not supported by the PNG fallback.
Yes, as separate AVIF files. For technical reasons, animated AVIFs are not exported inside the SVG sprite, as playback there cannot be guaranteed across browsers. They are embedded directly using src, srcset, picture or CSS backgrounds. Copy the supplied folder ending in -animated too.
The animation is preserved. Retina/HiDPI adjusts the display size; every pixel density uses the same unchanged file. The browser must support AVIF image sequences. Disable “AVIF fallback”, as PNG fallback supports static AVIF images only.
The option removes metadata without quality loss, such as details about the software used or the capture date. Image content, dimensions and transparency remain unchanged. GIF animations are preserved too. For AVIF, supported descriptive XMP metadata is removed. EXIF data, color profiles and orientation information are preserved; only smaller results are used. A smaller file is not always possible: the image may already be stored efficiently or contain no removable metadata. Small savings may not be visible in the rounded KB display. The generator only uses the optimized result if it is actually smaller; otherwise, the original file is preserved. Lossless optimization does not reduce pixel dimensions.
Choose 2× or 3× for Retina/HiDPI. For a display size of 100 × 50 pixels, use 200 × 100 source pixels at 2× or 300 × 150 at 3×. The sprite gets the matching @2x or @3x suffix, for example icons-sprite@2x.svg and icons-sprite.css. Its references are updated automatically, including in the example HTML. Display dimensions are automatically divided by the chosen factor. Vector SVGs can optionally be scaled as well.
No. The SVG file serves as a shared container. AVIF, WEBP, JPG, PNG and GIF files retain their original image data and pixel resolution. Existing SVG vectors remain scalable. The generator does not trace photos into vectors.
First, open your existing icons-sprite.svg in the generator. Then add the new image with the same name (regardless of the file extension). It replaces the previous image. Download the new package and replace the sprite and CSS on your website. If the appearance has changed, check the browser cache too.
Matching names (regardless of the file extension) identify the same layer. logo.png and logo.svg are both selected with #logo. The most recently added file replaces the previous one. Two separate images need two different names.
This type of sprite initially hides all layers. Only a valid URL such as icons-sprite.svg#logo makes the matching layer visible. Check the full name and its capitalization. Use “Copy HTML tag” to get the correct tag.
The supplied CSS file sets the correct aspect ratios for the images. Include it along with the sprite. Layer selection works through #name and the CSS inside the sprite itself; your website does not need any additional JavaScript for this. Responsive body-background scaling requires the supplied JavaScript.
Yes. Animated GIFs are exported as separate files with all frames and timing preserved. For technical reasons, they are not exported inside the SVG sprite, as playback there cannot be guaranteed across browsers. They are embedded directly using src, srcset, picture or CSS backgrounds. Copy the supplied folder ending in -animated too. The same applies to animated AVIFs. Animated SVGs can still be embedded from the shared sprite.
Yes. The original image data and dimensions are preserved in the sprite. With the supplied CSS file, each image is displayed at its original size by default. Your own setting such as width="24" only reduces its display size on your website while preserving its aspect ratio. Retina/HiDPI divides the display size by 2 or 3. The optional AVIF fallback also creates smaller files for lower pixel densities. The generator’s small previews do not change the export dimensions.
Simple SVG graphics are included directly as vector markup. Their paths and original viewBox are preserved. More complex static SVGs may be stored as embedded SVG images to keep their CSS rules and identifiers isolated from other artwork. Animated SVGs are included directly with separately scoped identifiers and CSS rules.
Raster images such as JPG, PNG, WebP and static GIFs or AVIFs are normally stored as Base64 data URIs in image elements. They are not converted into vectors. Base64 encoding itself preserves image quality but adds about one third to the data size. Gzip compression on your web server can reduce the amount of data transferred. Optional optimizations and output variants may additionally change image data.
Each image receives its own identifier and can be displayed through an img tag using an address such as icons-sprite.svg#logo. Animated GIFs and AVIFs, as well as enabled AVIF fallbacks, are exported as separate image files.
Commercial use is welcome. You may use SVG Sprite Generator and the sprites you create for commercial projects too, provided you have the necessary usage rights for the images you use.
Local previews, temporary processing for downloads. Importing and previewing take place in the browser. When you download, the selected images are sent to our server to create the ZIP package. The server does not retain images or ZIP packages permanently. Your workspace is saved on your device and restored when this tab reloads. “Clear” removes the local copy.