Changing battery icon in system-tray in KDE

Hi There !!

So I was looking for ways with which I can change the icons of specific icons, like battery, in my system tray. I went for it and came across this this reddit page in r/kde where it was suggested to install plasma-sdk package to install plasma theme explorer. Now my battery icon when charging has plug like thing(:electric_plug:) in light green attached to it and is a bit smaller for me.

I would like to change two things: to make it’s size a bit bigger and second change the plug icon(:electric_plug:) to thunderbolt ( :zap:). Sadly I have very little knowledge of the inkscape application. I tried plugging thunderbolt into those inkscape file but nothing has worked out battery icon

but I would like to change this battery icon to something like thisimage

I file type is also quite different like svgz from svg the normal file type.
Any sort of help is highly appreciated.

Hope you have a great day :slight_smile:


What file did you actually edited?

From where was taken that icon?

The file type is not so important. The files can be either, t=but the important part is the xml css definitions: ID/class/style for each of the elements that make the entire icon a complete proper icon to display in system tray. Also, is not just one simple graphic

Sorry I forgot to mention it.
the path of this battery lies in .local/share/plasma/desktoptheme/Monterey-Dark/icons/battery.svg
The svg file is in this pastebin. if you wanna take a look.

I know about this. So tried changing the plug with thunder symbol, which is not graphics but svg I extracted from another svg icon which had it. I thought replacing would do the job but instead when placing thunderbolt svg nothing is displayed in the battery when rebooting. I also tried at least changing color but no not even color is changed. I have tried alot of thing but I don’t know how to convert it some something like the leftmost battery icon in the above screenshot.

That was all.
Hope you have a great day. :slight_smile:

I would also like to add that I have a file that has the icon I want. It is in SVG format but not in the same format like in above picture actually required by the system. Is there any way I can make this out. I am ready to do anything. Please help

Edit: Any sort of help is much appreciated.
I would like to understand why simply copying the thunderbolt and replacing it with the plug in the svg file isn’t working ? Why isn’t changing color working as well(which upon changing color should have clearly worked ?What do I have to do to change that ? I am trying to learn inkscape from youtube but found that to to quite irrelevant with what I want to replace.

Like i told you, each graphical element has an xml/css ID, class, style … so they get dynamic based on the system instructions, to display the state of charging/connection to ac and so on.

Either someone does it for you, because just explaining here will not cut it, or you take a look at Icon Design | Developer
Ans then you also study Colorful Icons | Developer and Monochromatic Icons | Developer so you understand it, then you apply that knowledge to your desired design.

@Unbeknownst - Not sure, but this is what you wanted ? battery svg edit -
The thing is, you have to understand the way those elements are in groups and their definition. Also, the fill and style entries, so, once you consult the documentation mentioned above, from the design guidelines, whatever edit you do will be more easy.

1 Like