SVG symbol and use: Reusable Vector Definitions

Defining Symbols

A symbol is an SVG element that can be instantiated with use.

• <defs><symbol id='arrow' viewBox='0 0 24 24'><path d='M5 12h14M12 5l7 7-7 7'/></symbol></defs>
• Symbol is not rendered until referenced with <use>
• Symbol can have its own viewBox — crucial for correct scaling
• Define all symbols at the top of the SVG or in a hidden sprite
• <symbol id='...'>: the id is what you reference with href

Using Symbols with use

Reference symbols anywhere with the use element.

• <svg class='icon'><use href='#arrow'/></svg>
• Size: control via CSS on the wrapping <svg>: .icon { width: 24px; height: 24px; }
• Color: set fill='currentColor' on paths inside symbol; control with CSS color
• External sprite: <use href='/sprite.svg#arrow'/> — references from a separate file
• Stacked use: multiple use elements with the same symbol — each can have different position/size

symbol vs g vs defs

Understanding when to use each grouping mechanism.

• <symbol>: reusable template — not rendered until used, has own viewBox
• <g>: simple group — rendered in place, no own viewBox
• <defs>: storage container — anything in defs is not rendered until referenced
• Use symbol for: icon definitions, repeated graphical elements
• Use g for: grouping related paths in a composition for transforms/opacity
• Use defs for: gradients, filters, clip paths, and symbols

Frequently Asked Questions

Related guides