ブラウザの開発者ツールを使用すると、適用されているスタイルを確認することで、この問題の原因を突き止めることができます。Chrome/Firefox の場合は、ヘッダーアイコンのいずれかを右クリックして「検証」を選択します。
要素に影響を与えているすべての CSS コードが表示されるスタイルペインを探します。アイコンの色自体は color プロパティによって制御されるはずです。あなたの場合は、background-color が「primary」に設定されている可能性もあります。
右側には、各 CSS スタイリングブロックのソースファイル名が表示されます。多くはコア Discourse (たとえば、スクリーンショットの「header.scss」) からのものです。「theme_6.scss」のような表示がある場合は、おそらくテーマまたは別の有効なテーマコンポーネントからのものです。ファイル名をクリックすると表示して、ファイル内のコードの位置を確認できます (または、ファイル名の右側にある行番号を参照してください)。
最後に、スタイルパネルでプロパティをオン/オフに切り替えて、プロパティを削除した場合の外観を確認できます (プロパティにカーソルを合わせるとチェックボックスが表示されます)。プロパティは優先度が高い順にリストされているため、通常は上にあるものが下にあるものをオーバーライドします。たとえば、スクリーンショットでは、「buttons.scss」の color: var(--primary-low-mid) がオーバーライドされていることがわかります (取り消し線が引かれていることで示されています)。
明白なものが見つからない場合は、要素タブで親要素を選択して、そこでスタイルを確認してみてください。この場合、SVG アイコンはリンク (<a>) 要素の中にあり、そのリンクはリスト項目 (<li>) 要素の中にあります。背景色は、それらのいずれかから来ている可能性があります。
テーマで問題の CSS コードを見つけたら、安全に削除してデフォルトの外観に戻すことができます！