Can I add my own SVG icons?

Yes — that is the core of the rebuilt tool. Paste a full … or just inner geometry (a , , , and so on) along with a name, and it is normalized and added to the system. You can add as many as you want, remove any, and the live preview, lint, and every export update instantly. The starter set and a one-click Starter pack are there to get you going.

What does "normalizing" an icon actually do?

For each icon it reads the original open tag to extract the viewBox (defaulting to 0 0 24 24 and flagging it if absent), strips any fixed width/height so the icon scales to its container, and — when recolor is enabled — rewrites hard-coded fill and stroke colours to currentColor while leaving none, transparent, and existing currentColor values alone. The geometry itself is parsed into an element tree and re-serialised deterministically, so every export starts from the same clean source.

How is the SVG parsed and previewed safely?

The engine parses SVG markup with string and regular-expression logic only — it never touches the DOM, DOMParser, or eval-like APIs — producing a small tree of tag-plus-attribute nodes. The page renders that tree through React.createElement, so the preview is built from real, sanitized React elements rather than injected HTML. There is no innerHTML or dangerouslySetInnerHTML anywhere, which keeps pasted markup from executing.

What does the lint check?

It runs four rules over the normalized set: no-viewbox (the source had no viewBox, so it may crop or scale wrong), hardcoded-color (a stuck fill/stroke that will not follow currentColor), duplicate-name (two icons share a name, which breaks IDs and exports), and empty (an icon with no drawable elements). Missing viewBox and stuck colour are warnings; duplicates and empties are errors.

Which export target should I choose?

Use the SVG sprite when you want every icon in one file referenced by — great for caching and inheriting colour. React or Vue components give you typed, importable, tree-shakeable icons. The CSS background sprite embeds each icon as a data URI so you can show icons with just a class. The index barrel re-exports every component, the TypeScript union plus ICON_NAMES array gives you a compile-checked icon name, and the JSON manifest lists names, components, categories, tags, and viewBoxes for a searchable picker.

Why does recoloring to currentColor matter for accessibility and theming?

An icon with a baked-in fill like #333 ignores your theme and stays the same colour in dark mode, against coloured buttons, or in a hover state. Rewriting it to currentColor means the icon takes the surrounding text colour automatically, so one definition works everywhere. For accessibility, the preview also reminds you to mark purely decorative icons with aria-hidden, and to give meaningful icons a title plus role="img" and an aria-label.

Icon System Builder

Paste any set of SVG icons and the tool normalizes them — standardizes the viewBox, strips width/height, and recolors hard-coded fills to currentColor — then ships a complete icon system from one source. A live grid previews every icon with adjustable size and colour, a built-in lint flags missing viewBoxes, stuck colours, and duplicate names, and you can export an SVG <symbol> sprite, React or Vue components, a CSS background sprite, a barrel index, a TypeScript name union, or a JSON manifest.

About this ToolHow it works, benefits & use cases

Most icon tools just repackage a fixed set of glyphs. This one starts by normalizing whatever SVGs you give it: it extracts and standardizes each viewBox, strips baked-in width/height so icons scale to context, and optionally rewrites hard-coded fill/stroke values to currentColor so every icon inherits text colour. Paste your own markup (a full <svg> or just the inner geometry), add as many icons as you like, and the tool parses each one into a safe element tree — using string and regex only, never the DOM — so the live grid can render real previews with adjustable size and colour. A built-in lint flags icons missing a viewBox, stuck colours that will not recolor, duplicate names, and empty geometry. From that single normalized source you can export seven targets: an inline SVG <symbol> sprite referenced by <use>, typed React components, a Vue single-file component, a CSS background sprite that embeds each icon as a data URI, a barrel index of named exports, a TypeScript icon-name union with a names array, or a JSON manifest with categories, tags, and viewBoxes. The full icon set and your options live in a shareable URL.

How to Use

1Start from the built-in set, add the Starter pack, or paste your own SVG markup with a name to add icons.
2Set the prefix (used in sprite IDs and CSS class names) and the default component size.
3Keep "Recolor to currentColor" on so hard-coded fills follow text colour, or turn it off to preserve original colours.
4Use the live grid to preview every icon, adjusting the preview size and colour, and toggle the decorative-vs-titled a11y note.
5Read the lint card — it flags missing viewBoxes, stuck colours, duplicate names, and empty icons.
6Pick an output target and copy or download it; share the URL to hand the exact icon system to a teammate.

Key Benefits

Normalizes any SVG: standardizes the viewBox, strips width/height, optionally recolors to currentColor
Parses SVGs with pure string/regex into a safe element tree — no DOMParser, no innerHTML
Live grid preview with adjustable size and colour, plus a per-icon decorative/titled a11y note
Built-in lint flags missing viewBoxes, hard-coded colours, duplicate names, and empty geometry
Seven export targets from one source: SVG symbol sprite, React, Vue, CSS sprite, index barrel, TS union, JSON manifest
React components are typed (extend React.SVGProps) and tree-shakeable; the TS union powers a typed icon picker
Configurable prefix and component size; the whole set + options live in a shareable URL

Common Use Cases

Cleaning up a pile of inconsistent SVGs into one normalized, theme-aware icon system
Producing an SVG <symbol> sprite you reference by ID across an app as a single request
Generating typed React or Vue icon components from your own glyphs
Emitting a CSS background sprite when you cannot change component markup
Building a typed, searchable icon picker from the TypeScript name union and JSON manifest

Live preview

5 icons

Preview size

Preview colour

home

user

settings

heart

All icons normalize cleanly

Generated output

SVG <symbol> sprite · 5 icons

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
    <circle cx="12" cy="7" r="4" />
  </symbol>
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="3" />
    <path d="M12 1v6m0 6v6m9-9h-6m-6 0H3" />
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8" />
    <path d="m21 21-4.35-4.35" />
  </symbol>
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
  </symbol>
</svg>

Usage

<svg class="icon" aria-hidden="true">
  <use href="#icon-home" />
</svg>

Icons

homeHome · 0 0 24 24
userUser · 0 0 24 24
settingsSettings · 0 0 24 24
searchSearch · 0 0 24 24
heartHeart · 0 0 24 24

Icon name

kebab-case; becomes a PascalCase component name.

SVG markup or path

System options

Prefix

Used in sprite IDs and CSS classes.

Component size

Recolor hard-coded fills to currentColor

Rewrites stuck fill/stroke values so icons inherit text colour.

Output target

One source, every delivery format

Inconsistent icons are the usual cause of a ragged UI — different viewBoxes, baked-in widths, and hard-coded colours that ignore your theme. This tool normalizes every icon to a common viewBox, strips fixed dimensions, and rewrites stuck fills to currentColor so a single icon inherits text colour everywhere it appears.

Pick the delivery that fits

An SVG <symbol> sprite is referenced by ID and stays a single request; React/Vue components give you typed, tree-shakeable imports; a CSS background sprite needs no markup changes; and the TypeScript name union plus JSON manifest power a typed, searchable icon picker.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Icon System Builder

How to Use

Key Benefits

Common Use Cases

Live preview

Usage

Icons

System options

Output target

One source, every delivery format

Pick the delivery that fits

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Icon System Builder