Social Icons hover color

To change social icons hover color, you can use these code to Custom CSS box.
#1. Header Social Icons

header#header a.icon:hover use {
    fill: #f1f;
}

#2. Header Social Icons – Different Color
Each icon will have a different hover color.

header#header a.icon:nth-child(1):hover use {
    fill: #f1f;
}
header#header a.icon:nth-child(2):hover use {
    fill: green;
}
header#header a.icon:nth-child(3):hover use {
    fill: #fff;
}

#3. Social Block

nav.sqs-svg-icon--list a:hover use.sqs-use--icon {
    fill: #f1f;
}

#4. Social Block – Different Color
Each icon will have a different hover color

nav.sqs-svg-icon--list {
  a:nth-child(1):hover use.sqs-use--icon {
    fill: #f1f;
}
a:nth-child(2):hover use.sqs-use--icon {
    fill: green;
}
a:nth-child(3):hover use.sqs-use--icon {
    fill: #fff;
  }}