Icon Set Generator

SVG sprite —

Icons in the set: —
Sprite size (characters): —
Icons with an assumed viewBox: —

Paste several SVG icons and the generator wraps each one in a symbol element inside a single hidden sprite. Two icons titled Home and Search become icon-home and icon-search, each keeping its own viewBox, and the table gives the short use markup that draws each icon anywhere on the page.

About this tool

Front-end developers who ship a dozen inline icons often repeat the same path data on every page. An SVG sprite fixes that: the icons live once in a hidden svg, and each place that needs one points at it by id. This generator builds that sprite from icons you paste or open from a file. It keeps each icon's viewBox, takes the width and height when no viewBox exists, and names symbols from the original id or title, adding a number when two names collide. The result lists every id with its usage markup. It does not optimise path data or recolour icons, so run a minifier such as SVGO first if your files carry editor metadata.

How to use it

Add the icons
Paste the SVG code of each icon into the box, or open an .svg or .txt file from your device.
Set a prefix
Type the prefix every symbol id should start with, such as icon or ui.
Copy the sprite
Copy the generated sprite and place it once near the top of your page body.
Draw an icon
Use the markup from the table, which references the symbol id, wherever the icon should appear.

Examples

Home and search icons

SVG icons: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Home</title><path d="M3 12l9-9 9 9"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Search</title><circle cx="7" cy="7" r="5"/></svg>
Id prefix: icon

Result SVG sprite: <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon-home" viewBox="0 0 24 24"><title>Home</title><path d="M3 12l9-9 9 9"/></symbol>
<symbol id="icon-search" viewBox="0 0 16 16"><title>Search</title><circle cx="7" cy="7" r="5"/></symbol>
</svg>
Icons in the set: 2
Sprite size (characters): 274
Icons with an assumed viewBox: 0

Found 2 svg element(s); each became a symbol that keeps its viewBox.
Ids use the prefix "icon" plus the original id, the title, or the icon number.
Place the sprite once near the top of the body, then draw an icon with a use element pointing at its id.

Two icons with titles become icon-home and icon-search, each keeping its own viewBox.

Icons without a viewBox

SVG icons: <svg width="32" height="32"><rect width="32" height="32"/></svg><svg><circle r="4"/></svg>
Id prefix: ui

Result SVG sprite: <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="ui-1" viewBox="0 0 32 32"><rect width="32" height="32"/></symbol>
<symbol id="ui-2" viewBox="0 0 24 24"><circle r="4"/></symbol>
</svg>
Icons in the set: 2
Sprite size (characters): 213
Icons with an assumed viewBox: 1

Found 2 svg element(s); each became a symbol that keeps its viewBox.
Ids use the prefix "ui" plus the original id, the title, or the icon number.
Place the sprite once near the top of the body, then draw an icon with a use element pointing at its id.

The first icon's 32 by 32 size becomes its viewBox; the second has no size at all, so 0 0 24 24 is assumed and flagged.

How it is calculated

symbol id = prefix + '-' + (original id, else title, else icon number); viewBox = original viewBox, else 0 0 width height, else 0 0 24 24

prefix: the text you choose, lowercased with spaces turned into hyphens
viewBox: the coordinate box that lets the symbol scale to any rendered size

Each complete svg element in the input is found, its comments removed, and its contents moved into a symbol element. A symbol is never drawn on its own; a use element with an href to its id renders a copy, which is how the SVG 2 specification defines reuse. Keeping the viewBox matters because the use element sizes the copy by it. Repeated names get -2, -3 and so on so every id stays unique.

When not to use it

Icons that need separate CSS styling of inner parts across pages are easier to manage inline.
If you need PNG or ICO favicons in several pixel sizes, this text tool does not rasterise images.

Common mistakes

Pasting icons that share internal gradient or clip ids, which then clash once they sit in one sprite.
Hard-coding a fill colour in the paths, which stops currentColor from recolouring the icon.

Frequently asked questions

Where does the sprite go in my HTML?

Place it once, usually right after the opening body tag. It is hidden with display none, so it takes no space, and any use element on the same page can point at its symbols by id.

How are the symbol ids chosen?

The original id attribute is used first, then the title element, then the position of the icon in your input. Each is lowercased, spaces become hyphens, and your prefix is added in front, so a title of Arrow Left becomes icon-arrow-left.

What happens to an icon without a viewBox?

If it has numeric width and height, those become the viewBox, so a 32 by 32 icon gets 0 0 32 32. With neither, 0 0 24 24 is assumed and a warning lists how many icons needed that guess.

Can the icons change colour with CSS?

Yes, if their paths use fill or stroke set to currentColor instead of a fixed colour. The drawn copy then inherits the text colour of the element around it.

Does it work with icons from Figma or Illustrator?

It does, though those exports often include metadata, fixed sizes and editor namespaces. Running them through an optimiser first keeps the sprite smaller and avoids stray attributes.

Is my SVG code uploaded?

No. The sprite is assembled in your browser from the text in the box, and files you open are read locally.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 28). Icon Set Generator. Tools Directory. Retrieved October 28, 2026, from https://tools.milunir.com/design/typography-and-icons/icon-set-generator/

MLA

Tools Directory Editorial Team. “Icon Set Generator.” Tools Directory, 28 Oct. 2026, https://tools.milunir.com/design/typography-and-icons/icon-set-generator/. Accessed 28 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Icon Set Generator.” Tools Directory. Last modified October 28, 2026. Accessed October 28, 2026. https://tools.milunir.com/design/typography-and-icons/icon-set-generator/.

Link

<a href="https://tools.milunir.com/design/typography-and-icons/icon-set-generator/">Icon Set Generator – Tools Directory</a>