How to Use SVG in Web Components
Native Web Components with Shadow DOM give SVG icons true style encapsulation — here's how to build a reusable icon component.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Shadow DOM Encapsulation for Icons
An `<my-icon>` custom element with SVG markup in its Shadow DOM is fully style-encapsulated — page CSS can't accidentally override the icon's internal paths, and the icon's own styles can't leak out either, making Web Components ideal for building a truly portable, framework-agnostic icon library.
- Shadow DOM prevents page CSS from leaking into icon internals
- Icon internals can't accidentally style the surrounding page
- Framework-agnostic: the same component works in React, Vue, or plain HTML
Theming Through CSS Custom Properties
Since Shadow DOM blocks normal CSS inheritance, expose specific theming hooks via CSS custom properties (`--icon-color`, `--icon-size`) that the component reads internally — this gives consumers controlled styling access without breaking the encapsulation that makes Web Component icons reliable across contexts.
- CSS custom properties pierce Shadow DOM for controlled theming
- Expose only intentional styling hooks, keep everything else encapsulated
- Consumers style icons without needing to know internal SVG structure
Frequently Asked Questions
Do currentColor fills work through Shadow DOM boundaries?
No — currentColor doesn't naturally pierce Shadow DOM the way CSS custom properties do. Use a custom property like --icon-color and reference it inside the component's internal styles instead.
Can I use Web Component icons in a React or Vue app?
Yes — that's a primary benefit. Native Web Components work in any framework or no framework at all, making them a good choice for a design system icon library shared across multiple frontend stacks.
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