House icon as a CSS mask

The colored houses on this page are drawn through a CSS mask and painted with the surrounding text color. Apart from the comparison in the first row, they all use one external file, house-mask.svg. Open the page from a server (for example python -m http.server in this folder, then http://localhost:8000/). Opened straight from disk, browsers block the mask files and the icons disappear.

The image, the original as a mask, the prepared file as a mask

House icon shown as an image, in its own navy
<img>: keeps the file's navy; the teal text color has no effect
Original file as a mask: a solid shape, because the white details are opaque too
Prepared file as a mask: the details are holes, so the icon takes the text color

It follows the text color

The last one is a different download that needed no preparation: its details were already transparent.

Sizes

Home (16 px)

Home (24 px)

Home (32 px)

Home (48 px)

In a navigation bar

Hover a link: the icon changes color with the text, because it is painted with currentColor.

Button and icon-only link

The mask sits on a child span, not on the button, so the focus outline is not clipped. The icon is hidden from assistive technology; the button's text or the link's aria-label names the control.