Share your Floorplan


Does anybody know or have an idea to export the floorplan to a image/video file that can then be set to as a camera in hass?
I’d like to ask for ‘show the house’ on smart screen devices…


Hi All,

So let me share my floorplan as well, was actually inspired by gianm. But my light icons do not look as nice as his :). During the daytime all rooms get a bit of lighting using the sun entity just to spice it up a bit)

I actually used homestyler for mine, but might do a manual render / build in fusion 360 as some of the key elements in my house are not in there (bit of a diy person).

As for shekhardivekar’s question that is actually the bit I am trying to figure out (getting some temperature sensors and more door sensors). As you can see it is now only showing a red icon when the door is open (which is all I need basically).

For the temperature sensors I am probally going to take the route shown below with markers or something.

Still looking to do an animated version with floor selection but mainly for fun I like to see everything in a single go.

With kind regards,

StaticCube / Ferry

Any feedback is welcome :). Also this is build in lovelace ui using picture elements.


The light icon is a state-icon

- type: state-icon
  tap_action: toggle
  entity: light.office_light_2
    top: 19%
    left: 71%
    background: rgba(61, 115, 155, 0.2)
    border-radius: 50%
    transform: none


That’s probably a combination of horizontal stack and vertical stack.


Just a simple setup.

The thing on right side of bedroom is the Twinkly led string on balcony :slight_smile:


Nice especially like the Google home icons are those MDI icons,?


All icons are MDI in my floorplan


Afternoon All,
I’m just setting up my 2d floor plan before i even consider setting up the 3d one. I’ve got the floor plan drawn and “clickable” however I don’t seem to be able to get the icons to change colour.

My floorplan.yaml contains:

    - name: Lights
         - light.porch_light
         - light.iglo1
         - light.iglo2
         - light.iglo3
         - light.iglo4 
         - light.iglo5
         - light.iglo6
         - light.iglo7
         - light.iglo8
         - light.iglo9
         - light.iglo10
         - group.batman
         - switch.livingroom_fan
         - light.diningroom_light
        - state: 'on'
          class: 'lights-on'
        - state: 'off'
          class: 'lights-off'
        domain: homeassistant
        service: toggle

and my floorplan.css contains

.lights-off {
  fill: #464646 !important;

.lights-on {
  fill: #FFFF00 !important;

Any ideas where i’m going wrong?



Don’t see anything wrong there. Are you sure the svg file is correct (right icons with corresponding light names).
Do the lights start off with the right color based on their status and are just not clickable or aren’t they changing at all.


The lights start off black, (as expected) but dont change. I’m sure the SVG is correct as clicking/pressing on the light causes the toggle action.