How to Use SVG as a CSS mask-image
Recolor and reveal graphics by applying an SVG shape as a CSS mask-image.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Masking with an SVG
CSS mask-image lets an SVG define which parts of an element are visible. This is a popular trick for recoloring monochrome icons: set the SVG as a mask and control the color with background-color.
- Set mask-image: url(icon.svg) on an element
- Recolor via background-color, not the SVG itself
- Use mask-size and mask-repeat to control layout
Practical Recoloring Setup
Convert your icon to a solid-shape SVG, apply it as a mask on a div, and the div's background-color shows through the shape — letting you theme one icon many colors via CSS.
- Convert icons to solid-shape SVGs for masking
- Theme one icon many colors with CSS variables
- Include -webkit-mask-image for broad support
Frequently Asked Questions
Why use SVG mask-image instead of an img tag?
Masking lets you recolor the icon purely with CSS background-color, so a single SVG can be themed any color without editing the file.
Do I need a -webkit- prefix for mask-image?
For the widest browser support, include both mask-image and -webkit-mask-image with the same value.
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