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.


Howdy, most of the floorplans are amazing !! and I want to share my wip with you

Your comment are welcome :slight_smile:


@meh which software did you use to make this , this is really awesome and hilarious i just like perfect


Looks amazing, really impressive work :+1:


Thanks guys, I used Cinema 4d with Global illumination + ambient occlusion


Here is mine for now, I’m still working to separate things out; most of the lights are off on mine of course.


Work in progress. Sketchup with Twilight Render


@automateit, I love the ecobee icon and the floor setup. How did you do it? Does the temperature changes in the ecobee thermostat or is just a static picture?


Hi, thanks I’m glad you like it. I’ve since moved away from HA floor plan to pure Lovelace UI.

The numeric temp does change dynamically but not the weather, mode etc. that could be done with some work but mine is still beta.

My configuration is posted on github. My username there is rrubin0

If you do plan to use HA floor plan let me know and I’d be happy to share some of my old configs with you. That one is nicer looking in the UI but more difficult to setup.


This is my floorplan.
I hope you like it, your advices are always welcome.

Sweet Home 3D - Photoshop for lights on and off layers - Inkscape


been trying to figure out where in ha-floorplan.html can i modify/remove the code that overwrites texts in SVG files and replaces it with an ON / OFF label? I just need my text titles in my SVG to be live text.

i think its all inside “line 383 handleEntities(entities)”

theres code in 404 that talks about “tspan” found a few lines “svgElement.nodeName === ‘text’”
will somebody help and let me know if I’m getting close?