Changing icon of an extension


I have installed the extension which is perfect to me.

I have just an icon issue. The default one is not good. So I took a look at the code and noticed this line for the icon:

let icon = new St.Icon({ icon_name: 'dialog-information-symbolic',
                         style_class: 'panelItem' }); //system-status-icon

I took a look at the caffeine extension to see how the icon is initialised and so I tried this code for adjust.brightness but with no success:

let icon = new St.Icon({
    style_class: 'system-status-icon'
icon.gicon = Gio.icon_new_for_string(`${Me.path}/my-caffeine-off-symbolic.svg`);

How to update the icon of an extension for an svg one?


The second code example will work for what you need, but of course you can’t just copy-paste that code since it clearly looks for an icon shipped with the extension:

// ----------------------------------------v
icon.gicon = Gio.icon_new_for_string(`${Me.path}/my-caffeine-off-symbolic.svg`);

Thus you will have to change that path to an SVG that actually exists on your system and restart GNOME Shell to reload the extension.

Thanks to the command journalctl -f -o cat /usr/bin/gnome-shell I could debug this extension.

I had problems like Gio is not defined and had to add these 2 contantes:

const Gio =;
const Me = imports.misc.extensionUtils.getCurrentExtension();

I had to change the css style:

.panelItem {
    width: 15px;
    height: 15px;

So I could do it with a founded on the web svg icon but this icon is not in harmony with the others:

Where to find Gnome svg icons?


Maybe have a look at Icon Library.

Perfect, mission accomplished. Thank you @andyholmes for your help.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.