Mastering CSS currentColor with SVG Masks for Dynamic UI Icons

In standard CSS background-image: url('data:image/svg+xml,...') declarations, the icon's fill and stroke hex colors are permanently baked into the URL string. The modern, production-tested solution is combining CSS mask-image with the native currentColor keyword.

1. The Mask Syntax

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'%23000\'%3E%3Cpath d=\'M5 12h14M12 5l7 7-7 7\'/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'%23000\'%3E%3Cpath d=\'M5 12h14M12 5l7 7-7 7\'/%3E%3C/svg%3E');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

2. Dynamic Theming on Hover

Because the color is controlled by currentColor, changing the text color on :hover or switching to dark mode recolors the icon with zero extra network downloads or class toggles:

.btn:hover {
  color: #38bdf8;
}