diff --git a/src/ui/common/assets/three-dots.svg b/src/ui/common/assets/three-dots-black.svg
similarity index 95%
rename from src/ui/common/assets/three-dots.svg
rename to src/ui/common/assets/three-dots-black.svg
index 16dabb8c6..297bed51d 100644
--- a/src/ui/common/assets/three-dots.svg
+++ b/src/ui/common/assets/three-dots-black.svg
@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
         d="M4.99967 8.33203C4.08301 8.33203 3.33301 9.08203 3.33301 9.9987C3.33301 10.9154 4.08301 11.6654 4.99967 11.6654C5.91634 11.6654 6.66634 10.9154 6.66634 9.9987C6.66634 9.08203 5.91634 8.33203 4.99967 8.33203ZM14.9997 8.33203C14.083 8.33203 13.333 9.08203 13.333 9.9987C13.333 10.9154 14.083 11.6654 14.9997 11.6654C15.9163 11.6654 16.6663 10.9154 16.6663 9.9987C16.6663 9.08203 15.9163 8.33203 14.9997 8.33203ZM9.99967 8.33203C9.08301 8.33203 8.33301 9.08203 8.33301 9.9987C8.33301 10.9154 9.08301 11.6654 9.99967 11.6654C10.9163 11.6654 11.6663 10.9154 11.6663 9.9987C11.6663 9.08203 10.9163 8.33203 9.99967 8.33203Z"
-        fill="white" />
-</svg>
\ No newline at end of file
+        fill="#000000" />
+</svg>
diff --git a/src/ui/common/components/Icons/common/ThreeDotsMenuIcon.tsx b/src/ui/common/components/Icons/common/ThreeDotsMenuIcon.tsx
new file mode 100644
index 000000000..482535683
--- /dev/null
+++ b/src/ui/common/components/Icons/common/ThreeDotsMenuIcon.tsx
@@ -0,0 +1,39 @@
+import { iconColorVariants } from "@babylonlabs-io/core-ui";
+import { twJoin } from "tailwind-merge";
+
+interface ThreeDotsMenuIconProps {
+  className?: string;
+  size?: number;
+  /** Same variants supported by other icons */
+  variant?: keyof typeof iconColorVariants;
+  /** Tailwind className to force a color */
+  color?: string;
+}
+
+export const ThreeDotsMenuIcon = ({
+  className = "",
+  size = 20,
+  variant = "default",
+  color,
+}: ThreeDotsMenuIconProps) => {
+  const colorClass = color || iconColorVariants[variant];
+
+  return (
+    <svg
+      style={{ width: size, height: size }}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twJoin(
+        "transition-opacity duration-200",
+        colorClass,
+        className,
+      )}
+    >
+      <path
+        d="M4.99967 8.33203C4.08301 8.33203 3.33301 9.08203 3.33301 9.9987C3.33301 10.9154 4.08301 11.6654 4.99967 11.6654C5.91634 11.6654 6.66634 10.9154 6.66634 9.9987C6.66634 9.08203 5.91634 8.33203 4.99967 8.33203ZM14.9997 8.33203C14.083 8.33203 13.333 9.08203 13.333 9.9987C13.333 10.9154 14.083 11.6654 14.9997 11.6654C15.9163 11.6654 16.6663 10.9154 16.6663 9.9987C16.6663 9.08203 15.9163 8.33203 14.9997 8.33203ZM9.99967 8.33203C9.08301 8.33203 8.33301 9.08203 8.33301 9.9987C8.33301 10.9154 9.08301 11.6654 9.99967 11.6654C10.9163 11.6654 11.6663 10.9154 11.6663 9.9987C11.6663 9.08203 10.9163 8.33203 9.99967 8.33203Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx b/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
index 490ef2d3a..e105a622f 100644
--- a/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -1,7 +1,7 @@
 import { Popover, Text } from "@babylonlabs-io/core-ui";
 import { useState } from "react";
 
-import threeDots from "@/ui/common/assets/three-dots.svg";
+import { ThreeDotsMenuIcon } from "@/ui/common/components/Icons/common/ThreeDotsMenuIcon";
 
 interface ThreeDotsMenuProps {
   onChange: () => void;
@@ -25,7 +25,10 @@ export const ThreeDotsMenu = ({
         className={className}
         aria-label="Open options"
       >
-        <img src={threeDots} alt="options" width={20} height={20} />
+        <ThreeDotsMenuIcon
+          size={20}
+          className="text-accent-primary dark:text-white"
+        />
       </button>
 
       <Popover