Two years ago, I created a video explaining how to use animated icons on your Home Assistant dashboard. Since then, a lot has changed—especially with the introduction of the new Section Dashboards.

In this updated guide, I’ll show you how to create animated icons and cards in the new dashboard layout. The result? A dashboard that feels alive, interactive, and far less static—all without needing advanced technical knowledge.

I’ve also prepared several ready-to-use animations that you can easily adapt to your own setup.

Credit where it’s due:
This idea was inspired by Rhys, who shared many great animation concepts on the Home Assistant forums. You’ll find a link to that page in the video description.

---

⭐⭐⭐ NOTE: ⭐⭐⭐

This article belongs to a YouTube video. I wrote it before recording the video. You can help me continue doing this by checking out the video, commenting on it, giving it a thumbs up, and subscribing to my YouTube channel. This will ensure that the video is offered more frequently to new visitors, allowing them to stay informed about the latest Home Assistant tutorials and smart home-related product reviews.

I appreciate your support!

Ed

Click here to watch the video.

Why Animate Your Home Assistant Dashboard?

Section Dashboards are powerful and clean, but by default they can feel a bit static. With a small amount of CSS, you can:

• Add visual feedback to device states
• Make important sensors stand out
• Create a more intuitive and enjoyable UI

And the best part: you don’t need to be a CSS expert to follow along.

---

Prerequisite: Install Card-Mod

To style and animate dashboard cards, we’ll use CSS—and for that, we need a HACS integration called card-mod.

Installing Card-Mod

1. Open HACS
2. Search for card-mod
3. Click Download
4. Confirm the download
5. Click Reload
6. Clear your browser cache (recommended)

Once installed, card-mod allows you to inject CSS directly into cards and badges.

Optional but recommended:
I also use Mushroom cards in this tutorial. If you’d like to follow along exactly, install Mushroom cards via HACS as well.

---

Creating Animated Badges

On my dashboard, I created five animated badges:

• 🏠 A Home badge that bounces
• ⚡ A Power badge that pulses
• 🌀 A Fan badge that spins
• 📬 A Mailbox badge that jumps
• 🚶 A Motion sensor badge that flashes

When switching a badge to YAML mode, you won’t be able to edit it in the Visual Editor anymore. That’s normal—and expected.

Let’s break them down one by one.

---

The Animated Home Badge (Bounce Effect)

For the Home badge, I used a Mushroom Template Badge and added CSS via card-mod.

How it works

• card_mod: activates card-mod
• style: | allows us to write CSS
• ha-state-icon targets the icon itself
• A custom animation called boing is defined

The animation:

• Runs for 3 seconds
• Loops infinitely
• Uses scale3d() at several keyframe percentages
• Creates a subtle bouncing effect by scaling the icon on the X and Y axes

You can tweak the percentages and scale values to adjust the bounce intensity.

---

Power Button Animation (Pulse When On)

The Power badge works similarly but introduces an important concept:
conditional animations.

Key differences

• The animation is called pulse
• Uses scale() instead of scale3d()
• Only runs when the power is ON

This is achieved by adding an if-statement that checks the state of an entity—in this case, a Toggle Helper (input_boolean.power_office).

You can replace this with:

• A real switch
• A sensor state
• Any entity that reports on / off

---

Fan Animation (Rotation)

The fan badge spins only when the fan is active.

Highlights

• Animation name: rotation
• Duration: 1 second
• Loops infinitely
• Rotates from 0deg to 360deg
• Uses an if-statement to check if the fan is on

This is one of the simplest yet most effective animations.

---

Mailbox Animation (Bounce + Rotate)

The mailbox animation combines:

• Vertical movement
• Slight rotation

It only activates when the input_boolean.mail_arrived helper is set to on.

If you want to automate your mailbox detection, I’ve made a dedicated video explaining how to do this step-by-step.

---

Using Polygon Clip-Paths for Advanced Animations

Now we’re moving into more advanced visual effects using clip-path.

A clip-path allows you to mask parts of an icon, making only certain sections visible.

Tools used

• materialdesignicons.com
  Download the icon you want as an SVG
• CSS Clip-Path Generator (cssportal.com)
  Upload the SVG and define the visible area

Once done, copy the generated clip-path CSS.

---

Motion Sensor Animation (Flashing Effect)

Using the clip-path we generated, we can create a flashing motion icon.

How it works

• Animation name: clip
• Duration: 2 seconds
• Loops infinitely
• Clip-path is applied at 50% of the animation

At:

• 0% → full icon visible
• 50% → clipped icon
• Result → flashing motion indicator

The animation only runs when motion is detected.

---

Animated Cards (Not Just Badges!)

Animations work the same way for cards as they do for badges.

Air Conditioning Card

• Tile Card
• Same rotation animation as the fan
• Uses linear animation timing
• Only active when AC is on

---

Light Card Animation (Blinking Effect)

For the light card:

• Mushroom Template Card
• Uses a clip-path animation
• Animation name: illumination
• Clip-path activates at 80%

This creates a subtle blinking effect when the light is on.

---

Sprinkler Animation (Alternating Spray)

This animation uses two clip-path polygons that alternate.

How it works

• Animation name: spray
• Duration: 2 seconds
• Eases in
• Alternates between two clip-paths at:
  • 0%, 50%, 100%
  • 25%, 75%

The result looks like a spraying motion.

I also have a full video explaining how to set up a fully automated garden watering system.

---

Scene Button Animations

I created three scene buttons with press animations:

1. Rotate on Click

• Icon rotates 360°
• Transition: 500ms
• Triggered by the card’s active state

2. Push-In Effect

• Icon scales below 1
• Instant transition
• Feels like a physical button press

3. Push-Down Effect

• Card moves down 1.5px
• Subtle box-shadow
• Especially nice in light mode

These animations trigger once, not infinitely.

---

Conclusion

With card-mod and a bit of CSS, you can create beautiful animated icons and cards in the new Home Assistant Section Dashboards.

The possibilities are endless:

• State-based animations
• Subtle visual feedback
• Highly polished dashboards

I’d love to see what you create!
Share your dashboards in the Dump Your Dashboard channel on my Discord server.

---

Support & Downloads

If you don’t want to type everything manually, you can:

• Support me via Ko-fi
• Download all the code used in this video

Your support helps me continue making tutorials like this.
You can also support me via Patreon, Ko-fi, or by becoming a paid channel member.

---

👍 Don’t forget to like the video
🔔 Subscribe and hit the notification bell
💬 Let me know your ideas in the comments

See you soon — bye bye!