diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/PluginMenuItem.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/PluginMenuItem.tsx
index 8629aa3311fed..d28df1dff2342 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/PluginMenuItem.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/PluginMenuItem.tsx
@@ -23,20 +23,30 @@ import { RiArchiveStackLine } from "react-icons/ri";
 import { Link as RouterLink } from "react-router-dom";
 
 import type { ExternalViewResponse } from "openapi/requests/types.gen";
+import { useColorMode } from "src/context/colorMode";
 import type { NavItemResponse } from "src/utils/types";
 
 import { NavButton } from "./NavButton";
 
 type Props = { readonly topLevel?: boolean } & NavItemResponse;
 
-export const PluginMenuItem = ({ icon, name, topLevel = false, url_route: urlRoute, ...rest }: Props) => {
+export const PluginMenuItem = ({
+  icon,
+  icon_dark_mode: iconDarkMode,
+  name,
+  topLevel = false,
+  url_route: urlRoute,
+  ...rest
+}: Props) => {
   // Determine if this is an external view or react app based on the presence of href
+  const { colorMode } = useColorMode();
   const isExternalView = "href" in rest;
   const href = isExternalView ? (rest as ExternalViewResponse).href : undefined;
 
+  const displayIcon = colorMode === "dark" && typeof iconDarkMode === "string" ? iconDarkMode : icon;
   const pluginIcon =
-    typeof icon === "string" ? (
-      <Image height="1.25rem" mr={topLevel ? 0 : 2} src={icon} width="1.25rem" />
+    typeof displayIcon === "string" ? (
+      <Image height="1.25rem" mr={topLevel ? 0 : 2} src={displayIcon} width="1.25rem" />
     ) : urlRoute === "legacy-fab-views" ? (
       <RiArchiveStackLine size="1.25rem" style={{ marginRight: topLevel ? 0 : "8px" }} />
     ) : (