Styling SVG use Elements
The use element clones referenced content with unusual CSS inheritance behavior — here's how styling actually propagates.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How CSS Inheritance Works with use
Content referenced via `<use href="#icon">` behaves somewhat like a shadow DOM clone — CSS properties that naturally inherit (like `fill: currentColor` or `color`) pass through from the `<use>` element's context into the referenced content, but styles applied directly to the original `<symbol>` or shape via a class selector may not apply to the clone as expected.
- Inheritable properties (currentColor, font-related) pass through to clones
- Class-based styles on the original definition may not apply to instances
- This shadow-DOM-like behavior surprises many developers initially
Reliable Styling Patterns
For predictable per-instance styling, apply CSS directly to the `<use>` element itself (fill, stroke, transform all work this way) rather than trying to target the original symbol's internal paths, and design source icons with `fill="currentColor"` so each use instance can independently control color via its own inherited color value.
- Style the <use> element directly for fill, stroke, and transform
- currentColor on source icons enables independent per-instance coloring
- Avoid relying on class selectors targeting the original symbol's internals
Frequently Asked Questions
Why doesn't my CSS class targeting a path inside a symbol affect use instances?
The use element's referenced content behaves similarly to shadow DOM — external selectors targeting internal elements of the original symbol often don't reach the cloned instance as expected; style the use element itself instead.
Can each use instance of the same icon have a different color?
Yes — set fill="currentColor" in the source symbol, then apply a different CSS color value to each individual use element (or its wrapping context), and each instance renders independently colored.
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