Change social icons button color in header

To change social icons color in Header, you can follow these.
#1. Social icons color on All Pages
Use this to Custom CSS

header#header a.icon svg {
    fill: #f1f;
}

#2. Social icons color on All Pages – Desktop Only
Use this CSS code

@media screen and (min-width:768px) {
header#header a.icon svg {
    fill: #f1f;
}
}

#3. Social icons color on All Pages – Mobile Only
Use this CSS code

@media screen and (max-width:767px) {
header#header a.icon svg {
    fill: #f1f;
}
}

#4. When burger overlay menu is open

body.header--menu-open header#header a.icon svg {
    fill: #f1f;
}

#5. Before header scroll

header#header:not(.shrink) a.icon svg {
    fill: #f1f;
}

#6. On Header Scroll

header#header.shrink a.icon svg {
    fill: #f1f;
}

#7. Social icons color on One Page
First, find Page ID.
Then use CSS code like this

#collection-6673f2e18432c25013aee99f header#header a.icon svg {
    fill: #f1f;
}