diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 870eb4f4..ed0cef2d 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -9,19 +9,37 @@ import Docker from "widgets/docker/component";
 import { SettingsContext } from "utils/contexts/settings";
 
 function resolveIcon(icon) {
-  if (icon.startsWith("http")) {
-    return icon;
+  // direct or relative URLs
+  if (icon.startsWith("http") || icon.startsWith("/")) {
+    return <Image src={`${icon}`} width={32} height={32} alt="logo" />;
   }
 
-  if (icon.startsWith("/")) {
-    return icon;
+  // mdi- prefixed, material design icons
+  if (icon.startsWith("mdi-")) {
+    const iconName = icon.replace("mdi-", "").replace(".svg", "");
+    return (
+      <div
+        style={{
+          width: 32,
+          height: 32,
+          background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
+          mask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${iconName}.svg) no-repeat center / contain`,
+          WebkitMask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${iconName}.svg) no-repeat center / contain`,
+        }}
+      />
+    );
   }
 
-  if (icon.endsWith(".png")) {
-    return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
-  }
-
-  return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
+  // fallback to dashboard-icons
+  const iconName = icon.replace(".png", "");
+  return (
+    <Image
+      src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
+      width={32}
+      height={32}
+      alt="logo"
+    />
+  );
 }
 
 export default function Item({ service }) {
@@ -57,12 +75,10 @@ export default function Item({ service }) {
                 rel="noreferrer"
                 className="flex-shrink-0 flex items-center justify-center w-12 "
               >
-                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                {resolveIcon(service.icon)}
               </a>
             ) : (
-              <div className="flex-shrink-0 flex items-center justify-center w-12 ">
-                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
-              </div>
+              <div className="flex-shrink-0 flex items-center justify-center w-12 ">{resolveIcon(service.icon)}</div>
             ))}
 
           {hasLink ? (