Guide 16 : Create Stunning Floorplan Dashboards in Home Assistant

Want to take your Home Assistant dashboards to the next level? In this guide, you’ll learn how to create a floorplan-style dashboard — a visual map of your home where lights, sensors, and cameras are placed exactly where they are in real life.

This guide assumes you already followed our beginner dashboard guide.

🎨 With floorplan dashboards, you’re fully in control. Upload your own house plan or draw one yourself. The dashboard becomes a work of art — and it works too.

🧾 Step 1: Prepare Your Floorplan Image

You have two options:

Option A: Use a Drawing or Photo

Take a top-down photo of your house plan
Or draw one by hand or in a drawing app (e.g. GoodNotes, Notability)
Save it as PNG or JPG

Option B: Use an SVG for Interactive Elements

Use tools like Figma, Inkscape, or draw.io
Export your drawing as SVG for clickable areas (e.g. tap to toggle lights)

Save your file as floorplan.png or floorplan.svg

Place it in your Home Assistant folder: /config/www/

🧱 Step 2: Install Needed Add-ons from HACS

Make sure HACS is installed.

From HACS → Frontend, install:

picture-elements (built-in, no install needed)
card-mod (for styling)
layout-card (for positioning)
Optional: floorplan custom card (if you want deep SVG interaction)

🖼️ Step 3: Add the Floorplan to Your Dashboard

Create a new dashboard (or add to an existing one):

Click + Add Card
Choose Picture Elements
Use this base YAML:

type: picture-elements
image: /local/floorplan.png
elements:
  - type: state-icon
    entity: light.living_room
    style:
      top: 40%
      left: 60%

Adjust top and left to position each entity correctly on your plan.

Repeat for all lights, sensors, or cameras you want to include.

🧠 Bonus: Use SVG for Interactive Touch Zones

If your floorplan is in SVG format, you can:

Add CSS classes to SVG elements (like room shapes)
Use the floorplan custom card to map SVG elements to entities
Make rooms highlight when lights are on, or tap entire rooms to toggle scenes

This requires a bit of setup and editing SVG code, but unlocks amazing interactivity.

🌟 Extra Styling Tips

Use card-mod to set transparency, rounded corners, and themes
Add mushroom-chips-card above your floorplan to switch rooms or modes
Use semi-transparent overlays to show temperature, motion, humidity

🏁 That’s It!

With your own custom floorplan dashboard, your smart home becomes not just easier to control — but truly yours.

In the next guide, we’ll show how to automate seasonal themes and make your dashboards adapt to day/night or holidays!

Need help making your floorplan? Reach out in the comments or community forums — there are plenty of templates and examples out there!