Need help fixing custom social icon to make it match the site styles

I used custom CSS injection to change the icon of a social link in my header. I am trying to now make this custom icon match the colour theme and follow the style settings I have for my header. I have attached screenshots so you can see what is going on and the following code is the code I have used for adding a custom icon for a social link in my header:

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(2) {
    svg {
      display:none; 
    }    
    background-image: url(https://static1.squarespace.com/static/646c19ab135dd855c8022b8a/t/6578d70b2daae851a3f880a9/1702418187251/clouds_6563658.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  
.header-menu-actions-action:nth-of-type(2) {    
  svg { 
    display:none;
  }    
  background-image: url(https://static1.squarespace.com/static/646c19ab135dd855c8022b8a/t/6578d29bd0e5a30c450a750d/1702417051923/clouds_6563658.png);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

Thank you in advance for anyone able to help!

Hi,

What is page url? We can check easier

Our website url is wahwash.com

Hi,

You want

Change icon color on each page?

To do this, you will need to use different icon url on each page

for example, Contact Page, add this code to Contact Page Header Code Injection, replace Pixabay with new icon url

<style>
  header#header a.icon[href*="bsky.app"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/06/01/05/58/ocean-8032698_1280.jpg);
}
</style>

I use this code because it targets both mobile + desktop