First of all, thanks for the detailed answer. I must ask. I do not understand how are these codes can help to change the amazon icon for example? Nothing in the code links to any site that I want to change his icon. And the code did nothing.

Thank you for your answer.

I added brightness(0) and invert(0.5) and as you say they become red circle/square. I wonder if there is is anyway to replace those icons as it can done with bookmark icons? An example of replacement of Amazon bookmark image (gave me by Firefox-gx theme creator Godiesc):

1. search for an image for amazon here: https://iconduck.com/icons/2881/amazon-square.
2. edited that image code to add the property _fill="context-fill"__ to give the image the color of the theme.
3. Add the image into chrome/icons folder.
4. add the next code:

.bookmark-item[image*="page-icon:https://www.amazon.com"]>.toolbarbutton-icon { width: 0px !important; height: 0px !important; padding: 0 0 18px 18px !important; background-image: url("../icons/amazon-square.svg") !important; background-size: cover !important; }

Hi, It worked your code colored the checkbox-checked to black. Thanks :-) But I can’t find how to change the hover color. I would appreciate if you could help me with that as well.