[Projeto] Faça como eu fiz.

HTML.

<div class="card__botoes">

    <ol class="botoes">

        <li class="botoes__item">

            <input type="checkbox" id="favoritos2" class="botoes__item-favorito">

            <label for="favoritos2" class="botoes__item-favorito-favoritado">
                <img src="assets/Favoritos.svg" alt="Icone de favoritos" class="botao__favorito">

                <img src="assets/Favoritos clicado.png" alt="Icone de favoritos" class="botao__favoritado">    

            </label>
           
        </li>

Css.

botao__favoritado {
    display: none;
    width: 51px;
    height: 45px;
}
.botoes__item-favorito {
    display: none;
}
.botoes__item-favorito:checked ~ .botoes__item-favorito-favoritado > .botao__favorito {
    display: none;
}
.botoes__item-favorito:checked ~ .botoes__item-favorito-favoritado > .botao__favoritado {
    display: block;
}

Olá, Estanislau, como vai?

O seu código está muito bem estruturado. Você fez um excelente trabalho aplicando os conceitos de responsividade e interatividade. Continue assim, está no caminho certo.

Fique à vontade para compartilhar mais dúvidas sempre que necessário. O fórum está à disposição.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!