Build SVG symbol sprite
Enter the icon names home, search and user and get one hidden SVG sprite with a symbol for each, plus a use snippet per icon to paste where it appears. Empty lists, duplicates and invalid names are refused. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Ids
- home, search, user
- Quantity
- 3
- View box
- 0 0 24 24
- Id prefix
- Symbol ids
- home, search, user
SVG symbol sprites keep icon systems small, cacheable, and accessible: one hidden document holds reusable symbols, and every button or nav item points at them with a short use element. Designers and front-end engineers still waste time hand-writing the wrapper shell, renaming ids, and keeping use sites in sync when a new icon lands in the set. This capability accepts a non-empty list of icon identifiers, optional viewBox and id prefix, and returns deterministic sprite markup plus a use snippet for each final symbol id.
What an SVG symbol sprite is and why id lists matter
A classic SVG icon sprite is a single root svg element, usually hidden with display none and marked aria-hidden so assistive technology skips the definition block. Inside it, each icon is a symbol element whose id is the stable name your product uses everywhere: home, search, cart, user-settings. Path and geometry live as children of those symbols; this tool emits the empty symbol shells with a shared viewBox so your asset pipeline or designer export can inject geometry later without rewriting every consumer.
At call sites you reference a symbol with use and an href fragment that matches the symbol id, typically wrapped in a small svg for sizing and currentColor styling. Keeping that id vocabulary as a single list—not as copy-pasted markup—avoids drift between Figma exports, React components, email footers, and static marketing pages.
What you enter, what you get back, what is refused
Each entry is trimmed; blanks are rejected. Every id must match a practical SVG and XML name token: a letter or underscore first, then letters, digits, underscore, period, colon, or hyphen. That rule blocks spaces and characters that break attributes or fragment references.
Attribute values are escaped for amp, quote, and angle brackets so odd but legal tokens stay safe inside markup. Failed validation is not billed.
What you can do with it
Component library and Storybook docs
Keep Storybook knobs and README examples aligned with real symbol ids so developers never reference a missing fragment.
CMS and marketing page shortcodes
Give content authors paste-ready use markup for nav and footer icons without hand-editing SVG definitions.
FAQ
What does the SVG symbol sprite builder return?
You add path geometry inside the symbols in your asset pipeline.
What happens if the id list is empty?
An empty catalogue is not a valid sprite publish; fix the list and retry. Failed validation is not billed.
How do I add a prefix such as icon- to every symbol?
Enter the prefix once and it is placed in front of every name, so home becomes icon-home. This keeps your icons from colliding with an identically named symbol from another library on the same page. The prefix must itself be a valid name.
Which characters are allowed in an icon name?
A name must start with a letter or an underscore, followed by letters, digits, underscores, periods, colons or hyphens. Spaces and other symbols are refused because they would break the markup or the link from a use element to its symbol.
What happens if two icons end up with the same name?
The sprite is not built and you get a clear message, even when the clash only appears after the prefix is added. Fixing the list is safer than letting one symbol silently overwrite another in the browser.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/web/svg-symbol-sprite-build \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"ids":["home","search","user"]}'const res = await fetch("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"ids": [
"home",
"search",
"user"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-symbol-sprite-build",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"ids": [
"home",
"search",
"user"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"ids":["home","search","user"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"ids":["home","search","user"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-symbol-sprite-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"ids": [
"home",
"search",
"user"
]
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_symbol_sprite_build",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
timeout_sec | 30 |
max_crawl_pages | 25 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Empty lists fail with invalid_input so pipelines never publish a hollow sprite.
What an SVG symbol sprite is and why id lists matter
When the list is empty there is nothing to publish: this endpoint rejects empty id arrays instead of returning a sprite with zero symbols, which would pass a careless green build and ship broken UI. Optional id_prefix (for example icon-) lets monorepos namespace symbols so third-party widgets do not collide with your own home id. Optional view_box defaults to the common 0 0 24 24 canvas used by Material-style sets, but you can pass any four-number viewBox so 16-pixel or custom artboards stay consistent across the whole sprite.
Input contract, response shape, and validation rules
POST a JSON body with ids, a required non-empty array of strings (aliases icon_ids and icons are accepted). Duplicate final symbol ids—after applying optional id_prefix—fail with a clear invalid_input message so you fix the catalogue instead of overwriting symbols in the browser. view_box is optional and defaults to 0 0 24 24; when provided it must be four space-separated numbers with positive width and height. id_prefix is optional and empty by default; when set it must itself be a valid name token so the concatenated symbol id remains legal. On success the body includes count, the normalized view_box and id_prefix, symbol_ids in input order, sprite_markup as a multiline hidden svg containing one empty symbol per id, use_snippets as objects with id and snippet fields ready to paste, and use_list_markup joining those snippets with newlines for quick demos. Successful calls use prepaid KIT balance at the published $0.002 base price because this is pure parse work with no model tokens and no outbound network.
Where sprite and use generation earns its keep
Design-system teams generate the sprite shell whenever an icon token file changes, then open a PR that only adds path children inside existing symbols. Marketing sites and CMS themes paste use snippets into rich text or shortcode libraries without teaching authors full SVG syntax. Keep id lists in version control, reject empty publishes, and you get a single source of truth for SVG symbol sprites without standing up a full icon CDN for shell markup alone. Component libraries ship Storybook controls that list symbol ids from the same API response so docs never invent an id the sprite does not define. Accessibility reviews check that the definition block is aria-hidden and that decorative uses carry aria-hidden and focusable false as this endpoint emits by default—authors still add aria-label or title when an icon is the only visible name of a control. Multi-brand products map brand prefixes through id_prefix so one pipeline emits brand-a-home and brand-b-home without forking handlers. Edge workers and static generators can call the same module shape on the free browser path for previews and on the API path for bulk rebuilds after a design dump.
Integration use cases
Design-token and icon catalogue exports
Turn a JSON list of icon names into a hidden SVG sprite shell and matching use snippets whenever the catalogue changes in CI.
Technical questions
Can I namespace ids with a prefix?
Yes. Set id_prefix (for example icon-) so home becomes icon-home. Duplicates after the prefix are rejected.
How do I set the viewBox for every symbol?
Pass view_box as four numbers such as 0 0 24 24 (the default) or 0 0 16 16. Width and height must be positive.
What does building an SVG symbol sprite cost?
The browser tool is free. API requests use prepaid KIT balance at $0.002 per successful call; invalid input is not billed.