SVG Icons as Native Custom Elements
A native custom element wrapping SVG markup gives you a reusable, framework-free icon component with encapsulated styling.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Defining a Custom Element for Icon Reuse
Extending HTMLElement and registering it with customElements.define() lets you create a reusable <app-icon name="home"></app-icon> element that internally looks up and renders the corresponding SVG markup based on its name attribute, giving vanilla JavaScript projects a component-like icon system without adopting a full framework.
- customElements.define() registers a reusable named icon element
- The element internally maps a name attribute to the correct SVG markup
- Provides component-like icon reuse without adopting a full framework
Encapsulating Icon Styles with Shadow DOM
Attaching a shadow root within the custom element's constructor and rendering both the SVG markup and its styles inside that shadow root encapsulates the icon's styling from the rest of the page, the same encapsulation benefit frameworks like Lit provide, but achievable with only native browser APIs and no build tooling dependency.
- Shadow root attachment encapsulates icon styling from the rest of the page
- Achieves the same style encapsulation benefit as component frameworks
- Requires only native browser APIs, with no build tooling dependency
Frequently Asked Questions
Do I need a build step to use native custom elements for SVG icons?
No, custom elements are a native browser API and work directly in a plain script tag with no build step required, though a build step remains useful for other project needs like bundling or minification.
Can a custom element icon component accept a size or color as an attribute?
Yes, observing additional attributes like size or color in the custom element's attributeChangedCallback lets you update the internal SVG's dimensions or fill color reactively when those attributes change.
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