diff --git a/public/css/hud.css b/public/css/hud.css
index a309dd8..2ca23dd 100644
--- a/public/css/hud.css
+++ b/public/css/hud.css
@@ -253,6 +253,42 @@
   display: block;
 }
 
+/* Holz – Bild aus der Datenbank */
+.hud-res-icon-wood {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hud-res-icon-wood img {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
+  display: block;
+}
+
+/* Stein – Bild aus der Datenbank */
+.hud-res-icon-stone {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hud-res-icon-stone img {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
+  display: block;
+}
+
 /* Goldmünze – Bild aus der Datenbank */
 .hud-res-icon-gold {
   width: 28px;
diff --git a/public/css/mine.css b/public/css/mine.css
index 26982cd..3480484 100644
--- a/public/css/mine.css
+++ b/public/css/mine.css
@@ -121,6 +121,42 @@
   display: block;
 }
 
+/* Holz – Bild aus der Datenbank */
+.mine-resource-icon-wood {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mine-resource-icon-wood img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
+  display: block;
+}
+
+/* Stein – Bild aus der Datenbank */
+.mine-resource-icon-stone {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mine-resource-icon-stone img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
+  display: block;
+}
+
 /* Goldmünze – Bild aus der Datenbank */
 .mine-resource-icon-gold {
   width: 48px;
diff --git a/public/images/items/holz.png b/public/images/items/holz.png
new file mode 100644
index 0000000..c8b93d2
Binary files /dev/null and b/public/images/items/holz.png differ
diff --git a/public/images/items/stein.png b/public/images/items/stein.png
new file mode 100644
index 0000000..b3360d4
Binary files /dev/null and b/public/images/items/stein.png differ
diff --git a/public/js/buildings/mine.js b/public/js/buildings/mine.js
index cab6508..fb485a5 100644
--- a/public/js/buildings/mine.js
+++ b/public/js/buildings/mine.js
@@ -185,11 +185,23 @@ function resourceIcon(resource) {
       "</span>"
     );
   }
+  if (resource === "wood") {
+    return (
+      "<span class='mine-resource-icon-wood'>" +
+      "<img src='/images/items/holz.png' alt=''>" +
+      "</span>"
+    );
+  }
+  if (resource === "stone") {
+    return (
+      "<span class='mine-resource-icon-stone'>" +
+      "<img src='/images/items/stein.png' alt=''>" +
+      "</span>"
+    );
+  }
   const map = {
     copper: "🟤",
     silver: "⚪",
-    stone: "🪨",
-    wood: "🪵",
   };
   return map[resource] || "📦";
 }
diff --git a/views/launcher.ejs b/views/launcher.ejs
index ef7fd87..04828f1 100644
--- a/views/launcher.ejs
+++ b/views/launcher.ejs
@@ -344,12 +344,16 @@
 
         <div class="hud-res-row">
           <div class="hud-res">
-            <span class="hud-res-icon">🪵</span>
+            <div class="hud-res-icon-wood">
+              <img src="/images/items/holz.png" alt="" onerror="this.style.display='none';this.parentElement.insertAdjacentText('beforeend','🪵')">
+            </div>
             <span class="hud-res-value" id="hud-wood">0</span>
           </div>
           <div class="hud-sep"></div>
           <div class="hud-res">
-            <span class="hud-res-icon">🪨</span>
+            <div class="hud-res-icon-stone">
+              <img src="/images/items/stein.png" alt="" onerror="this.style.display='none';this.parentElement.insertAdjacentText('beforeend','🪨')">
+            </div>
             <span class="hud-res-value" id="hud-stone">0</span>
           </div>
           <div class="hud-sep"></div>