diff --git a/assets/icons/hicolor/scalable/devices/fa-battery-charging-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-battery-charging-symbolic.svg
new file mode 100644
index 0000000..ad0f19c
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-battery-charging-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/hicolor/scalable/devices/fa-battery-low-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-battery-low-symbolic.svg
new file mode 100644
index 0000000..7e1ad36
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-battery-low-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/hicolor/scalable/devices/fa-battery-medium-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-battery-medium-symbolic.svg
new file mode 100644
index 0000000..58a80e1
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-battery-medium-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/widgets/bar/battery.tsx b/widgets/bar/battery.tsx
index 8e0a727..3d992c3 100644
--- a/widgets/bar/battery.tsx
+++ b/widgets/bar/battery.tsx
@@ -1,12 +1,28 @@
-import { bind } from "astal";
+import { bind, Variable } from "astal";
import AstalBattery from "gi://AstalBattery";
export const Battery = () => {
const battery = AstalBattery.get_default();
+ const chargingIcon = Variable.derive(
+ [
+ bind(battery, "percentage"),
+ bind(battery, "charging"),
+ bind(battery, "state"),
+ ],
+ (percentage, charging, state) => {
+ const batFull = state === AstalBattery.State.FULLY_CHARGED;
+ const p = percentage * 100;
+
+ if (batFull) return "fa-battery-full-symbolic";
+ if (charging) return "fa-battery-charging-symbolic";
+ if (p < 30) return "fa-battery-low-symbolic";
+ return p < 70 ? "fa-battery-medium-symbolic" : "fa-battery-full-symbolic";
+ },
+ );
return (
-
+ chargingIcon.drop()} />