Introduce vehicle icons (#5200)

2022-11-30 19:08:03 +01:00 · 2022-11-30 19:08:03 +01:00 · d2f92556a3
commit d2f92556a3
parent ab57a858a5
89 changed files with 743 additions and 117 deletions
--- a/api/api.go
+++ b/api/api.go
@ -164,6 +164,7 @@ type Authorizer interface {
 type Vehicle interface {
 	Battery
 	Title() string
+	Icon() string
 	Capacity() float64
 	Phases() int
 	Identifiers() []string
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@ -17,6 +17,7 @@
 				:homePower="homePower"
 				:batterySoC="batterySoC"
 				:valuesInKw="valuesInKw"
+				:vehicleIcons="vehicleIcons"
 			/>
 		</div>
 		<div class="details" :style="{ height: detailsHeight }">
@ -95,7 +96,8 @@
 									count: activeLoadpointsCount,
 								})
 							"
-							icon="car3"
+							icon="vehicle"
+							:vehicleIcons="vehicleIcons"
 							:power="loadpointsPower"
 							:valuesInKw="valuesInKw"
 						/>
@ -142,6 +144,7 @@ export default {
 		batteryConfigured: Boolean,
 		batteryPower: { type: Number, default: 0 },
 		batterySoC: { type: Number, default: 0 },
+		vehicleIcons: { type: Array },
 	},
 	data: () => {
 		return { detailsOpen: false, detailsCompleteHeight: null };
--- a/assets/js/components/Energyflow/EnergyflowEntry.vue
+++ b/assets/js/components/Energyflow/EnergyflowEntry.vue
@ -2,6 +2,7 @@
 	<div class="d-flex justify-content-between mb-2 entry" :class="{ 'evcc-gray': !active }">
 		<span class="d-flex flex-nowrap">
 			<BatteryIcon v-if="isBattery" :soc="soc" />
+			<VehicleIcon v-else-if="isVehicle" :names="vehicleIcons" />
 			<component :is="`shopicon-regular-${icon}`" v-else></component>
 		</span>
 		<span class="text-nowrap flex-grow-1 ms-3">{{ name }}</span>
@ -16,14 +17,14 @@
 import "@h2d2/shopicons/es/regular/powersupply";
 import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/home";
-import "@h2d2/shopicons/es/regular/car3";
 import BatteryIcon from "./BatteryIcon.vue";
 import formatter from "../../mixins/formatter";
 import AnimatedNumber from "../AnimatedNumber.vue";
+import VehicleIcon from "../VehicleIcon";

 export default {
 	name: "EnergyflowEntry",
-	components: { BatteryIcon, AnimatedNumber },
+	components: { BatteryIcon, AnimatedNumber, VehicleIcon },
 	mixins: [formatter],
 	props: {
 		name: { type: String },
@ -31,6 +32,7 @@ export default {
 		power: { type: Number },
 		soc: { type: Number },
 		valuesInKw: { type: Boolean },
+		vehicleIcons: { type: Array },
 	},
 	computed: {
 		active: function () {
@ -39,6 +41,9 @@ export default {
 		isBattery: function () {
 			return this.icon === "battery";
 		},
+		isVehicle: function () {
+			return this.icon === "vehicle";
+		},
 		hasSoC: function () {
 			return this.isBattery && !isNaN(this.soc);
 		},
--- a/assets/js/components/Energyflow/Visualization.vue
+++ b/assets/js/components/Energyflow/Visualization.vue
@ -61,7 +61,7 @@
 					<shopicon-regular-home></shopicon-regular-home>
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('bottom', 'loadpoints')">
-					<shopicon-regular-car3></shopicon-regular-car3>
+					<VehicleIcon :names="vehicleIcons" />
 				</LabelBar>
 				<LabelBar v-bind="labelBarProps('bottom', 'batteryCharge')">
 					<BatteryIcon :soc="batterySoC" />
@ -80,13 +80,13 @@ import formatter from "../../mixins/formatter";
 import BatteryIcon from "./BatteryIcon.vue";
 import LabelBar from "./LabelBar.vue";
 import AnimatedNumber from "../AnimatedNumber.vue";
-import "@h2d2/shopicons/es/regular/car3";
+import VehicleIcon from "../VehicleIcon";
 import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/home";

 export default {
 	name: "Visualization",
-	components: { BatteryIcon, LabelBar, AnimatedNumber },
+	components: { BatteryIcon, LabelBar, AnimatedNumber, VehicleIcon },
 	mixins: [formatter],
 	props: {
 		gridImport: { type: Number, default: 0 },
@ -99,6 +99,7 @@ export default {
 		homePower: { type: Number, default: 0 },
 		batterySoC: { type: Number, default: 0 },
 		valuesInKw: { type: Boolean, default: false },
+		vehicleIcons: { type: Array },
 	},
 	data: function () {
 		return { width: 0, visualizationReady: false };
--- a/assets/js/components/Loadpoint.vue
+++ b/assets/js/components/Loadpoint.vue
@ -149,6 +149,7 @@ export default {
 		vehicleRange: Number,
 		vehicleSoC: Number,
 		vehicleTitle: String,
+		vehicleIcon: String,
 		vehicleTargetSoC: Number,
 		vehicleCapacity: Number,
 		vehicleFeatureOffline: Boolean,
--- a/assets/js/components/MultiIcon/1.vue
+++ b/assets/js/components/MultiIcon/1.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M15 15q.425 0 .713-.288Q16 14.425 16 14V6q0-.425-.287-.713Q15.425 5 15 5h-2.025q-.425 0-.7.287Q12 5.575 12 6t.288.713Q12.575 7 13 7h1v7.025q0 .425.288.7q.287.275.712.275Zm-7 3q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22ZM8 4v12V4Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "1",
+};
+</script>
--- a/assets/js/components/MultiIcon/2.vue
+++ b/assets/js/components/MultiIcon/2.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M12 15h4.025q.425 0 .7-.288Q17 14.425 17 14t-.288-.713Q16.425 13 16 13h-3v-2h2q.825 0 1.413-.588Q17 9.825 17 9V7q0-.825-.587-1.412Q15.825 5 15 5h-3.025q-.425 0-.7.287Q11 5.575 11 6t.288.713Q11.575 7 12 7h3v2h-2q-.825 0-1.412.587Q11 10.175 11 11v3q0 .425.288.712q.287.288.712.288Zm-4 3q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22ZM8 4v12V4Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "2",
+};
+</script>
--- a/assets/js/components/MultiIcon/3.vue
+++ b/assets/js/components/MultiIcon/3.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M12 15h3q.825 0 1.413-.588Q17 13.825 17 13v-1.5q0-.65-.425-1.075Q16.15 10 15.5 10q.65 0 1.075-.425Q17 9.15 17 8.5V7q0-.825-.587-1.412Q15.825 5 15 5h-3.025q-.425 0-.7.287Q11 5.575 11 6t.288.713Q11.575 7 12 7h3v2h-1.025q-.425 0-.7.287Q13 9.575 13 10t.288.712Q13.575 11 14 11h1v2h-3.025q-.425 0-.7.287Q11 13.575 11 14t.288.712Q11.575 15 12 15Zm-4 3q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22ZM8 4v12V4Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "3",
+};
+</script>
--- a/assets/js/components/MultiIcon/4.vue
+++ b/assets/js/components/MultiIcon/4.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M16 15q.425 0 .712-.288Q17 14.425 17 14V5.975q0-.425-.288-.7Q16.425 5 16 5t-.712.287Q15 5.575 15 6v3h-2V5.975q0-.425-.287-.7Q12.425 5 12 5t-.712.287Q11 5.575 11 6v4q0 .425.288.712q.287.288.712.288h3v3.025q0 .425.288.7q.287.275.712.275Zm-8 3q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22ZM8 4v12V4Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "4",
+};
+</script>
--- a/assets/js/components/MultiIcon/5.vue
+++ b/assets/js/components/MultiIcon/5.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M12 15h3q.825 0 1.413-.588Q17 13.825 17 13v-2q0-.825-.587-1.413Q15.825 9 15 9h-2V7h3.025q.425 0 .7-.287Q17 6.425 17 6t-.288-.713Q16.425 5 16 5h-4q-.425 0-.712.287Q11 5.575 11 6v4q0 .425.288.712q.287.288.712.288h3v2h-3.025q-.425 0-.7.287Q11 13.575 11 14t.288.712Q11.575 15 12 15Zm-4 3q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22ZM8 4v12V4Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "5",
+};
+</script>
--- a/assets/js/components/MultiIcon/6.vue
+++ b/assets/js/components/MultiIcon/6.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M4 22q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22Zm4-4q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12ZM8 4v12V4Zm5 5V7h2.025q.425 0 .7-.287Q16 6.425 16 6t-.287-.713Q15.425 5 15 5h-2q-.825 0-1.412.588Q11 6.175 11 7v6q0 .825.588 1.412Q12.175 15 13 15h2q.825 0 1.413-.588Q17 13.825 17 13v-2q0-.825-.587-1.413Q15.825 9 15 9Zm0 2h2v2h-2Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "6",
+};
+</script>
--- a/assets/js/components/MultiIcon/7.vue
+++ b/assets/js/components/MultiIcon/7.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="m15 7l-3.325 6.65q-.225.475 0 .912q.225.438.725.438q.25 0 .463-.125q.212-.125.337-.35l3.625-7.175q.075-.15.125-.363q.05-.212.05-.387q0-.65-.413-1.125Q16.175 5 15.525 5h-3.55q-.425 0-.7.287Q11 5.575 11 6t.288.713Q11.575 7 12 7ZM8 18q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22Zm4-6V4v12Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "7",
+};
+</script>
--- a/assets/js/components/MultiIcon/8.vue
+++ b/assets/js/components/MultiIcon/8.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M13 15h2q.825 0 1.413-.588Q17 13.825 17 13v-1.5q0-.65-.425-1.075Q16.15 10 15.5 10q.65 0 1.075-.425Q17 9.15 17 8.5V7q0-.825-.587-1.412Q15.825 5 15 5h-2q-.825 0-1.412.588Q11 6.175 11 7v1.5q0 .65.425 1.075Q11.85 10 12.5 10q-.65 0-1.075.425Q11 10.85 11 11.5V13q0 .825.588 1.412Q12.175 15 13 15Zm0-8h2v2h-2V7Zm0 6v-2h2v2Zm-5 5q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22ZM8 4v12V4Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "8",
+};
+</script>
--- a/assets/js/components/MultiIcon/9.vue
+++ b/assets/js/components/MultiIcon/9.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M13 15h2q.825 0 1.413-.588Q17 13.825 17 13V7q0-.825-.587-1.412Q15.825 5 15 5h-2q-.825 0-1.412.588Q11 6.175 11 7v2q0 .825.588 1.412Q12.175 11 13 11h2v2h-2.025q-.425 0-.7.287Q12 13.575 12 14t.288.712Q12.575 15 13 15Zm2-6h-2V7h2Zm-7 9q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22ZM8 4v12V4Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "9",
+};
+</script>
--- a/assets/js/components/MultiIcon/MultiIcon.story.vue
+++ b/assets/js/components/MultiIcon/MultiIcon.story.vue
@ -0,0 +1,11 @@
+<script setup>
+import MultiIcon from "./MultiIcon.vue";
+</script>
+
+<template>
+	<Story :layout="{ type: 'grid', width: 150 }">
+		<Variant v-for="count in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="count" :title="count">
+			<MultiIcon :count="count" size="xl" />
+		</Variant>
+	</Story>
+</template>
--- a/assets/js/components/MultiIcon/MultiIcon.vue
+++ b/assets/js/components/MultiIcon/MultiIcon.vue
@ -0,0 +1,61 @@
+<template>
+	<component :is="icon" :class="`icon icon--${size}`"></component>
+</template>
+
+<script>
+import _1 from "./1.vue";
+import _2 from "./2.vue";
+import _3 from "./3.vue";
+import _4 from "./4.vue";
+import _5 from "./5.vue";
+import _6 from "./6.vue";
+import _7 from "./7.vue";
+import _8 from "./8.vue";
+import _9 from "./9.vue";
+import Plus from "./Plus.vue";
+
+const icons = {
+	_1,
+	_2,
+	_3,
+	_4,
+	_5,
+	_6,
+	_7,
+	_8,
+	_9,
+};
+
+export default {
+	name: "MultiIcon",
+	props: {
+		count: { type: Number },
+		size: { type: String, default: "s" },
+	},
+	computed: {
+		icon: function () {
+			return this.count > 9 ? Plus : icons[`_${this.count}`];
+		},
+	},
+};
+</script>
+
+<style scoped>
+.icon {
+	display: block;
+	width: 24px;
+	height: 24px;
+}
+.icon--m {
+	width: 32px;
+	height: 32px;
+}
+.icon--l {
+	width: 48px;
+	height: 48px;
+}
+.icon--xl {
+	width: 64px;
+	height: 64px;
+}
+</style>
--- a/assets/js/components/MultiIcon/Plus.vue
+++ b/assets/js/components/MultiIcon/Plus.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M10.975 14H12q.825 0 1.413-.588Q14 12.825 14 12V8q0-.825-.587-1.412Q12.825 6 12 6h-1q-.825 0-1.412.588Q9 7.175 9 8v1q0 .825.588 1.412Q10.175 11 11 11h1v1h-1.025q-.425 0-.7.287Q10 12.575 10 13t.288.712q.287.288.687.288ZM12 9h-1V8h1Zm4.15 2v.875q0 .425.288.7q.287.275.712.275t.713-.288q.287-.287.287-.687V11h.875q.425 0 .7-.288Q20 10.425 20 10t-.288-.713Q19.425 9 19.025 9h-.875v-.875q0-.425-.287-.7q-.288-.275-.713-.275t-.712.287q-.288.288-.288.688V9h-.875q-.425 0-.7.287q-.275.288-.275.713t.288.712q.287.288.687.288ZM8 18q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm0-2h12V4H8v12Zm-4 6q-.825 0-1.412-.587Q2 20.825 2 20V6.975q0-.425.288-.7Q2.575 6 3 6t.713.287Q4 6.575 4 7v13h13.025q.425 0 .7.288q.275.287.275.712t-.288.712Q17.425 22 17 22ZM8 4v12V4Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Plus",
+};
+</script>
--- a/assets/js/components/MultiIcon/index.js
+++ b/assets/js/components/MultiIcon/index.js
@ -0,0 +1,3 @@
+import MultiIcon from "./MultiIcon.vue";
+
+export default MultiIcon;
--- a/assets/js/components/Site.vue
+++ b/assets/js/components/Site.vue
@ -91,8 +91,14 @@ export default {
 		energyflow: function () {
 			return this.collectProps(Energyflow);
 		},
+		activeLoadpoints: function () {
+			return this.loadpoints.filter((lp) => lp.chargePower > 0);
+		},
 		activeLoadpointsCount: function () {
-			return this.loadpoints.filter((lp) => lp.chargePower > 0).length;
+			return this.activeLoadpoints.length;
+		},
+		vehicleIcons: function () {
+			return this.activeLoadpoints.map((lp) => lp.vehicleIcon || "car");
 		},
 		loadpointsPower: function () {
 			return this.loadpoints.reduce((sum, lp) => {
--- a/assets/js/components/Vehicle.vue
+++ b/assets/js/components/Vehicle.vue
@ -96,6 +96,7 @@ export default {
 		vehicleDetectionActive: Boolean,
 		vehicleRange: Number,
 		vehicleTitle: String,
+		vehicleIcon: String,
 		vehicleCapacity: Number,
 		socBasedCharging: Boolean,
 		targetTimeActive: Boolean,
--- a/assets/js/components/VehicleIcon/Bike.vue
+++ b/assets/js/components/VehicleIcon/Bike.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M5 20q-2.125 0-3.562-1.438Q0 17.125 0 15t1.463-3.562Q2.925 10 5 10q1.925 0 3.238 1.15Q9.55 12.3 9.9 14h.65l-1.8-5H8q-.425 0-.713-.288Q7 8.425 7 8t.287-.713Q7.575 7 8 7h3q.425 0 .713.287Q12 7.575 12 8t-.287.712Q11.425 9 11 9h-.1l.35 1h4.8L14.6 6H13q-.425 0-.712-.287Q12 5.425 12 5t.288-.713Q12.575 4 13 4h1.6q.65 0 1.163.35q.512.35.737.95l1.7 4.65h.8q2.075 0 3.538 1.462Q24 12.875 24 14.95q0 2.1-1.45 3.575T19 20q-1.8 0-3.162-1.125Q14.475 17.75 14.1 16H9.9q-.35 1.725-1.7 2.863Q6.85 20 5 20Zm0-2q1.025 0 1.763-.562Q7.5 16.875 7.8 16H6q-.425 0-.713-.288Q5 15.425 5 15t.287-.713Q5.575 14 6 14h1.8q-.3-.9-1.037-1.45Q6.025 12 5 12q-1.275 0-2.138.863Q2 13.725 2 15q0 1.25.862 2.125Q3.725 18 5 18Zm7.7-4h1.4q.125-.575.338-1.075q.212-.5.562-.925h-3.05Zm6.3 4q1.275 0 2.138-.875Q22 16.25 22 15q0-1.275-.862-2.137Q20.275 12 19 12h-.1l.65 1.7q.15.4-.037.762q-.188.363-.563.538q-.4.175-.775-.013q-.375-.187-.525-.587l-.6-1.7q-.5.425-.775 1T16 15q0 1.25.863 2.125Q17.725 18 19 18Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Bike",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Bus.vue
+++ b/assets/js/components/VehicleIcon/Bus.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M6.5 21q-.625 0-1.062-.438Q5 20.125 5 19.5v-1.55q-.45-.5-.725-1.113Q4 16.225 4 15.5V6q0-2.075 1.925-3.038Q7.85 2 12 2q4.3 0 6.15.925Q20 3.85 20 6v9.5q0 .725-.275 1.337q-.275.613-.725 1.113v1.55q0 .625-.438 1.062Q18.125 21 17.5 21t-1.062-.438Q16 20.125 16 19.5V19H8v.5q0 .625-.438 1.062Q7.125 21 6.5 21Zm5.55-16h5.6h-11.2h5.6ZM16 12H6h12h-2ZM6 10h12V7H6Zm2.5 6q.625 0 1.062-.438Q10 15.125 10 14.5t-.438-1.062Q9.125 13 8.5 13t-1.062.438Q7 13.875 7 14.5t.438 1.062Q7.875 16 8.5 16Zm7 0q.625 0 1.062-.438Q17 15.125 17 14.5t-.438-1.062Q16.125 13 15.5 13t-1.062.438Q14 13.875 14 14.5t.438 1.062Q14.875 16 15.5 16ZM6.45 5h11.2q-.375-.425-1.612-.713Q14.8 4 12.05 4q-2.675 0-3.913.312Q6.9 4.625 6.45 5ZM8 17h8q.825 0 1.413-.587Q18 15.825 18 15v-3H6v3q0 .825.588 1.413Q7.175 17 8 17Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Bus",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Cooler.vue
+++ b/assets/js/components/VehicleIcon/Cooler.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="m11 17.85l-2.575 2.525q-.275.275-.687.275q-.413 0-.688-.3q-.3-.275-.3-.687q0-.413.3-.713L11 15v-2H9l-3.975 3.975q-.275.275-.687.275q-.413 0-.713-.3q-.275-.275-.275-.688q0-.412.275-.687L6.15 13H2.975q-.425 0-.7-.288Q2 12.425 2 12t.288-.713Q2.575 11 3 11h3.15L3.625 8.45q-.275-.275-.275-.688q0-.412.3-.712q.275-.275.688-.275q.412 0 .712.275L9 11h2V9L7.025 5.05q-.275-.275-.275-.688q0-.412.3-.712q.275-.275.688-.275q.412 0 .687.275L11 6.15V3q0-.425.288-.713Q11.575 2 12 2t.713.287Q13 2.575 13 3v3.15l2.55-2.5q.275-.275.688-.275q.412 0 .712.275q.275.3.275.712q0 .413-.275.688L13 9v2h2l3.95-3.95q.275-.275.688-.275q.412 0 .712.3q.275.275.275.687q0 .413-.275.688L17.85 11H21q.425 0 .712.287q.288.288.288.713t-.288.712Q21.425 13 21 13h-3.15l2.5 2.575q.275.275.275.687q0 .413-.275.688q-.3.3-.712.3q-.413 0-.688-.3L15 13h-2v2l3.95 3.975q.275.275.275.688q0 .412-.3.712q-.275.275-.687.275q-.413 0-.688-.275L13 17.85v3.175q0 .425-.287.7Q12.425 22 12 22t-.712-.288Q11 21.425 11 21Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Cooler",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Generic.vue
+++ b/assets/js/components/VehicleIcon/Generic.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M18 15v-2h2q.425 0 .712.287q.288.288.288.713t-.288.712Q20.425 15 20 15Zm0 4v-2h2q.425 0 .712.288q.288.287.288.712t-.288.712Q20.425 19 20 19Zm-4 1q-.825 0-1.412-.587Q12 18.825 12 18h-2v-4h2q0-.825.588-1.413Q13.175 12 14 12h2q.425 0 .712.287q.288.288.288.713v6q0 .425-.288.712Q16.425 20 16 20Zm-7-3q-1.65 0-2.825-1.175Q3 14.65 3 13q0-1.65 1.175-2.825Q5.35 9 7 9h1.5q.625 0 1.062-.438Q10 8.125 10 7.5t-.438-1.062Q9.125 6 8.5 6H5q-.425 0-.713-.287Q4 5.425 4 5t.287-.713Q4.575 4 5 4h3.5q1.45 0 2.475 1.025Q12 6.05 12 7.5q0 1.45-1.025 2.475Q9.95 11 8.5 11H7q-.825 0-1.412.587Q5 12.175 5 13q0 .825.588 1.412Q6.175 15 7 15h2v2Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Plug",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Heater.vue
+++ b/assets/js/components/VehicleIcon/Heater.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M12 22q-3.35 0-5.675-2.325Q4 17.35 4 14q0-2.825 1.675-5.425q1.675-2.6 4.6-4.55q.55-.375 1.138-.038Q12 4.325 12 5v1.3q0 .85.588 1.425q.587.575 1.437.575q.425 0 .813-.187q.387-.188.687-.538q.2-.25.513-.313q.312-.062.587.138Q18.2 8.525 19.1 10.275q.9 1.75.9 3.725q0 3.35-2.325 5.675Q15.35 22 12 22Zm-6-8q0 1.3.525 2.462q.525 1.163 1.5 2.038Q8 18.375 8 18.275v-.225q0-.8.3-1.5t.875-1.275L12 12.5l2.825 2.775q.575.575.875 1.275q.3.7.3 1.5v.225q0 .1-.025.225q.975-.875 1.5-2.038Q18 15.3 18 14q0-1.25-.462-2.363q-.463-1.112-1.338-1.987q-.5.325-1.05.487q-.55.163-1.125.163q-1.55 0-2.687-1.025Q10.2 8.25 10.025 6.75q-1.95 1.65-2.987 3.512Q6 12.125 6 14Zm6 1.3l-1.425 1.4q-.275.275-.425.625q-.15.35-.15.725q0 .8.588 1.375Q11.175 20 12 20t1.413-.575Q14 18.85 14 18.05q0-.4-.15-.738q-.15-.337-.425-.612Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Heater",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Moped.vue
+++ b/assets/js/components/VehicleIcon/Moped.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M7 17q-1.25 0-2.125-.875T4 14H3q-.425 0-.712-.288Q2 13.425 2 13v-2q0-1.65 1.175-2.825Q4.35 7 6 7h3q.425 0 .713.287Q10 7.575 10 8v4h3.5L17 7.65V5h-2q-.425 0-.712-.288Q14 4.425 14 4t.288-.713Q14.575 3 15 3h2q.825 0 1.413.587Q19 4.175 19 5v2.65q0 .35-.112.662q-.113.313-.313.588L15.1 13.25q-.275.35-.7.55q-.425.2-.875.2H10q0 1.25-.875 2.125T7 17Zm1-5Zm-1 3q.425 0 .713-.288Q8 14.425 8 14H6q0 .425.287.712Q6.575 15 7 15ZM6 6q-.425 0-.713-.287Q5 5.425 5 5t.287-.713Q5.575 4 6 4h3q.425 0 .713.287Q10 4.575 10 5t-.287.713Q9.425 6 9 6Zm13 11q-1.25 0-2.125-.875T16 14q0-1.25.875-2.125T19 11q1.25 0 2.125.875T22 14q0 1.25-.875 2.125T19 17Zm0-2q.425 0 .712-.288Q20 14.425 20 14t-.288-.713Q19.425 13 19 13t-.712.287Q18 13.575 18 14t.288.712Q18.575 15 19 15Zm-6 8l-6-3h4v-2l6 3h-4ZM4 12h4V9H6q-.825 0-1.412.587Q4 10.175 4 11Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Moped",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Motorcycle.vue
+++ b/assets/js/components/VehicleIcon/Motorcycle.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M5 19q-2.075 0-3.537-1.462Q0 16.075 0 14q0-2.075 1.463-3.538Q2.925 9 5 9h11.6l-2-2H12q-.425 0-.712-.287Q11 6.425 11 6t.288-.713Q11.575 5 12 5h2.975q.2 0 .388.075q.187.075.337.225l3.75 3.75q1.95.15 3.25 1.575T24 14q0 2.075-1.462 3.538Q21.075 19 19 19q-2.075 0-3.537-1.462Q14 16.075 14 14q0-.45.062-.888q.063-.437.238-.862l-2.175 2.175q-.275.275-.637.425q-.363.15-.763.15H9.9q-.35 1.75-1.725 2.875T5 19Zm14-2q1.25 0 2.125-.875T22 14q0-1.25-.875-2.125T19 11q-1.25 0-2.125.875T16 14q0 1.25.875 2.125T19 17ZM5 17q.95 0 1.713-.55Q7.475 15.9 7.8 15H6q-.425 0-.713-.288Q5 14.425 5 14t.287-.713Q5.575 13 6 13h1.8q-.325-.9-1.087-1.45Q5.95 11 5 11q-1.25 0-2.125.875T2 14q0 1.25.875 2.125T5 17Zm4.95-4h.75l2-2H8.95q.375.425.625.925T9.95 13Zm0-2h-1h3.75h-2Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Motorcycle",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Scooter.vue
+++ b/assets/js/components/VehicleIcon/Scooter.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M5 18q-1.25 0-2.125-.875T2 15q0-1.25.875-2.125T5 12q.975 0 1.738.562Q7.5 13.125 7.8 14h5.3q.275-1.7 1.412-2.975Q15.65 9.75 17.3 9.25L15.9 3H13q-.425 0-.712-.288Q12 2.425 12 2t.288-.713Q12.575 1 13 1h2.9q.675 0 1.237.438q.563.437.713 1.112l1.9 8.45H19q-1.65 0-2.825 1.175Q15 13.35 15 15v1H7.8q-.3.875-1.062 1.438Q5.975 18 5 18Zm0-2q.425 0 .713-.288Q6 15.425 6 15t-.287-.713Q5.425 14 5 14t-.713.287Q4 14.575 4 15t.287.712Q4.575 16 5 16Zm14 2q-1.25 0-2.125-.875T16 15q0-1.25.875-2.125T19 12q1.25 0 2.125.875T22 15q0 1.25-.875 2.125T19 18Zm0-2q.425 0 .712-.288Q20 15.425 20 15t-.288-.713Q19.425 14 19 14t-.712.287Q18 14.575 18 15t.288.712Q18.575 16 19 16Zm-6 7l-6-3h4v-2l6 3h-4Zm-8-8Zm14 0Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Scooter",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Tractor.vue
+++ b/assets/js/components/VehicleIcon/Tractor.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M4 9q-.425 0-.712-.288Q3 8.425 3 8t.288-.713Q3.575 7 4 7h3q.825 0 1.412.587Q9 8.175 9 9Zm2 9q1.25 0 2.125-.875T9 15q0-1.25-.875-2.125T6 12q-1.25 0-2.125.875T3 15q0 1.25.875 2.125T6 18Zm13.5 0q.625 0 1.062-.438Q21 17.125 21 16.5t-.438-1.062Q20.125 15 19.5 15t-1.062.438Q18 15.875 18 16.5t.438 1.062Q18.875 18 19.5 18ZM6 16.5q-.625 0-1.062-.438Q4.5 15.625 4.5 15t.438-1.062Q5.375 13.5 6 13.5t1.062.438Q7.5 14.375 7.5 15t-.438 1.062Q6.625 16.5 6 16.5Zm14-3.475q.65.125 1.075.337q.425.213.925.688V8q0-.825-.587-1.412Q20.825 6 20 6h-6.3l-1.05-1.1l1.05-1.05q.15-.15.15-.35q0-.2-.15-.35q-.15-.15-.35-.15q-.2 0-.35.15l-2.825 2.825q-.15.15-.15.363q0 .212.175.362q.15.15.35.15q.2 0 .35-.15l1.05-1.05L13 6.7V9q0 .825-.587 1.412Q11.825 11 11 11H8.975q.575.425.925.875q.35.45.7 1.125h.4q1.65 0 2.825-1.175Q15 10.65 15 9V8h5ZM16.025 16q.15-.675.363-1.088q.212-.412.662-.912H10.9q.1.575.1 1q0 .425-.1 1Zm3.475 4q-1.45 0-2.475-1.025Q16 17.95 16 16.5q0-1.45 1.025-2.475Q18.05 13 19.5 13q1.45 0 2.475 1.025Q23 15.05 23 16.5q0 1.45-1.025 2.475Q20.95 20 19.5 20ZM6 20q-2.075 0-3.537-1.462Q1 17.075 1 15q0-2.075 1.463-3.538Q3.925 10 6 10t3.538 1.462Q11 12.925 11 15q0 2.075-1.462 3.538Q8.075 20 6 20Zm9.825-9Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Tractor",
+};
+</script>
--- a/assets/js/components/VehicleIcon/Van.vue
+++ b/assets/js/components/VehicleIcon/Van.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M6 20q-1.25 0-2.125-.875T3 17q-.825 0-1.412-.587Q1 15.825 1 15V6q0-.825.588-1.412Q2.175 4 3 4h12q.825 0 1.413.588Q17 5.175 17 6v2h2.5q.25 0 .45.1t.35.3l2.5 3.325q.1.125.15.275q.05.15.05.325V16q0 .425-.288.712Q22.425 17 22 17h-1q0 1.25-.875 2.125T18 20q-1.25 0-2.125-.875T15 17H9q0 1.25-.875 2.125T6 20Zm0-2q.425 0 .713-.288Q7 17.425 7 17t-.287-.712Q6.425 16 6 16t-.713.288Q5 16.575 5 17t.287.712Q5.575 18 6 18ZM3 6v9h.8q.425-.45.975-.725Q5.325 14 6 14t1.225.275q.55.275.975.725H15V6H3Zm15 12q.425 0 .712-.288Q19 17.425 19 17t-.288-.712Q18.425 16 18 16t-.712.288Q17 16.575 17 17t.288.712Q17.575 18 18 18Zm-1-5h4.25L19 10h-2Zm-8-2.5Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "Van",
+};
+</script>
--- a/assets/js/components/VehicleIcon/VehicleIcon.story.vue
+++ b/assets/js/components/VehicleIcon/VehicleIcon.story.vue
@ -0,0 +1,32 @@
+<script setup>
+import VehicleIcon from "./VehicleIcon.vue";
+
+const icons = [
+	"car",
+	"bike",
+	"scooter",
+	"moped",
+	"motorcycle",
+	"van",
+	"bus",
+	"tractor",
+	"generic",
+	"heater",
+	"cooler",
+	"waterheater",
+];
+</script>
+
+<template>
+	<Story :layout="{ type: 'grid', width: 150 }">
+		<Variant v-for="icon in icons" :key="icon" :title="icon">
+			<VehicleIcon :name="icon" size="xl" />
+		</Variant>
+		<Variant title="2 cars">
+			<VehicleIcon :names="['car', 'car']" size="xl" />
+		</Variant>
+		<Variant title="car & 3 bikes">
+			<VehicleIcon :names="['car', 'bike', 'bike', 'bike']" size="xl" />
+		</Variant>
+	</Story>
+</template>
--- a/assets/js/components/VehicleIcon/VehicleIcon.vue
+++ b/assets/js/components/VehicleIcon/VehicleIcon.vue
@ -0,0 +1,80 @@
+<template>
+	<component :is="singleIcon" v-if="single" :class="`icon icon--${size}`"></component>
+	<MultiIcon v-else :count="count" :size="size"></MultiIcon>
+</template>
+
+<script>
+import "@h2d2/shopicons/es/regular/car3";
+import MultiIcon from "../MultiIcon";
+
+import bike from "./Bike.vue";
+import bus from "./Bus.vue";
+import cooler from "./Cooler.vue";
+import generic from "./Generic.vue";
+import heater from "./Heater.vue";
+import moped from "./Moped.vue";
+import motorcycle from "./Motorcycle.vue";
+import scooter from "./Scooter.vue";
+import tractor from "./Tractor.vue";
+import van from "./Van.vue";
+import waterheater from "./WaterHeater.vue";
+
+const icons = {
+	bike,
+	bus,
+	car: "shopicon-regular-car3",
+	cooler,
+	generic,
+	heater,
+	moped,
+	motorcycle,
+	scooter,
+	tractor,
+	van,
+	waterheater,
+};
+
+export default {
+	name: "VehicleIcon",
+	components: { MultiIcon },
+	props: {
+		name: { type: String, default: "car" },
+		names: { type: Array },
+		size: { type: String, default: "s" },
+	},
+	computed: {
+		uniqueNames: function () {
+			return [...new Set(this.names || [this.name])];
+		},
+		count: function () {
+			return this.names.length;
+		},
+		single: function () {
+			return this.uniqueNames.length == 1;
+		},
+		singleIcon: function () {
+			return icons[this.uniqueNames[0]] || `shopicon-regular-car3`;
+		},
+	},
+};
+</script>
+
+<style scoped>
+.icon {
+	display: block;
+	width: 24px;
+	height: 24px;
+}
+.icon--m {
+	width: 32px;
+	height: 32px;
+}
+.icon--l {
+	width: 48px;
+	height: 48px;
+}
+.icon--xl {
+	width: 64px;
+	height: 64px;
+}
+</style>
--- a/assets/js/components/VehicleIcon/WaterHeater.vue
+++ b/assets/js/components/VehicleIcon/WaterHeater.vue
@ -0,0 +1,14 @@
+<template>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M6 22q-.825 0-1.412-.587Q4 20.825 4 20V6q0-1.65 1.175-2.825Q6.35 2 8 2h8q1.65 0 2.825 1.175Q20 4.35 20 6v14q0 .825-.587 1.413Q18.825 22 18 22Zm0-4v2h12v-2q-.75 0-1.2.5q-.45.5-1.8.5t-1.762-.5Q12.825 18 12 18t-1.237.5Q10.35 19 9 19q-1.35 0-1.762-.5Q6.825 18 6 18Zm3-1q.825 0 1.238-.5Q10.65 16 12 16t1.8.5q.45.5 1.2.5t1.2-.5q.45-.5 1.8-.5V6q0-.825-.587-1.412Q16.825 4 16 4H8q-.825 0-1.412.588Q6 5.175 6 6v10q1.35 0 1.763.5q.412.5 1.237.5Zm3.125-2.05q-1.65 0-2.875-1.088q-1.225-1.087-1.225-2.787q0-.575.163-1.188q.162-.612.587-1.212q.075-.125.213-.2q.137-.075.312-.075q.1 0 .15.062q.05.063.05.138q-.025.15-.037.287q-.013.138-.013.263q0 .75.313 1.312q.312.563.562.563q.15 0 .213-.1q.062-.1.062-.225t-.05-.288L10.425 10q-.05-.2-.1-.488q-.05-.287-.05-.662q0-1.35.612-2.313q.613-.962 1.738-1.462q.1-.05.138-.063Q12.8 5 12.875 5q.075 0 .113.05q.037.05.012.125q-.1.275-.137.487q-.038.213-.038.488q0 .8.438 1.425q.437.625 1.162 1.125q.775.525 1.125 1.288q.35.762.35 1.562q0 1.275-1 2.337q-1 1.063-2.775 1.063Zm.125-1.675q.7 0 1.175-.5q.475-.5.475-1.175q0-.4-.212-.713q-.213-.312-.513-.562q-.3-.25-.5-.5t-.3-.525q-.25.225-.3.512q-.05.288.025.688q.05.275.075.512q.025.238.025.438q0 .5-.325.9t-.775.475q.2.2.538.325q.337.125.612.125ZM12 12Z"
+		></path>
+	</svg>
+</template>
+
+<script>
+export default {
+	name: "WaterHeater",
+};
+</script>
--- a/assets/js/components/VehicleIcon/index.js
+++ b/assets/js/components/VehicleIcon/index.js
@ -0,0 +1,3 @@
+import VehicleIcon from "./VehicleIcon.vue";
+
+export default VehicleIcon;
--- a/assets/js/components/VehicleTitle.vue
+++ b/assets/js/components/VehicleTitle.vue
@ -8,10 +8,11 @@
 				:title="$t('main.vehicle.detectionActive')"
 				class="me-2 flex-shrink-0 spin"
 			></shopicon-regular-refresh>
-			<shopicon-regular-car3
-				v-else-if="icon === 'car'"
+			<VehicleIcon
+				v-else-if="icon === 'vehicle'"
+				:name="vehicleIcon"
 				class="me-2 flex-shrink-0"
-			></shopicon-regular-car3>
+			/>
 			<shopicon-regular-cablecharge
 				v-else
 				class="me-2 flex-shrink-0"
@ -36,19 +37,20 @@
 </template>

 <script>
-import "@h2d2/shopicons/es/regular/car3";
 import "@h2d2/shopicons/es/regular/refresh";
 import "@h2d2/shopicons/es/regular/cablecharge";
+import VehicleIcon from "./VehicleIcon";
 import { Tooltip } from "bootstrap";

 import VehicleOptions from "./VehicleOptions.vue";

 export default {
 	name: "VehicleTitle",
-	components: { VehicleOptions },
+	components: { VehicleOptions, VehicleIcon },
 	props: {
 		vehiclePresent: Boolean,
 		vehicleTitle: String,
+		vehicleIcon: String,
 		vehicleDetectionActive: Boolean,
 		parked: Boolean,
 		connected: Boolean,
@ -61,7 +63,7 @@ export default {
 				return "refresh";
 			}
 			if (this.connected || this.parked) {
-				return "car";
+				return "vehicle";
 			}
 			return null;
 		},
--- a/cmd/demo.yaml
+++ b/cmd/demo.yaml
@ -164,7 +164,6 @@ vehicles:
    capacity: 44
    onidentify:
      targetsoc: 90
-
  - name: vehicle_2
    title: weißes Model 3
    type: custom
@ -196,7 +195,18 @@ vehicles:
    type: template
    template: offline
    title: grüner Honda e
-    capacity: 9
+    capacity: 8
+  - name: vehicle_4
+    type: template
+    template: offline
+    title: schwarzes VanMoof
+    icon: bike
+    capacity: 0.46
+  - name: vehicle_5
+    type: template
+    template: offline
+    title: Wärmepumpe
+    icon: waterheater

 site:
  title: Zuhause
@ -211,8 +221,9 @@ loadpoints:
    mode: pv
    phases: 1
    meter: meter_charger_1
-    # vehicle: vehicle_1 # default
+    vehicle: vehicle_1
  - title: Garage
    charger: charger_2
    mode: "off"
    meter: meter_charger_2
+    vehicle: vehicle_2
--- a/core/loadpoint.go
+++ b/core/loadpoint.go
@ -876,6 +876,7 @@ func (lp *LoadPoint) setActiveVehicle(vehicle api.Vehicle) {

 		lp.publish("vehiclePresent", true)
 		lp.publish("vehicleTitle", lp.vehicle.Title())
+		lp.publish("vehicleIcon", lp.vehicle.Icon())
 		lp.publish("vehicleCapacity", lp.vehicle.Capacity())

 		// unblock api
@ -891,6 +892,7 @@ func (lp *LoadPoint) setActiveVehicle(vehicle api.Vehicle) {

 		lp.publish("vehiclePresent", false)
 		lp.publish("vehicleTitle", "")
+		lp.publish("vehicleIcon", "")
 		lp.publish("vehicleCapacity", int64(0))
 		lp.publish(vehicleOdometer, 0.0)
 	}
--- a/core/loadpoint_vehicle_test.go
+++ b/core/loadpoint_vehicle_test.go
@ -152,6 +152,7 @@ func TestDefaultVehicle(t *testing.T) {

 	dflt := mock.NewMockVehicle(ctrl)
 	dflt.EXPECT().Title().Return("default").AnyTimes()
+	dflt.EXPECT().Icon().Return("").AnyTimes()
 	dflt.EXPECT().Capacity().AnyTimes()
 	dflt.EXPECT().Phases().AnyTimes()
 	dflt.EXPECT().OnIdentified().Return(api.ActionConfig{
@ -162,6 +163,7 @@ func TestDefaultVehicle(t *testing.T) {

 	vehicle := mock.NewMockVehicle(ctrl)
 	vehicle.EXPECT().Title().Return("target").AnyTimes()
+	vehicle.EXPECT().Icon().Return("").AnyTimes()
 	vehicle.EXPECT().Capacity().AnyTimes()
 	vehicle.EXPECT().Phases().AnyTimes()
 	vehicle.EXPECT().OnIdentified().AnyTimes()
@ -265,6 +267,7 @@ func TestApplyVehicleDefaults(t *testing.T) {

 	vehicle := mock.NewMockVehicle(ctrl)
 	vehicle.EXPECT().Title().Return("it's me").AnyTimes()
+	vehicle.EXPECT().Icon().Return("").AnyTimes()
 	vehicle.EXPECT().Capacity().AnyTimes()
 	vehicle.EXPECT().Phases().AnyTimes()
 	vehicle.EXPECT().OnIdentified().Return(oi).AnyTimes()
@ -322,6 +325,7 @@ func TestReconnectVehicle(t *testing.T) {

 	vehicle := &vehicleT{mock.NewMockVehicle(ctrl), mock.NewMockChargeState(ctrl)}
 	vehicle.MockVehicle.EXPECT().Title().Return("vehicle").AnyTimes()
+	vehicle.MockVehicle.EXPECT().Icon().Return("").AnyTimes()
 	vehicle.MockVehicle.EXPECT().Capacity().AnyTimes()
 	vehicle.MockVehicle.EXPECT().Phases().AnyTimes()
 	vehicle.MockVehicle.EXPECT().OnIdentified().AnyTimes()
--- a/dist/assets/index.124925c5.js
+++ b/dist/assets/index.124925c5.js
--- a/dist/assets/index.7be4e4cb.js
+++ b/dist/assets/index.7be4e4cb.js
--- a/dist/assets/index.932fb253.css
+++ b/dist/assets/index.932fb253.css
--- a/dist/index.html
+++ b/dist/index.html
@ -20,8 +20,8 @@
    <meta name="theme-color" content="#020318" />

    <title>evcc</title>
-    <script type="module" crossorigin src="./assets/index.7be4e4cb.js"></script>
-    <link rel="stylesheet" href="./assets/index.f6de0430.css">
+    <script type="module" crossorigin src="./assets/index.124925c5.js"></script>
+    <link rel="stylesheet" href="./assets/index.932fb253.css">
  </head>

  <body>
--- a/mock/mock_api.go
+++ b/mock/mock_api.go
@ -318,6 +318,20 @@ func (mr *MockVehicleMockRecorder) Capacity() *gomock.Call {
 	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "Capacity", reflect.TypeOf((*MockVehicle)(nil).Capacity))
 }

+// Icon mocks base method.
+func (m *MockVehicle) Icon() string {
+	m.ctrl.T.Helper()
+	ret := m.ctrl.Call(m, "Icon")
+	ret0, _ := ret[0].(string)
+	return ret0
+}
+
+// Icon indicates an expected call of Icon.
+func (mr *MockVehicleMockRecorder) Icon() *gomock.Call {
+	mr.mock.ctrl.T.Helper()
+	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "Icon", reflect.TypeOf((*MockVehicle)(nil).Icon))
+}
+
 // Identifiers mocks base method.
 func (m *MockVehicle) Identifiers() []string {
 	m.ctrl.T.Helper()
--- a/schema.json
+++ b/schema.json
@ -47,6 +47,9 @@
          "title": {
            "type": "string"
          },
+          "icon": {
+            "type": "string"
+          },
          "capacity": {
            "type": "integer"
          },
@ -87,9 +90,7 @@
    },
    "site": {
      "type": "object",
-      "required": [
-        "meters"
-      ],
+      "required": ["meters"],
      "properties": {
        "title": {
          "type": "string"
@ -135,9 +136,7 @@
      "description": "List of loadpoints",
      "items": {
        "type": "object",
-        "required": [
-          "charger"
-        ],
+        "required": ["charger"],
        "properties": {
          "title": {
            "type": "string"
@ -221,10 +220,7 @@
    },
    "namedObject": {
      "type": "object",
-      "required": [
-        "name",
-        "type"
-      ],
+      "required": ["name", "type"],
      "properties": {
        "name": {
          "type": "string"
@ -238,28 +234,13 @@
      }
    },
    "loglevel": {
-      "enum": [
-        "trace",
-        "debug",
-        "info",
-        "error",
-        "fatal"
-      ]
+      "enum": ["trace", "debug", "info", "error", "fatal"]
    },
    "mode": {
-      "enum": [
-        "off",
-        "now",
-        "pv",
-        "minpv"
-      ]
+      "enum": ["off", "now", "pv", "minpv"]
    },
    "pollMode": {
-      "enum": [
-        "always",
-        "charging",
-        "connected"
-      ]
+      "enum": ["always", "charging", "connected"]
    }
  }
 }
--- a/templates/definition/defaults.yaml
+++ b/templates/definition/defaults.yaml
@ -224,6 +224,29 @@ params:
      en: "'en' for English and 'de' for German"
    default: en
    validvalues: ["de", "en"]
+  - name: icon
+    description:
+      de: Icon
+      en: Icon
+    help:
+      de: "Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater"
+      en: "Visible in UI. Possible values: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater"
+    validvalues:
+      [
+        "bike",
+        "bus",
+        "car",
+        "heater",
+        "heatercooler",
+        "heatpump",
+        "moped",
+        "motorcycle",
+        "plug",
+        "scooter",
+        "tractor",
+        "van",
+        "waterheater",
+      ]
  - name: ski
    required: true
    help:
@ -242,6 +265,9 @@ presets:
      - name: capacity
      - name: phases
        advanced: true
+      - name: icon
+        default: car
+        advanced: true
      - name: cache
        default: 15m
        advanced: true
@ -250,6 +276,9 @@ presets:
      {{- if ne .title "" }}
      title: {{ .title }}
      {{- end }}
+      {{- if ne .icon "" }}
+      icon: {{ .icon }}
+      {{- end }}
      user: {{ .user }}
      password: {{ .password }}
      {{- if ne .capacity "" }}
--- a/templates/definition/vehicle/evnotify.yaml
+++ b/templates/definition/vehicle/evnotify.yaml
@ -13,6 +13,9 @@ params:
    valuetype: float
  - name: phases
    advanced: true
+  - name: icon
+    default: car
+    advanced: true
  - preset: vehicleidentify
 render: |
  type: custom
--- a/templates/definition/vehicle/niu-e-scooter.yaml
+++ b/templates/definition/vehicle/niu-e-scooter.yaml
@ -18,12 +18,17 @@ params:
    required: true
  - name: capacity
    default: 4
+  - name: icon
+    default: scooter
  - preset: vehicleidentify
 render: |
  type: niu
  {{- if ne .title "" }}
  title: {{ .title }}
  {{- end }}
+  {{- if ne .icon "" }}
+  icon: {{ .icon }}
+  {{- end }}
  user: {{ .user }} # NIU app user
  password: {{ .password }} # NIU app password
  serial: {{ .serial }} # NIU E-Scooter serial number like shown in app
--- a/templates/definition/vehicle/offline.yaml
+++ b/templates/definition/vehicle/offline.yaml
@ -5,6 +5,9 @@ products:
 group: generic
 params:
  - name: title
+  - name: icon
+    default: car
+    advanced: true
  - name: capacity
    valuetype: float
  - name: phases
@ -24,6 +27,9 @@ render: |
  {{- if ne .title "" }}
  title: {{ .title }}
  {{- end }}
+  {{- if ne .icon "" }}
+  icon: {{ .icon }}
+  {{- end }}
  capacity: {{ .capacity }} # kWh
  {{- if ne .phases "" }}
  phases: {{ .phases }}
--- a/templates/definition/vehicle/ovms.yaml
+++ b/templates/definition/vehicle/ovms.yaml
@ -20,12 +20,18 @@ params:
    default: 12
  - name: phases
    advanced: true
+  - name: icon
+    default: car
+    advanced: true
  - preset: vehicleidentify
 render: |
  type: ovms
  {{- if ne .title "" }}
  title: {{ .title }}
  {{- end }}
+  {{- if ne .icon "" }}
+  icon: {{ .icon }}
+  {{- end }}
  user: {{ .user }}
  password: {{ .password }}
  vehicleid: {{ .vehicleid }} # vehicle id
--- a/templates/definition/vehicle/silence.yaml
+++ b/templates/definition/vehicle/silence.yaml
@ -11,6 +11,8 @@ params:
  - preset: vehiclebase
  - name: vin
    example: W...
+  - name: icon
+    default: scooter
 render: |
  type: silence
  {{ include "vehicle-base" . }}
--- a/templates/definition/vehicle/tesla.yaml
+++ b/templates/definition/vehicle/tesla.yaml
@ -34,12 +34,18 @@ params:
  - name: capacity
  - name: phases
    advanced: true
+  - name: icon
+    default: car
+    advanced: true
  - preset: vehicleidentify
 render: |
  type: tesla
  {{- if ne .title "" }}
  title: {{ .title }}
  {{- end }}
+  {{- if ne .icon "" }}
+  icon: {{ .icon }}
+  {{- end }}
  tokens:
    access: {{ .accessToken }}
    refresh: {{ .refreshToken }}
--- a/templates/definition/vehicle/tronity.yaml
+++ b/templates/definition/vehicle/tronity.yaml
@ -17,12 +17,18 @@ params:
    default: 10
  - name: phases
    advanced: true
+  - name: icon
+    default: car
+    advanced: true
  - preset: vehicleidentify
 render: |
  type: tronity
  {{- if ne .title "" }}
  title: {{ .title }}
  {{- end }}
+  {{- if ne .icon "" }}
+  icon: {{ .icon }}
+  {{- end }}
  credentials:
    id: {{ .user }}
    secret: {{ .password }}
--- a/templates/docs/vehicle/audi_0.yaml
+++ b/templates/docs/vehicle/audi_0.yaml
@ -19,6 +19,7 @@ render:
      vin: WAUZZZ... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/bmw_0.yaml
+++ b/templates/docs/vehicle/bmw_0.yaml
@ -18,6 +18,7 @@ render:
      vin: WBMW... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/carwings_0.yaml
+++ b/templates/docs/vehicle/carwings_0.yaml
@ -19,6 +19,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/citroen_0.yaml
+++ b/templates/docs/vehicle/citroen_0.yaml
@ -18,6 +18,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/cupra_0.yaml
+++ b/templates/docs/vehicle/cupra_0.yaml
@ -19,6 +19,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/dacia_0.yaml
+++ b/templates/docs/vehicle/dacia_0.yaml
@ -18,6 +18,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 27.4 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/ds_0.yaml
+++ b/templates/docs/vehicle/ds_0.yaml
@ -18,6 +18,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/enyaq_0.yaml
+++ b/templates/docs/vehicle/enyaq_0.yaml
@ -19,6 +19,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/etron_0.yaml
+++ b/templates/docs/vehicle/etron_0.yaml
@ -19,6 +19,7 @@ render:
      vin: WAUZZZ... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/evnotify_0.yaml
+++ b/templates/docs/vehicle/evnotify_0.yaml
@ -17,6 +17,7 @@ render:
      token:
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
      targetSoC: 80 # Bis zu welchem Ladestand (SoC) soll das Fahrzeug geladen werden # Optional
--- a/templates/docs/vehicle/fiat_0.yaml
+++ b/templates/docs/vehicle/fiat_0.yaml
@ -19,6 +19,7 @@ render:
      vin: ZFAE... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      pin: # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
--- a/templates/docs/vehicle/ford_0.yaml
+++ b/templates/docs/vehicle/ford_0.yaml
@ -18,6 +18,7 @@ render:
      vin: WF0FXX... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/hyundai_0.yaml
+++ b/templates/docs/vehicle/hyundai_0.yaml
@ -20,6 +20,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      language: en # 'de' für Deutsch und 'en' für Englisch # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
--- a/templates/docs/vehicle/id_0.yaml
+++ b/templates/docs/vehicle/id_0.yaml
@ -21,6 +21,7 @@ render:
      vin: WVWZZZ... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/jaguar-landrover_0.yaml
+++ b/templates/docs/vehicle/jaguar-landrover_0.yaml
@ -18,6 +18,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/jaguar-landrover_1.yaml
+++ b/templates/docs/vehicle/jaguar-landrover_1.yaml
@ -18,6 +18,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/kia_0.yaml
+++ b/templates/docs/vehicle/kia_0.yaml
@ -20,6 +20,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      language: en # 'de' für Deutsch und 'en' für Englisch # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
--- a/templates/docs/vehicle/mini_0.yaml
+++ b/templates/docs/vehicle/mini_0.yaml
@ -18,6 +18,7 @@ render:
      vin: WBMW... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/nissan_0.yaml
+++ b/templates/docs/vehicle/nissan_0.yaml
@ -19,6 +19,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/niu-e-scooter_0.yaml
+++ b/templates/docs/vehicle/niu-e-scooter_0.yaml
@ -11,6 +11,7 @@ render:
      password: # Passwort des Benutzerkontos (bei führenden Nullen bitte in einfache Hochkommata setzen)
      serial:
      capacity: 4 # Akku-Kapazität in kWh # Optional
+      icon: scooter # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
    advanced: |
      type: template
      template: niu-e-scooter
@ -19,6 +20,7 @@ render:
      password: # Passwort des Benutzerkontos (bei führenden Nullen bitte in einfache Hochkommata setzen)
      serial:
      capacity: 4 # Akku-Kapazität in kWh # Optional
+      icon: scooter # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
      targetSoC: 80 # Bis zu welchem Ladestand (SoC) soll das Fahrzeug geladen werden # Optional
--- a/templates/docs/vehicle/offline_0.yaml
+++ b/templates/docs/vehicle/offline_0.yaml
@ -11,6 +11,7 @@ render:
      type: template
      template: offline
      title: # Wird in der Benutzeroberfläche angezeigt # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
--- a/templates/docs/vehicle/opel_0.yaml
+++ b/templates/docs/vehicle/opel_0.yaml
@ -18,6 +18,7 @@ render:
      vin: WP0... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/ovms_0.yaml
+++ b/templates/docs/vehicle/ovms_0.yaml
@ -21,6 +21,7 @@ render:
      vehicleid:
      capacity: 12 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
      targetSoC: 80 # Bis zu welchem Ladestand (SoC) soll das Fahrzeug geladen werden # Optional
--- a/templates/docs/vehicle/peugeot_0.yaml
+++ b/templates/docs/vehicle/peugeot_0.yaml
@ -18,6 +18,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/porsche_0.yaml
+++ b/templates/docs/vehicle/porsche_0.yaml
@ -18,6 +18,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/renault_0.yaml
+++ b/templates/docs/vehicle/renault_0.yaml
@ -18,6 +18,7 @@ render:
      vin: WREN... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/seat_0.yaml
+++ b/templates/docs/vehicle/seat_0.yaml
@ -19,6 +19,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/silence_0.yaml
+++ b/templates/docs/vehicle/silence_0.yaml
@ -20,4 +20,5 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: scooter # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
--- a/templates/docs/vehicle/silence_1.yaml
+++ b/templates/docs/vehicle/silence_1.yaml
@ -20,4 +20,5 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: scooter # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
--- a/templates/docs/vehicle/skoda_0.yaml
+++ b/templates/docs/vehicle/skoda_0.yaml
@ -19,6 +19,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/smart_0.yaml
+++ b/templates/docs/vehicle/smart_0.yaml
@ -19,6 +19,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 17.6 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/tesla_0.yaml
+++ b/templates/docs/vehicle/tesla_0.yaml
@ -26,6 +26,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
      targetSoC: 80 # Bis zu welchem Ladestand (SoC) soll das Fahrzeug geladen werden # Optional
--- a/templates/docs/vehicle/tronity_0.yaml
+++ b/templates/docs/vehicle/tronity_0.yaml
@ -20,6 +20,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 10 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
      targetSoC: 80 # Bis zu welchem Ladestand (SoC) soll das Fahrzeug geladen werden # Optional
--- a/templates/docs/vehicle/volvo_0.yaml
+++ b/templates/docs/vehicle/volvo_0.yaml
@ -18,6 +18,7 @@ render:
      vin: W... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/templates/docs/vehicle/vw_0.yaml
+++ b/templates/docs/vehicle/vw_0.yaml
@ -21,6 +21,7 @@ render:
      vin: WVWZZZ... # Erforderlich, wenn mehrere Fahrzeuge des Herstellers vorhanden sind # Optional
      capacity: 50 # Akku-Kapazität in kWh # Optional
      phases: 3 # Die maximale Anzahl der Phasen welche genutzt werden können # Optional
+      icon: car # Darstellung in der UI. Mögliche Werte: bike, bus, car, heater, heatercooler, heatpump, moped, motorcycle, plug, scooter, tractor, van, waterheater # Optional
      cache: 15m # Zeitintervall nach dem Daten erneut vom Fahrzeug abgefragt werden # Optional
      mode: # Möglich sind Off, Now, MinPV und PV, oder leer wenn keiner definiert werden soll # Optional
      minSoC: 25 # Lade sofort mit maximaler Geschwindigkeit bis zu dem angegeben Ladestand, wenn der Lademodus nicht auf 'Aus' steht # Optional
--- a/vehicle/embed.go
+++ b/vehicle/embed.go
@ -7,6 +7,7 @@ import (

 type embed struct {
 	Title_       string           `mapstructure:"title"`
+	Icon_        string           `mapstructure:"icon"`
 	Capacity_    float64          `mapstructure:"capacity"`
 	Phases_      int              `mapstructure:"phases"`
 	Identifiers_ []string         `mapstructure:"identifiers"`
@ -19,6 +20,11 @@ func (v *embed) Title() string {
 	return v.Title_
 }

+// Icon implements the api.Vehicle interface
+func (v *embed) Icon() string {
+	return v.Icon_
+}
+
 // Capacity implements the api.Vehicle interface
 func (v *embed) Capacity() float64 {
 	return v.Capacity_
--- a/vehicle/wrapper/wrapper.go
+++ b/vehicle/wrapper/wrapper.go
@ -27,6 +27,11 @@ func (v *Wrapper) Title() string {
 	return "unavailable"
 }

+// Icon implements the api.Vehicle interface
+func (v *Wrapper) Icon() string {
+	return ""
+}
+
 // Capacity implements the api.Vehicle interface
 func (v *Wrapper) Capacity() float64 {
 	return 0