SVG Symbol

An alternative to font-based icons — using SVG symbol sprites to embed scalable, multi-color icons directly in HTML.

What Are SVG Symbol Sprites?

SVG symbol sprites bundle multiple SVG icons into a single file. Each icon is defined inside a <symbol> element with a unique id. To use an icon, you reference it with <use href="#icon-id">. The sprite is loaded once — either inline or as an external file — and individual icons are rendered anywhere on the page.

This is a fundamentally different approach from icon fonts. Instead of mapping Unicode code points to font glyphs, you're using native SVG elements. Each icon retains its full SVG capabilities: multiple colors, gradients, filters, and fine-grained accessibility attributes. The trade-off is slightly more complex markup and styling conventions compared to the pure CSS approach of font icons.

How It Works

A sprite file is a regular SVG document containing one or more <symbol> elements. Each symbol defines a self-contained icon with its own viewBox:

icons.svg (the sprite file)

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

The outer <svg> is hidden with style="display:none" so it doesn't take up space on the page. The symbols inside are invisible until referenced. To render an icon, use the <use> element:

Using symbols in HTML

<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Style the icons with CSS, using fill and stroke instead of the font-based color property:

CSS for SVG icons

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

Using fill: currentColor lets the icon inherit the text color of its parent element, similar to how font icons work with the color property.

Symbol vs Font Icons

Pros of Symbols

Multi-color support — each path can have its own fill and stroke
Each icon is a real SVG element with better accessibility
No Unicode mapping needed — reference icons by readable names
Sharper rendering — no font hinting issues or subpixel artifacts
Individual icon parts can be animated independently
Works with any SVG feature: gradients, filters, clip-paths, masks

Cons of Symbols

More verbose markup (<svg><use> vs <i class="icon">)
Can't easily style with CSS color — need fill/stroke
External sprites have CORS implications for cross-origin loading
Larger total file size than compressed font formats
More HTML weight per icon usage
No ::before/::after pseudo-element support

Loading Strategies

There are three main ways to load an SVG symbol sprite into a page, each with different trade-offs:

Inline sprite

Paste the entire sprite SVG directly into the HTML <body>. This is the simplest approach — no CORS issues, no extra HTTP request. The symbols are immediately available to any <use> reference on the page. Works best for single-page applications or when you have a small icon set (under ~50 icons).

External sprite

Load the sprite as an external file via <use href="icons.svg#home">. This keeps your HTML clean and lets the browser cache the sprite separately from the page. However, it has CORS implications: the sprite must be served from the same origin, or the server must set appropriate Access-Control-Allow-Origin headers. Note that Internet Explorer does not support external <use> references — use the svg4everybody polyfill if you need IE support.

JS injection

Load the sprite file via fetch() and inject it into the DOM at runtime. This combines the cacheability of external sprites with the reliability of inline sprites — the injected SVG becomes part of the document, so <use> references work without CORS restrictions. Bobcorn generates this approach: a JS file that fetches and registers all symbols when loaded.

JS injection approach (Bobcorn output)

<!-- Load the generated JS sprite -->
<script src="icons-symbol.js"></script>

<!-- Then use normally: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

The JS file creates a hidden <svg> element containing all <symbol> definitions and appends it to the document body. Once loaded, icons are referenced identically to the inline approach.

When to Use SVG Symbols

SVG symbol sprites are the right choice when your project needs capabilities that font icons can't provide:

Multi-color icons — when icons use more than one color, gradients, or complex fills that a single-glyph font can't represent
Accessibility is a top priority — each icon can include a <title> element and aria-label attribute, giving screen readers meaningful descriptions
Animated icon parts — you need to animate individual paths or groups within an icon (e.g., a spinning gear inside a settings icon)
SVG-heavy projects — your application already uses inline SVG extensively, so symbols fit naturally into the existing architecture
Maximum rendering sharpness — font hinting can cause alignment issues at small sizes; SVG symbols render pixel-perfectly at any dimension

When to Stick with Font Icons

Font icons remain the better choice in several common scenarios:

Large icon sets (200+) — a compressed WOFF2 font file is significantly smaller than an SVG sprite with the same number of icons
All monochrome icons — if every icon is a single color, font icons give you the simplest integration with no trade-offs
CSS-only integration — font icons require only a stylesheet link and CSS classes, with no JavaScript or extra markup
Legacy systems — projects already using icon fonts don't gain enough from switching to justify the migration effort
Pseudo-element support — you need icons in ::before or ::after pseudo-elements, which only work with font glyphs

In Bobcorn

Bobcorn can export your icons as a JS symbol sprite file alongside the font files. Enable the JS option in the export dialog. The generated file creates an inline SVG sprite and registers all symbols when loaded. You can use both approaches in the same project — fonts for simple UI icons, symbols for complex colored illustrations.

Tip

You don't have to choose one or the other. Many design systems use font icons for the bulk of their monochrome UI icons (buttons, navigation, form elements) and SVG symbols for a handful of multi-color illustrations or animated icons. Bobcorn's export dialog lets you generate both in a single export.