# Coloured icons for customized toggle button?

**URL:** <https://community.homey.app/t/coloured-icons-for-customized-toggle-button/72612>\
**Category:** Developers\
**Created:** [November 24, 2022, 6:28pm UTC](https://community.homey.app/t/coloured-icons-for-customized-toggle-button/72612 "2022-11-24T18:28:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gol](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/gol/32/34726_2.png) [@gol](https://community.homey.app/u/gol)\
**Post date:** [November 24, 2022, 6:28pm UTC](https://community.homey.app/t/coloured-icons-for-customized-toggle-button/72612/1 "2022-11-24T18:28:05Z")

</div>

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.

```auto
{
  "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"
}

```

---

<div class="post-metadata">

**Author:** ![Caseda](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/caseda/32/138695_2.png) [@Caseda](https://community.homey.app/u/Caseda)\
**Post date:** [November 24, 2022, 6:45pm UTC](https://community.homey.app/t/coloured-icons-for-customized-toggle-button/72612/2 "2022-11-24T18:45:58Z")

</div>

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](https://apps.developer.homey.app/app-store/guidelines#1.5.-icons) for icons ets.

---

<div class="post-metadata">

**Author:** ![gol](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/gol/32/34726_2.png) [@gol](https://community.homey.app/u/gol)\
**Post date:** [November 24, 2022, 7:03pm UTC](https://community.homey.app/t/coloured-icons-for-customized-toggle-button/72612/3 "2022-11-24T19:03:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gol](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/gol/32/34726_2.png) [@gol](https://community.homey.app/u/gol)\
**Post date:** [November 24, 2022, 8:03pm UTC](https://community.homey.app/t/coloured-icons-for-customized-toggle-button/72612/4 "2022-11-24T20:03:40Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Caseda](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/caseda/32/138695_2.png) [@Caseda](https://community.homey.app/u/Caseda)\
**Post date:** [November 24, 2022, 8:52pm UTC](https://community.homey.app/t/coloured-icons-for-customized-toggle-button/72612/5 "2022-11-24T20:52:10Z")

</div>

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.