[Duda] ¿Como puedo cambiar una imagen svg x otra?

Entendemos que desea cambiar la imagen al pasar el mouse sobre ella. Para lograr esto, puede intentar agregar una clase única para cada imagen. Luego, puede asignar la clase a la imagen con el color deseado y agregar una regla de estilo CSS para mostrar la imagen con la clase al pasar el mouse sobre ella. Por ejemplo, si la imagen con el fondo blanco se llama "linkedin.svg" y la imagen con el fondo azul se llama "linkedin-blue.svg", puede agregar una clase a cada uno que se pueda usar como selector en CSS. Después, puede agregar la regla de estilo CSS apropiada para mostrar la imagen correspondiente en el hover:

.linkedin-blue: hover {display: block;}

Esperamos que esto haya sido útil. Si tiene alguna pregunta más, ¡no dude en hacérnoslo saber!

Un saludo!

hola de nuevo comparto la modificación de mi código el cual aún contiene errores

HTML

 <footer>
      <p class="autor">Autor: Marcos González Chávez</p>

      <a href="#" class="red-social">
        <img src="Imagenes/github.svg" class="icon" alt="icono de Github">
        <img src="Imagenes/github-black.svg" class="icon-color" alt="icono Github">
      </a>

      <a href="#" class="red-social">
        <img src="Imagenes/linkedin.svg" class="icon" alt="Icono de Linkedin">
        <img src="Imagenes/linkedin-blue.svg" class="Icon-color" alt="Icono linkedin">
      </a>
      <p>&copy; Copyright Junior Developer Alura 2023</p>
    </footer>

Código CCS

footer{
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}


.autor{
    font-size: 12px;
}

.icon{
    width: 24px;
    height: 24px;
}

.icon-color{
    width: 24px;
    height: 24px;
}

.red-social img:last-child{
    display:none;
}

.red-social:hover img:last-child{
    display: block;
}

.red-social:hover img:first-child{
    display: none;
}

En la imagen 1 se puede ver como los iconos se encuentran de color blanco y centrados, mientras que en la imagen 2 los iconos ya con el color correspondiente se muestran alineados a la izquierda Lo que busco es poder colocar los en la misma posición que los iconos blancos no se si deba agregar una pocision relative o un float para poder colocarlos me pueden ayudar

Nota: en el documento de estilos el body lleva lo siguiente

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

Pienso que no debería afectar

Hola si entendí bien quieres cambiar la imagen por otra cuando pases el cursor sobre el icono? lo puedes hacer con javascript añadiendo en la imagen los atributos onmouseover y onmouseout y asignarles una funcion que deben ejecutar por ejemplo:

<img src="Imagenes/github.svg" class="icon"  onmouseover="hover(this)" onmouseout="unhover(this) alt="icono de Github">
                                                                                                                      y en tu script 
                                                                                    function hover(element){
                                                                                        element.setAttribute('src',"Imagenes/github-black.svg");
                                                                                        }
                                                                                    function unhover(element){
                                                                                                        element.setAttribute('src',"Imagenes/github.svg");
                                                                                                                                                      }

o tambien puedes cambiar los iconos directamente a codigo de svg y solo agregar el efecto con css cambiando el fill de ese elemento.