diff --git a/assets/js/components/Energyflow/BatteryIcon.vue b/assets/js/components/Energyflow/BatteryIcon.vue
index c3199d8c4..cc961ec68 100644
--- a/assets/js/components/Energyflow/BatteryIcon.vue
+++ b/assets/js/components/Energyflow/BatteryIcon.vue
@@ -1,13 +1,15 @@
 <template>
-	<component :is="`shopicon-regular-${icon}`"></component>
+	<svg :style="svgStyle" viewBox="0 0 48 48">
+		<path d="M0-.004h48v48H0v-48z" fill="none" />
+		<path
+			d="M35 9.996h-3v-4a2 2 0 00-2-2H18a2 2 0 00-2 2v4h-3a2 2 0 00-2 2v30a2 2 0 002 2h22a2 2 0 002-2v-30a2 2 0 00-2-2zm-15-2h8v2h-8v-2zm13 32H15v-26h18v26z"
+		/>
+		<path :d="socRect" />
+	</svg>
 </template>
 
 <script>
-import "@h2d2/shopicons/es/regular/batteryfull";
-import "@h2d2/shopicons/es/regular/batterythreequarters";
-import "@h2d2/shopicons/es/regular/batteryhalf";
-import "@h2d2/shopicons/es/regular/batteryquarter";
-import "@h2d2/shopicons/es/regular/batteryempty";
+import icon from "../../mixins/icon";
 
 export default {
 	name: "BatteryIcon",
@@ -15,13 +17,11 @@ export default {
 		soc: { type: Number, default: 0 },
 	},
 	computed: {
-		icon: function () {
-			if (this.soc > 80) return "batteryfull";
-			if (this.soc > 60) return "batterythreequarters";
-			if (this.soc > 40) return "batteryhalf";
-			if (this.soc > 20) return "batteryquarter";
-			return "batteryempty";
+		socRect() {
+			const height = (this.soc / (100 / 22)).toFixed(2);
+			return `M30 38H18v-${height}h12v${height}z`;
 		},
 	},
+	mixins: [icon],
 };
 </script>