menu hamburger

Pessoal,

No Figma o menu Hambuger inverte as cores. O background fica com a cor #002F52 e os traços ficam brancos ao clicar.

não estou conseguindo fazer essa alteração de forma alguma.

Eu tentei fazer da seguinte forma:

.container___botao:checked ~.cabecalho__menu-hamburger > path { fill: var(--cor-branca); }

.container___botao:checked ~.cabecalho__menu-hamburger > rect { fill: #002F52; }

Pq não muda?

Será que é pq está como background-image? e aí nesse caso teria de usar o filter?

Também tentei alterar os ícones por meio de hover.

em cada imagem svg eu incluí a class ícones

<div class="container">
        <a href="#">
          <img src="imgs/Favoritos.svg" alt="Meus favoritos" class="icones" />
        </a>
        <a href="#">
          <img
            src="imgs/Compras.svg"
            alt="Carrinho de compras"
            class="icones"
          />
        </a>
        <a href="#">
          <img src="imgs/Usuario.svg" alt="Meu perfil" class="icones" />
        </a>
      </div>

No CSS eu fiz:

.icones:hover path{
  fill: #FD8325;
}

mas não muda a cor dos ícones, pq?