CSS <img> Sprite Generator

Processed only in your browser

Drag SVGs and images here

SVG, GIF, JPG, PNG and existing icons-sprite.svg files are detected automatically.

Matching names without the file extension replace existing icons. GIF, JPG, PNG: 15 MB each · SVG and finished sprite: 75 MB.

Your icons 0

Your sprite starts here

Add your SVGs or images. Previews and ready-to-copy HTML tags appear automatically.

Quick start

How to use your sprite

The download package contains icons-sprite.svg, icons-sprite.css and an HTML example page.

1. Include the CSS file in the <head>

Copy 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">

2. Save the sprite

Copy icons-sprite.svg into a folder such as img/.

3. Insert the image tag

Insert the image tag where you want it in the <body>:

<img src="img/icons-sprite.svg#home-icon" alt="House">
In index.html, the CSS link to css/icons-sprite.css is inside head and the image tag for img/icons-sprite.svg is inside body; #home-icon selects the visible house.

GIF, JPG and PNG files are embedded in the SVG sprite as their original files. Transparency and GIF frames are preserved in the file; animated GIF playback depends on the target browser. The images are not converted into vectors.

Your files stay in this browser tab. Reloading the page clears the workspace. Download your result first.

THE TECHNOLOGY BEHIND IT

What is an SVG sprite?

One shared file, many individually usable images. CSS <img> Sprite Generator combines your images and gives each one its own address within the file.

A classic image sprite: images side by side

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 SVG sprite: images as individually selectable layers

CSS <img> Sprite Generator uses a different arrangement: the images sit in separate SVG areas at the same position, similar to layers in Photoshop. Each image gets a unique ID. You embed it as an HTML image, for example with <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.

An SVG sprite can also use other structures, such as <symbol> and <use>. This generator specifically creates the version intended for the <img> tag.

For comparison: Classic image sprites on MDN ↗ · CSS :target on MDN ↗

Think of the sprite as a Photoshop file with layers

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 sonne, mond or landschaft.

demo-sprite.svg3 layers
Select by fragment ID#sonne
Rendered in <img>
Only the selected sun is displayed
Visible: SunThe other layers are hidden.
Choose a layer by clicking or using Tab and Enter. Only the image with the matching fragment ID is displayed.

The hash symbol # selects the layer. In the image URL demo-sprite.svg#sonne, the part before # identifies the shared file. The part after it is a URL fragment that refers to the SVG area with id="sonne". 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; }

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

Why use <img> instead of background-image?

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">.

  • No pixel coordinates to calculate. #home-icon identifies the image directly. You do not need a background crop with fixed X/Y positions.
  • Add alternative text directly. An <img> tag can use alt to provide a description for screen readers and images that cannot be displayed. Purely decorative images use alt="". Background images do not have their own alt attribute.
  • Control size and aspect ratio. You use the usual HTML and CSS options for images. The included CSS file adds the correct aspect ratio for each image.
  • Replace images easily. If the ID stays the same, the image tag stays the same. Other images do not need to be rearranged or have their background positions adjusted. If the dimensions change, upload the updated CSS file too.
  • Image content is easy to follow in the HTML. The full image tag, including its description, appears where the image is used. You can also use <figure> and captions just as you would with other HTML images.

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.

What happens to the different formats?

SVG

Shapes and lines

SVG vectors remain vectors. Shapes, colors and gradients are embedded and can still be scaled. SVGs may already contain raster images; these do not become vectors as a result.

PNG

Pixels with transparency

The PNG file is preserved unchanged, including transparent areas. This is useful for logos with transparent backgrounds, for example. The original pixel resolution remains the limit for sharp enlargements.

JPG

Photos and other images

JPG and JPEG files are embedded as their original images. The tool does not compress them again. This avoids additional JPEG quality loss; any existing blur and the original resolution remain.

GIF

One image or a sequence of frames

GIFs are also embedded unchanged, including their frames and timing data. Whether an animation plays inside an SVG loaded as an image depends on the target browser. Check animated images on your finished website.

SVG can embed other images using an <image> element. This does not turn a raster image into a vector graphic. SVG image embedding on MDN ↗

When a sprite makes sense

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.

As simple as an <img>

How to add your sprite to your website

  1. Add files. Drag SVG, GIF, JPG or PNG files into the tool. You can open and add to an existing sprite in the same way.
  2. Check the preview. Review the images and names. A name without its file extension becomes the ID. The light and dark previews help with transparent images.
  3. Download the package. The ZIP contains the SVG sprite, the CSS file with the correct aspect ratios, an example page and a short guide.
  4. Embed it. Unzip the package, copy the files to your website and adjust the file paths to match your folder structure.

The SVG file should be hosted on the same domain as your website and served as image/svg+xml. Without #id, this sprite is intentionally blank. It is best to check its appearance using a web server.

Which browsers support it?

For static SVG, PNG and JPG images, the documented web features indicate the following minimum versions. These figures cover the generated sprite including the supplied CSS file:

Browser Devices Minimum version*
Google Chrome Desktop and Android Version 88 (currently 153)
Microsoft Edge Windows, macOS and Linux Version 88 (currently 153)
Mozilla Firefox Desktop and Android Version 89 (currently 155.0.1)
Apple Safari Mac, iPhone and iPad Version 15 (currently 27)

* The deciding feature here is CSS aspect-ratio, which sets the aspect ratios in the package: Chrome and Edge from 88, Firefox from 89, 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 exported 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.

Animated GIFs are a special case: The complete GIF file is preserved in the sprite. However, its animation inside an SVG image element is not consistently specified. For reliable GIF animation across browsers, use the GIF file directly as an <img>.

For the online tool itself, we recommend the latest browser version. The example above helps you check how the sprite is displayed. Individual SVG filters, fonts or other embedding methods may behave differently.

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

FAQ – quick answers

Are my images uploaded anywhere?

No. The tool processes your files in your browser. Importing, previewing and downloading do not require your image files to be sent to a server. The workspace is not saved permanently.

Can I use SVG, GIF, JPG and PNG together?

Yes. You can mix the formats and also open an existing sprite created with this tool. GIF, JPG and PNG files can each be up to 15 MB, and an SVG file can be up to 75 MB. The finished sprite is limited to 75 MB.

Does this turn photos into vector graphics?

No. The SVG file serves as a shared container. PNG, JPG and GIF files retain their original image data and pixel resolution. Existing SVG vectors remain scalable. The tool does not trace photos into vectors.

How do I update a single image?

First, open your existing icons-sprite.svg in the tool. Then add the new image with the same name, ignoring 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.

What happens with matching file names?

Matching names without 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.

Why is nothing displayed when I open the sprite?

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. It is best to use the displayed HTML tag.

How do I copy the ready-made image tag?

A complete <img> tag appears below each image. Select “Copy HTML tag” to copy it directly. Adjust the image folder if needed and write suitable alternative text in alt. Set the display size using width or your own CSS rule.

Do I need the CSS file and additional JavaScript?

No additional JavaScript is needed. 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.

Are GIF animations preserved?

The GIF file is embedded with all its frames. However, animation playback inside an SVG depends on the browser. If the animation needs to work reliably in all target browsers, embed the original GIF directly as an image.

What happens if I reload the page?

The workspace will be empty. Download your sprite package before reloading or closing the page. You can open the saved SVG file again later and continue editing.

Are the original dimensions preserved?

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. The generator’s small previews do not change the export dimensions.

Commercial use is welcome. You may use CSS <img> Sprite Generator and the sprites you create for commercial projects too, provided you have the necessary usage rights for the images you use.

Your files stay with you. Importing, previewing and exporting take place in the browser. Your image files are not uploaded to our server during this process. Reloading the page clears the workspace, so download your finished sprite first.