I have a html generated in this way.

<h2 class="mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0" id="know-your-life">
  <a aria-hidden="true" tabindex="-1" href="#know-your-life">
    <span class="icon icon-link"></span>
  </a>
  Know your life
</h2>

The icon displays correctly in dark mode, but it’s not visible in light mode. Here is the HTML and CSS I’m using:

:where(h1, h2, h3, h4, h5, h6) {
  position: relative;
}

:where(h1, h2, h3, h4, h5, h6) span.icon.icon-link {
  display: none;
}

:where(h1, h2, h3, h4, h5, h6):hover span.icon.icon-link {
  display: inline;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill="%23000000" fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 0.8em;
  height: 0.8em;
  width: 0.8em;
  padding-left: 1em;
  padding-right: 0.5em;
  cursor: pointer;
}

/* Dark mode icon */
@media (prefers-color-scheme: dark) {
  :where(h1, h2, h3, h4, h5, h6):hover span.icon.icon-link {
    filter: invert(1);
  }
}

In dark mode, the icon appears correctly with the intended color. However, in light mode, the icon is not visible at all. I suspect the issue is related to the color settings or the filter property, but I’m not sure how to fix it.