How can I adjust icon color and margins on my website?

Store Design
, , ,

Topic summary

Main request: Make the wishlist heart icon adapt its color to the header background like the adjacent search and cart icons, and increase the spacing between the heart and search icons to match the search–cart spacing.

Details:

  • The heart icon’s color does not change with the background, unlike the other header icons.
  • The margin between the heart and search icons is smaller than desired; the goal is consistent spacing across all three icons.

Context:

  • Category indicates a Store Design/CSS customization request (CSS = Cascading Style Sheets).
  • Two screenshots are provided that illustrate the color mismatch and spacing issue.
  • A live site link (https://sassysusa.com/) is shared for reference.

Status:

  • No solutions or code changes posted yet; the author is seeking CSS guidance.
  • Discussion remains open with no confirmed resolution.
Summarized with AI on January 17. AI used: gpt-5.
1

Hi,

I would like to make the wishlist heart icon adaptive to the background color like the search and the cart icon next to it.
Also, the margin between the heart and the search icon is too small. I would like to make it the same as the margin between the search and cart icon.

Ronla1_0-1696255582189.png

Ronla1_1-1696255600095.png

Link to the website:
https://sassysusa.com/

Thank you :slightly_smiling_face: