diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx
index fa9fa68d9..6e28ee249 100644
--- a/src/components/resolvedicon.jsx
+++ b/src/components/resolvedicon.jsx
@@ -33,11 +33,22 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
   }
 
   // check mdi- or si- prefixed icons
-  const prefix = icon.split("-")[0]
+  const prefix = icon.split("-")[0];
 
   if (prefix in iconSetURLs) {
-    // get icon source
-    const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
+    // default to theme setting
+    let iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
+    let iconColor = settings.iconStyle === "theme" ?
+      `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
+      "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
+
+    // use custom hex color if provided
+    const colorMatches = icon.match(/[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]$/i)
+    if (colorMatches?.length) {
+      iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${colorMatches[0]}`, "");
+      iconColor = `${colorMatches[0]}`;
+    }
+
     const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
 
     return (
@@ -47,16 +58,13 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
           height,
           maxWidth: '100%',
           maxHeight: '100%',
-          background: settings.iconStyle === "theme" ?
-            `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
-            "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
+          background: `${iconColor}`,
           mask: `url(${iconSource}) no-repeat center / contain`,
           WebkitMask: `url(${iconSource}) no-repeat center / contain`,
         }}
       />
     );
   }
-
  
   // fallback to dashboard-icons
   if (icon.endsWith(".svg")) {