Referencing External SVG Files with use
The use element can reference content in a separate SVG file via href, subject to browser same-origin and CORS restrictions.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Referencing an External File's Content
Setting a use element's href attribute to a URL like icons.svg#iconName references a specific symbol or element defined inside a completely separate SVG file, letting one central icon file serve as a shared source referenced from multiple pages without duplicating the icon markup on each page.
- href can reference a specific element by ID inside a separate SVG file
- One central icon file can serve as a shared source across multiple pages
- Avoids duplicating the same icon markup separately on every page
Browser Support and CORS Limitations
External SVG file references via use work reliably when the referenced file is same-origin, but cross-origin references face inconsistent browser support and CORS restrictions, so most production implementations either keep the icon file same-origin or inline the sprite content directly rather than relying on cross-origin references.
- Same-origin external references generally work reliably across browsers
- Cross-origin references face inconsistent support and CORS restrictions
- Most production setups keep the icon file same-origin or inline the sprite
Frequently Asked Questions
Can I reference an SVG icon file hosted on a different domain?
Cross-origin references via use face inconsistent browser support and CORS restrictions, so hosting the icon file on the same origin is the more reliable approach.
Does referencing an external file work the same as an inline sprite?
Visually yes, but external file references require an additional HTTP request and are more restricted by same-origin policy compared to an inline sprite already in the page.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG