diff --git a/packages/ui/src/components/icon.css b/packages/ui/src/components/icon.css
index 14a52bc83..a2ebee30b 100644
--- a/packages/ui/src/components/icon.css
+++ b/packages/ui/src/components/icon.css
@@ -17,6 +17,11 @@
     height: 20px;
   }
 
+  &[data-size="medium"] {
+    width: 24px;
+    height: 24px;
+  }
+
   &[data-size="large"] {
     width: 24px;
     height: 24px;
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 817f7fd6a..00f1f8add 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -73,7 +73,7 @@ const icons = {
 
 export interface IconProps extends ComponentProps<"svg"> {
   name: keyof typeof icons
-  size?: "small" | "normal" | "large"
+  size?: "small" | "normal" | "medium" | "large"
 }
 
 export function Icon(props: IconProps) {