diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css
index 27b5ef4e..26e5b02e 100644
--- a/apps/docs/src/css/custom.css
+++ b/apps/docs/src/css/custom.css
@@ -211,6 +211,15 @@ html[data-theme='dark'] .docsearch-btn:hover {
   background-color: rgba(69, 23, 27, 0.4);
 }
 
+/* Black/white icon theme colors */
+.mono-icon {
+  fill: #000000; /* Black for light mode */
+}
+
+[data-theme='dark'] .mono-icon {
+  fill: #ffffff; /* White for dark mode */
+}
+
 @layer utilities {
   .clip {
     clip-path: inset(0);
diff --git a/apps/docs/src/theme/Icon/Clickhouse/index.tsx b/apps/docs/src/theme/Icon/Clickhouse/index.tsx
index 43f6396b..e4405ea2 100644
--- a/apps/docs/src/theme/Icon/Clickhouse/index.tsx
+++ b/apps/docs/src/theme/Icon/Clickhouse/index.tsx
@@ -4,17 +4,15 @@ import clsx from 'clsx';
 import React from 'react';
 
 const IconClickhouse = (props: IconProps) => {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === 'dark';
   return (
     <svg
       width={props.width || 20}
       height={props.height || 20}
       viewBox="0 0 150 150"
-      fill={isDark ? '#ffffff' : '#161616'}
+      fill="#000000"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
-      className={clsx('text-ui-fg-subtle', props.className)}
+      className={clsx('mono-icon', props.className)}
     >
         <path d="M27,25.7c0-.6.5-1.2,1.2-1.2h8.8c.6,0,1.2.5,1.2,1.2v97.7c0,.6-.5,1.2-1.2,1.2h-8.8c-.6,0-1.2-.5-1.2-1.2V25.7Z"/>
         <path d="M49.2,25.7c0-.6.5-1.2,1.2-1.2h8.8c.6,0,1.2.5,1.2,1.2v97.7c0,.6-.5,1.2-1.2,1.2h-8.8c-.6,0-1.2-.5-1.2-1.2V25.7Z"/>
diff --git a/apps/docs/src/theme/Icon/Kafka/index.tsx b/apps/docs/src/theme/Icon/Kafka/index.tsx
index 2522aea1..8cc20611 100644
--- a/apps/docs/src/theme/Icon/Kafka/index.tsx
+++ b/apps/docs/src/theme/Icon/Kafka/index.tsx
@@ -1,23 +1,20 @@
 import { IconProps } from '@medusajs/icons/dist/types';
-import { useColorMode } from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import React from 'react';
 
 const IconKafka = (props: IconProps) => {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === 'dark';
   return (
     <svg
         width={props.width || 20}
         height={props.height || 20}
         viewBox="0 0 256 416"
-        fill={isDark ? '#ccc' : '#231f20'}
+        fill="#000000"
         xmlns="http://www.w3.org/2000/svg"
         {...props}
-        className={clsx('text-ui-fg-subtle', props.className)}>
-        <path d="M201.816 230.216c-16.186 0-30.697 7.171-40.634 18.461l-25.463-18.026c2.703-7.442 4.255-15.433 4.255-23.797 0-8.219-1.498-16.076-4.112-23.408l25.406-17.835c9.936 11.233 24.409 18.365 40.548 18.365 29.875 0 54.184-24.305 54.184-54.184 0-29.879-24.309-54.184-54.184-54.184-29.875 0-54.184 24.305-54.184 54.184 0 5.348.808 10.505 2.258 15.389l-25.423 17.844c-10.62-13.175-25.911-22.374-43.333-25.182v-30.64c24.544-5.155 43.037-26.962 43.037-53.019C124.171 24.305 99.862 0 69.987 0 40.112 0 15.803 24.305 15.803 54.184c0 25.708 18.014 47.246 42.067 52.769v31.038C25.044 143.753 0 172.401 0 206.854c0 34.621 25.292 63.374 58.355 68.94v32.774c-24.299 5.341-42.552 27.011-42.552 52.894 0 29.879 24.309 54.184 54.184 54.184 29.875 0 54.184-24.305 54.184-54.184 0-25.883-18.253-47.553-42.552-52.894v-32.775a69.965 69.965 0 0 0 42.6-24.776l25.633 18.143c-1.423 4.84-2.22 9.946-2.22 15.24 0 29.879 24.309 54.184 54.184 54.184 29.875 0 54.184-24.305 54.184-54.184 0-29.879-24.309-54.184-54.184-54.184zm0-126.695c14.487 0 26.27 11.788 26.27 26.271s-11.783 26.27-26.27 26.27-26.27-11.787-26.27-26.27c0-14.483 11.783-26.271 26.27-26.271zm-158.1-49.337c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27zm52.541 307.278c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27zm-26.272-117.97c-20.205 0-36.642-16.434-36.642-36.638 0-20.205 16.437-36.642 36.642-36.642 20.204 0 36.641 16.437 36.641 36.642 0 20.204-16.437 36.638-36.641 36.638zm131.831 67.179c-14.487 0-26.27-11.788-26.27-26.271s11.783-26.27 26.27-26.27 26.27 11.787 26.27 26.27c0 14.483-11.783 26.271-26.27 26.271z"/>
+        className={clsx('mono-icon', props.className)}>
+        <path d="M201.816 230.216c-16.186 0-30.697 7.171-40.634 18.461l-25.463-18.026c2.703-7.442 4.255-15.433 4.255-23.797 0-8.219-1.498-16.076-4.112-23.408l25.406-17.835c9.936 11.233 24.409 18.365 40.548 18.365 29.875 0 54.184-24.305 54.184-54.184 0-29.879-24.309-54.184-54.184-54.184-29.875 0-54.184 24.305-54.184 54.184 0 5.348.808 10.505 2.258 15.389l-25.423 17.844c-10.62-13.175-25.911-22.374-43.333-25.182v-30.64c24.544-5.155 43.037-26.962 43.037-53.019C124.171 24.305 99.862 0 69.987 0 40.112 0 15.803 24.305 15.803 54.184c0 25.708 18.014 47.246 42.067 52.769v31.038C25.044 143.753 0 172.401 0 206.854c0 34.621 25.292 63.374 58.355 68.94v32.774c-24.299 5.341-42.552 27.011-42.552 52.894 0 29.879 24.309 54.184 54.184 54.184 29.875 0 54.184-24.305 54.184-54.184 0-25.883-18.253-47.553-42.552-52.894v-32.775a69.965 69.965 0 0 0 42.6-24.776l25.633 18.143c-1.423 4.84-2.22 9.946-2.22 15.24 0 29.879 24.309 54.184 54.184 54.184 29.875 0 54.184-24.305 54.184-54.184 0-29.879-24.309-54.184-54.184-54.184zm0-126.695c14.487 0 26.27 11.788 26.27 26.271s-11.783 26.27-26.27 26.27-26.27-11.787-26.27-26.27c0-14.483 11.783-26.271 26.27-26.271zm-158.1-49.337c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27zm52.541 307.278c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27zm-26.272-117.97c-20.205 0-36.642-16.434-36.642-36.638 0-20.205 16.437-36.642 36.642-36.642 20.204 0 36.641 16.437 36.641 36.642 0 20.204-16.437 36.638-36.641 36.638zm131.831 67.179c-14.487 0-26.27-11.788-26.27-26.271s11.783-26.27 26.27-26.27 26.27 11.787 26.27 26.270c0 14.483-11.783 26.271-26.27 26.271z"/>
     </svg>
   );
 };
 
-export default IconKafka;
+export default IconKafka;
\ No newline at end of file