animação no botão

olá, tentei colocar uma animação no botão de favoritos, com um coração azul, seguindo os passos de um conteúdo extra incluso no curso. entretanto, deu ruim e não fica azul. o que será que fiz errado? (a setinha do lado do coração foi um erro que eu já tirei, ignorem)

código no html:

<!-- 1º coluna -->
                    <ul class="botões">
                        <li class="botões__item">
                            <input type="checkbox" id="favoritos">
                            <label class="icone" for="favoritos">
                            <svg width="51" height="48" viewBox="0 0 51 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M33.4087 8C30.3743 8 27.4621 9.41253 25.5613 11.6447C23.6604 
                            9.41253 20.7482 8 17.7138 8C12.3427 8 8.12256 12.2202 8.12256 17.5913C8.12256 
                            24.1831 14.0517 29.5542 23.0326 37.7155L25.5613 40L28.0899 37.6981C37.0708 
                            29.5542 42.9999 24.1831 42.9999 17.5913C42.9999 12.2202 38.7798 8 33.4087 
                            8ZM25.7356 35.1172L25.5613 35.2916L25.3869 35.1172C17.086 27.6011 11.6103 
                            22.6311 11.6103 17.5913C11.6103 14.1035 14.2261 11.4877 17.7138 11.4877C20.3994 
                            11.4877 23.0152 13.2142 23.9395 15.6033H27.2005C28.1073 13.2142 30.7231 11.4877 
                            33.4087 11.4877C36.8964 11.4877 39.5122 14.1035 39.5122 17.5913C39.5122 22.6311 
                            34.0365 27.6011 25.7356 35.1172Z" fill="url(#paint0_linear_109809_138)"/>
                            <defs>
                            <linearGradient id="paint0_linear_109809_138" x1="22.6952" y1="4.15999" x2="72.9448" y2="11.4119" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#002F52"/>
                            <stop offset="1" stop-color="#326589"/>
                            </linearGradient>
                            </defs>
                            </svg>
                            </label>

                            
                        </li>
                    

código no styles.css:

#favoritos {
    display: none;
  }

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

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