[Dúvida] Ícone de favorito

Fiz uma pequena alteração no projeto original do curso. No original quando você clicava no ícone de favorito não acontecia nada, mas alterei pra que quando clicasse ele ficasse todo preenchido, só que estou com um problema kkkkkkk Quando toco no ícone de sacola ele tbm preenche o coração, gostaria de saber como resolver

Esse é o código html

<ul class="botoes">
                        <input type="checkbox" id="coracao">
                        <label class="botoes__item icone" for="coracao">
                            <svg width="35" height="32" viewBox="0 0 24 22" fill="none" class="heart"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M20.8397 3.49592C20.329 2.98492 19.7226 2.57957 19.0551 2.303C18.3876
                                 2.02644 17.6722 1.88409 16.9497 1.88409C16.2273 1.88409 15.5118 2.02644
                                 14.8444 2.303C14.1769 2.57957 13.5705 2.98492 13.0597 3.49592L11.9997
                                 4.55592L10.9397 3.49592C9.90805 2.46423 8.50877 1.88463 7.04974 1.88463C5.5907
                                 1.88463 4.19143 2.46423 3.15974 3.49592C2.12805 4.52761 1.54845 5.92689 1.54845
                                 7.38592C1.54845 8.84495 2.12805 10.2442 3.15974 11.2759L4.21974 12.3359L11.9997
                                 20.1159L19.7797 12.3359L20.8397 11.2759C21.3507 10.7652 21.7561 10.1587 22.0327 
                                 9.49127C22.3092 8.82382 22.4516 8.10841 22.4516 7.38592C22.4516 6.66343 22.3092 
                                 5.94802 22.0327 5.28056C21.7561 4.61311 21.3507 4.00668 20.8397 3.49592V3.49592Z"
                                    stroke="#002F52" stroke-width="2" stroke-linecap="" stroke-linejoin="" />
                            </svg>
                        </label>
                        <li class="botoes__item"><img src="src/img/Compras.svg" alt=""></li>
                    </ul>

e esse é o código do css:

#coracao{
    display: none;
}

#coracao:checked + .icone > svg{
    animation: preencher;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes preencher {
    0% {
        fill: transparent;
    }
    100% {
        fill: #002F52;
    }
}

.card__botoes{
    display: flex;
    justify-content: space-between;  
}

.botoes{
    display: flex;
}

.botoes__item{
    margin: 0 0.6em;
}

.botoes__ancora{
    background-color: var(--laranja);
    padding: 1em 1.8em;
    color: var(--branco);
    font-weight: 700;
    text-decoration: none;
}