Browser dev tools can help get to the bottom of this by showing what styles are being applied. For Chrome/Firefox, you right click on one of the header icons and choose “Inspect”.
Look for the styles pane, which shows all of the CSS code that is affecting the element. The icon color itself should be controlled by the color property. It looks like yours might also have a background-color set to “primary”.
On the right it shows the source file name for each block of CSS styling. Many of them are from core Discourse (for instance the “header.scss” from the screenshot). If it says something like “theme_6.scss”, it’s probably from your theme or another active theme component. You can click the file name to view it and see where that code is in the file (or reference the line number to the right of the file name).
Lastly, you can toggle the properties on and off in the styles panel to see what it would look like if they were removed (hover over a property to see a checkbox). They’re listed from highest priority to lowest, so generally the ones on top will override anything below. For example, in the screenshot you can see that the color: var(--primary-low-mid) from “buttons.scss” was overridden (indicated by it being crossed out).
If you don’t see anything obvious, you could try selecting the parent elements in the Elements tab to look for styling there. In this case, the svg icon is inside of a link (<a>) element, which is inside of a list item (<li>) element, and the background color could be coming from one on those.
Once you find the offending CSS code in your theme, you should be able to safely remove it to revert back to the default appearance!