[Bug] Ícones desalinhados

O ícone de sacola está levemente desalinhado se comparado com o ícone de favoritos, não consegui encontrar o motivo para isso.

<div class="card">
            <div class="card__descricao">
                <div class="descricao">
                    <h3 class="card__titulo"> Talvez você também se interesse por... </h3>
                    <h2 class="descricao__titulo__livro"> Angular 11 e Firebase </h2>
                    <p class="descricao__texto"> Construindo uma aplicação integrada com a plataforma do Google. </p>
                </div>
                <img class="imagem__card" src="images/Angular.svg">
            </div>
            <div class="card__botoes">
                <ul class="botoes">
                    <li class="botoes__item"> <img src="images/Favoritos.svg"></li>
                    <li class="botoes__item"> <img src="images/Sacola.svg"></li>
                </ul>
                <a class="botao__saiba__mais" href="#"> Saiba mais </a>
            </div>
        </div>

.card{
    margin: 1em;
    padding: 1em;
    border-radius: 10px;
    background: var(--branco-principal);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card__titulo{
    color: var(--amarelo-principal);
    font-weight: var(--weight-secundario);
}

.descricao__titulo__livro{
    color: #002F52;
    font-size: var(--tamanho-fonte-3);
    font-weight: var(--weight-secundario);
    margin: 1em 0em;

}

.descricao__texto{
    color: rgba(0, 0, 0, 0.85);
    font-size: var(--tamanho-fonte-1);
}

.imagem__card{
    margin: 0em 0em 0em 1em;
}

.card__descricao{
    display: flex;
}

.card__botoes{
    margin: 1em 0em;
    display: flex;
    justify-content: space-between;
}

.botoes{
    display: flex;
}

.botoes__item{
    margin: 0em 0.5em;
}

.botao__saiba__mais{
    background-color: var(--amarelo-principal);
    text-decoration: none;
    padding: 1em;
    color: var(--branco-principal);
    font-weight: var(--weight-secundario);

}