Coloured icons for customized toggle button?

In some of the Athom-designed toggle buttons I can see icons with green foreground. Is it possible to achieve coloured icons in own-designed buttons? In my configuration example below the foreground colour of the icon is converted to white, that is impossible to see when the button is in active state.

  "type": "boolean",
  "title": {
    "en": "Inhibit"
  "getable": true,
  "setable": true,
  "uiComponent": "toggle",
  "uiQuickAction": false,
  "insights": true,
  "insightsTitleTrue": "Zone inhibited",
  "insightsTitleFalse": "Zone de-inhibited",
  "icon": "./drivers/spc/assets/inhibit.svg"

No, all SVG images should be black on transparant (can be any color, but the color will be removed), the colouring is done “automatically” by the app and web GUI on light vs dark mode etc, and to keep all icons consistent.
See the guidelines for icons ets.

Thanks @Caseda, with a black and white icon I can confirm that it works. The black foreground is automatically converted to green.

@Caseda, the green color is coming and going, seems to be a cache somewhere. Do you know howto clear it? Have tried to delete all data for the Homey app, without any change.

It’s a mobile app bug (the web GUI doesn’t have this issue) not a bug of your app, do report it to Athom’s support, apparently not a lot of people have reported it yet.
If you force close the mobile app it will be right again.

1 Like