Hello,

since v4 (I think) there is the following CSS in the default panel.css:

:where(svg) {
  fill: currentColor;
}

This was updated after a similiar concern regarding icon coloring, before that it was targetting children of svg (svg *)

This CSS rule is applied to all SVG in the panel, no matter if they are Kirbys own SVG or third-party SVG. This causes trouble for e.g. custom icons that are used from a custom picker. Think SVG as assets/content to be used in frontend, not for display in panel buttons or such.

In one project we use tobimori/kirby-icon-field with outline icons that explicitly have fill="none" set in the SVG. However, the panel.css (Kirbys, the plugin does not apply fill or stroke styles) always sets fill: currentColor, causing the icons to appear broken.

Yes, we could convert the outline contours to use fill instead of stroke in this specific case. However, if one uses duo-tone icons, it breaks again. Also, we sometimes have different styles mixed inside a project, but there is no way to define custom CSS per SVG, and it would be tiedeous anyways.

IMO the default CSS should be more specific to only target those SVG that should explicitly get the current color in panel context instead of enforcing a specific, monochromatic fill for every SVG. Other „unkown“ or third-party icons should be untouched.

Happy to hear your thoughts on this!

Cheers
Benedict