yo en tu caso, lo que haría es cambiar/añadir una clase css con los diferentes colores.
icono1.classList.replace("color_1", "color_2"); // Intercambiar clases
Por si sólo prefieres añadir, o en algún momento quitar la clase, también te facilito las siguientes lineas:
icono1.classList.remove("color_1"); // Eliminar clase
icono1.classList.add("color_2"); // Añadir clase
De este modo, aplicando diferente color en la nueva clase en estado :hover, se mostrará como buscas con un código sencillo.
¿Te sirve este forma?
Un saludo.
Edit:
Añado un ejemplo
i = 1;
function color(){
const list = document.getElementById("boton").classList;
list.remove("button1","button2","button3","button4");
list.add("button" + i);
if(i < 4){ i++; }
else{ i = 1;}
}
button{
background-color:#c2c2c2;
border:none;
padding:1em;
border-radius:5px;
font-weight:800;
transition-duration:0.2s;
}
button:hover{
color:#fff;
}
.button1:hover{color:blue}
.button2:hover{color:red}
.button3:hover{color:yellow}
.button4:hover{color:green}
<button onmouseleave="color()" id="boton">Botón!</button>
Edit 2: Me ha dado envidia lo que han hecho los demás de que tenga varios colores y lo he añadido a mi ejemplo.