diff --git a/src/components/quicklaunch.jsx b/src/components/quicklaunch.jsx
index 077e6c5c..1836e9b7 100644
--- a/src/components/quicklaunch.jsx
+++ b/src/components/quicklaunch.jsx
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { useEffect, useState, useRef, useCallback, useContext } from "react";
 import classNames from "classnames";
 
-import { resolveIcon } from "./services/item";
+import ResolvedIcon from "./resolvedicon";
 
 import { SettingsContext } from "utils/contexts/settings";
 
@@ -135,7 +135,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
                     )} onClick={handleItemClick}>
                     <div className="flex flex-row items-center mr-4 pointer-events-none">
                       <div className="w-5 text-xs mr-4">
-                        {r.icon && resolveIcon(r.icon)}
+                        {r.icon && <ResolvedIcon icon={r.icon} />}
                         {r.abbr && r.abbr}
                       </div>
                       <div className="flex flex-col md:flex-row text-left items-baseline mr-4 pointer-events-none">
diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx
new file mode 100644
index 00000000..d5aa8c88
--- /dev/null
+++ b/src/components/resolvedicon.jsx
@@ -0,0 +1,35 @@
+import Image from "next/future/image";
+
+export default function ResolvedIcon({ icon }) {
+  // direct or relative URLs
+  if (icon.startsWith("http") || icon.startsWith("/")) {
+    return <Image src={`${icon}`} width={32} height={32} alt="logo" />;
+  }
+
+  // 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`,
+        }}
+      />
+    );
+  }
+
+  // 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"
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 2220f9df..13b745fd 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -1,8 +1,7 @@
-import Image from "next/future/image";
 import classNames from "classnames";
 
 import List from "components/services/list";
-import resolveIcon from "utils/icon-resolver";
+import ResolvedIcon from "components/resolvedicon";
 
 export default function ServicesGroup({ services, layout }) {
   return (
@@ -14,11 +13,12 @@ export default function ServicesGroup({ services, layout }) {
       )}
     >
       <div className="flex select-none items-center">
-      {layout?.icon &&
-        <Image src={resolveIcon(layout.icon)} width={32} height={32} alt="logo" className="flex-shrink-0 mr-2 w-7 h-7"/>
-      }
-        <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}
-        </h2>
+        {layout?.icon &&
+          <div className="flex-shrink-0 mr-2 w-7 h-7">
+            <ResolvedIcon icon={layout.icon} />
+          </div>
+        }
+        <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
       </div>
       <List services={services.services} layout={layout} />
     </div>
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index fc1ef9a4..56ed2b4b 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -6,7 +6,7 @@ import Widget from "./widget";
 
 import Docker from "widgets/docker/component";
 import { SettingsContext } from "utils/contexts/settings";
-import resolveIcon from "utils/icon-resolver";
+import ResolvedIcon from "components/resolvedicon";
 
 export default function Item({ service }) {
   const hasLink = service.href && service.href !== "#";
@@ -41,10 +41,12 @@ export default function Item({ service }) {
                 rel="noreferrer"
                 className="flex-shrink-0 flex items-center justify-center w-12 "
               >
-                {resolveIcon(service.icon)}
+                <ResolvedIcon icon={service.icon} />
               </a>
             ) : (
-              <div className="flex-shrink-0 flex items-center justify-center w-12 ">{resolveIcon(service.icon)}</div>
+              <div className="flex-shrink-0 flex items-center justify-center w-12 ">
+                <ResolvedIcon icon={service.icon} />
+              </div>
             ))}
 
           {hasLink ? (
diff --git a/src/utils/icon-resolver.js b/src/utils/icon-resolver.js
deleted file mode 100644
index c88fae09..00000000
--- a/src/utils/icon-resolver.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function resolveIcon(icon) {
-    if (icon.startsWith("http")) {
-        return `/api/proxy?url=${encodeURIComponent(icon)}`;
-    }
-
-    if (icon.startsWith("/")) {
-        return icon;
-    }
-
-    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`;
-}
\ No newline at end of file