diff --git a/src/data/action.ts b/src/data/action.ts
index 5398ca51c2..82c72f021a 100644
--- a/src/data/action.ts
+++ b/src/data/action.ts
@@ -1,16 +1,32 @@
-export const ACTION_TYPES = [
-  "condition",
-  "delay",
-  "event",
-  "play_media",
-  "activate_scene",
-  "service",
-  "wait_template",
-  "wait_for_trigger",
-  "repeat",
-  "choose",
-  "if",
-  "device_id",
-  "stop",
-  "parallel",
-];
+import {
+  mdiAbTesting,
+  mdiArrowDecision,
+  mdiCallSplit,
+  mdiChevronRight,
+  mdiCloseOctagon,
+  mdiDevices,
+  mdiExclamation,
+  mdiPalette,
+  mdiPlay,
+  mdiRefresh,
+  mdiShuffleDisabled,
+  mdiTimerOutline,
+  mdiTrafficLight,
+} from "@mdi/js";
+
+export const ACTION_TYPES = {
+  condition: mdiAbTesting,
+  delay: mdiTimerOutline,
+  event: mdiExclamation,
+  play_media: mdiPlay,
+  activate_scene: mdiPalette,
+  service: mdiChevronRight,
+  wait_template: mdiTrafficLight,
+  wait_for_trigger: mdiTrafficLight,
+  repeat: mdiRefresh,
+  choose: mdiArrowDecision,
+  if: mdiCallSplit,
+  device_id: mdiDevices,
+  stop: mdiCloseOctagon,
+  parallel: mdiShuffleDisabled,
+};
diff --git a/src/data/condition.ts b/src/data/condition.ts
index 2d064a61ff..9d0be5b040 100644
--- a/src/data/condition.ts
+++ b/src/data/condition.ts
@@ -1,15 +1,27 @@
-import type { Condition } from "./automation";
+import {
+  mdiAmpersand,
+  mdiCancel,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiExclamation,
+  mdiGateOr,
+  mdiMapMarkerRadius,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiWeatherSunny,
+} from "@mdi/js";
 
-export const CONDITION_TYPES: Condition["condition"][] = [
-  "device",
-  "and",
-  "or",
-  "not",
-  "state",
-  "numeric_state",
-  "sun",
-  "template",
-  "time",
-  "trigger",
-  "zone",
-];
+export const CONDITION_TYPES = {
+  device: mdiDevices,
+  and: mdiAmpersand,
+  or: mdiGateOr,
+  not: mdiCancel,
+  state: mdiStateMachine,
+  numeric_state: mdiNumeric,
+  sun: mdiWeatherSunny,
+  template: mdiCodeBraces,
+  time: mdiClockOutline,
+  trigger: mdiExclamation,
+  zone: mdiMapMarkerRadius,
+};
diff --git a/src/data/trigger.ts b/src/data/trigger.ts
index 6f2d5e1271..c6b3e0a77c 100644
--- a/src/data/trigger.ts
+++ b/src/data/trigger.ts
@@ -1,19 +1,35 @@
-import type { Trigger } from "./automation";
+import {
+  mdiAvTimer,
+  mdiCalendar,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiExclamation,
+  mdiHomeAssistant,
+  mdiMapMarker,
+  mdiMapMarkerRadius,
+  mdiNfcVariant,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiSwapHorizontal,
+  mdiWeatherSunny,
+  mdiWebhook,
+} from "@mdi/js";
 
-export const TRIGGER_TYPES: Trigger["platform"][] = [
-  "calendar",
-  "device",
-  "event",
-  "state",
-  "geo_location",
-  "homeassistant",
-  "mqtt",
-  "numeric_state",
-  "sun",
-  "tag",
-  "template",
-  "time",
-  "time_pattern",
-  "webhook",
-  "zone",
-];
+export const TRIGGER_TYPES = {
+  calendar: mdiCalendar,
+  device: mdiDevices,
+  event: mdiExclamation,
+  state: mdiStateMachine,
+  geo_location: mdiMapMarker,
+  homeassistant: mdiHomeAssistant,
+  mqtt: mdiSwapHorizontal,
+  numeric_state: mdiNumeric,
+  sun: mdiWeatherSunny,
+  tag: mdiNfcVariant,
+  template: mdiCodeBraces,
+  time: mdiClockOutline,
+  time_pattern: mdiAvTimer,
+  webhook: mdiWebhook,
+  zone: mdiMapMarkerRadius,
+};
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index 8c7daedb86..9f72db5417 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -51,7 +51,7 @@ const getType = (action: Action | undefined) => {
   if (["and", "or", "not"].some((key) => key in action)) {
     return "condition";
   }
-  return ACTION_TYPES.find((option) => option in action);
+  return Object.keys(ACTION_TYPES).find((option) => option in action);
 };
 
 declare global {
diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
index c6c7fe3eec..b34d814cdf 100644
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -73,8 +73,10 @@ export default class HaAutomationAction extends LitElement {
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </mwc-button>
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+          ([opt, label, icon]) => html`
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-button-menu>
@@ -104,9 +106,7 @@ export default class HaAutomationAction extends LitElement {
   }
 
   private _addAction(ev: CustomEvent<ActionDetail>) {
-    const action = (ev.currentTarget as HaSelect).items[ev.detail.index]
-      .value as typeof ACTION_TYPES[number];
-
+    const action = (ev.currentTarget as HaSelect).items[ev.detail.index].value;
     const elClass = customElements.get(
       `ha-automation-action-${action}`
     ) as CustomElementConstructor & { defaultConfig: Action };
@@ -158,16 +158,19 @@ export default class HaAutomationAction extends LitElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
-      ACTION_TYPES.map(
-        (action) =>
-          [
-            action,
-            localize(
-              `ui.panel.config.automation.editor.actions.type.${action}.label`
-            ),
-          ] as [string, string]
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+    (localize: LocalizeFunc): [string, string, string][] =>
+      Object.entries(ACTION_TYPES)
+        .map(
+          ([action, icon]) =>
+            [
+              action,
+              localize(
+                `ui.panel.config.automation.editor.actions.type.${action}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   static get styles(): CSSResultGroup {
diff --git a/src/panels/config/automation/action/types/ha-automation-action-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts
index 23048b0983..da577f91f1 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts
@@ -34,8 +34,10 @@ export class HaConditionAction extends LitElement implements ActionElement {
         @selected=${this._typeChanged}
       >
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+          ([opt, label, icon]) => html`
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-select>
@@ -48,16 +50,19 @@ export class HaConditionAction extends LitElement implements ActionElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
-      CONDITION_TYPES.map(
-        (condition) =>
-          [
-            condition,
-            localize(
-              `ui.panel.config.automation.editor.conditions.type.${condition}.label`
-            ),
-          ] as [string, string]
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+    (localize: LocalizeFunc): [string, string, string][] =>
+      Object.entries(CONDITION_TYPES)
+        .map(
+          ([condition, icon]) =>
+            [
+              condition,
+              localize(
+                `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   private _conditionChanged(ev: CustomEvent) {
diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
index b8b62a7d14..52ce971bbc 100644
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -103,8 +103,10 @@ export default class HaAutomationCondition extends LitElement {
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </mwc-button>
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+          ([opt, label, icon]) => html`
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-button-menu>
@@ -165,16 +167,19 @@ export default class HaAutomationCondition extends LitElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
-      CONDITION_TYPES.map(
-        (condition) =>
-          [
-            condition,
-            localize(
-              `ui.panel.config.automation.editor.conditions.type.${condition}.label`
-            ),
-          ] as [string, string]
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+    (localize: LocalizeFunc): [string, string, string][] =>
+      Object.entries(CONDITION_TYPES)
+        .map(
+          ([condition, icon]) =>
+            [
+              condition,
+              localize(
+                `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   static get styles(): CSSResultGroup {
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts
index d961c96b10..7ba92d87c2 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -69,8 +69,10 @@ export default class HaAutomationTrigger extends LitElement {
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </mwc-button>
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+          ([opt, label, icon]) => html`
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-button-menu>
@@ -145,16 +147,19 @@ export default class HaAutomationTrigger extends LitElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
-      TRIGGER_TYPES.map(
-        (action) =>
-          [
-            action,
-            localize(
-              `ui.panel.config.automation.editor.triggers.type.${action}.label`
-            ),
-          ] as [string, string]
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+    (localize: LocalizeFunc): [string, string, string][] =>
+      Object.entries(TRIGGER_TYPES)
+        .map(
+          ([action, icon]) =>
+            [
+              action,
+              localize(
+                `ui.panel.config.automation.editor.triggers.type.${action}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   static get styles(): CSSResultGroup {