Help with coloring icons?

Hi Community!

So I was really impressed with what I found in this thread and decided to jump on board. I have my floorplan.svg all done up (unfortunately, I had to flatten into one layer - makes it difficult using the same “work” file as the “finished” file…) and I used the default CSS and a slightly modified (mostly commented out) floorplan.yaml – This seems to work but I’ve run into a problem I’m not sure how to get around:

  • I have several light bulbs, such as the one below:


  • I have it defined in my floorplan.yaml:

      - name: Lights
          - light.back_hallway
          - light.front_hallway
          - light.logan_bedroom_overhead
          - light.kitchen_sink
          - light.kitchen_table
          - light.mudroom_door
          - light.mudroom_window
          - state: 'on'
            class: 'light-on'
          - state: 'off'
            class: 'light-off'
          domain: homeassistant
          service: toggle
  • I labelled it according to the documentation:


  • When I touch the icon on my floorplan, the light turns on and off, as expected. The problem is that the icon itself doesn’t change color at all. I have the default CSS in place:

    /* Light */

    .light-off {
    fill: #C3B7F4 !important;

    .light-on {
    fill: #F8D2B9 !important;

But nothing happens other than the light turning on/off. I was hoping to have the bulb filled or outlined with the color above (just getting started here, I can choose different colors later) but… nothing… it stays black like the image above.

Not sure what I’m missing…

Anyone? It seems like it should work but I can’t get it lit up :frowning:

Figured it out - I had to “trace bitmap” in Inkscape - once I did that and re-saved, my icon is now colored. Hopefully anyone looking at this in the future will get some help from this.

And the finished result:


EDIT: Should note it was a PNG not SVG (the original image) - So those using SVG images may not encounter this problem.