Hover: os ícones mudam de cor

Então, a minha ideia do hover era:

• Mudar a cor de fundo
• Mudar a cor da fonte
• Mudar a cor do ícone

Nesse último demorei um pouco para achar a solução, mas desde início imaginei que fosse uma troca de imagem, então já adicionei duas imagens na pasta, o github-hover.png e o linkedin-hover.png, mas não fazia ideia como eu ia fazer essa troca, mas dei uma olhada nos projetos deste fórum e consegui minha solução, e foi a seguinte:

1. Criei uma classe para os ícones, de nome "icone"
2. Adicionei a imagem dos ícones que eu queria trocar, e coloquei a classe "icone-hover"
3. No CSS, fiz um display: none com a classe "icone-hover"
4. No hover dos botões, fiz a troca do display das duas classes, "icone" para none e "icone-hover" para block

Assim funcionou bonitinho! O resultado foi esse

Segue os blocos de código que eu fiz:

HTML (Apenas dos botões)

<div class="apresentacao__links">
    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
    <a class="apresentacao__links__botao" href="https://www.linkedin.com/in/gabriel-brito-1951831bb/">
        <img src="./assets/linkedin.png" alt="Ícone LinkedIn" class="icone">
        <img src="./assets/linkedin-hover.png" alt="Ícone LinkedIn Hover" class="icone-hover">
        LinkedIn
    </a>
    <a class="apresentacao__links__botao" href="https://github.com/Gabriel-Brito1/Portfolio-projetos">
        <img src="./assets/github.png" alt="Ícone Github" class="icone">
        <img src="./assets/github-hover.png" alt="Ícone Github Hover" class="icone-hover">
        Github
    </a>
</div>

CSS (Apenas dos botões)

.icone-hover {
    display: none;
}

.apresentacao__links__botao:hover {
    /* background-color: #272727; */
    background-color: #22D4FD;
    .icone-hover {
        display: block;
    }
    .icone{
        display: none;
    }
    color: black;

}