diff --git a/web/components/menu-item.react.js b/web/components/menu-item.react.js
index d979d9e36..b6716ffb0 100644
--- a/web/components/menu-item.react.js
+++ b/web/components/menu-item.react.js
@@ -1,40 +1,51 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import SWMansionIcon, {
   type Icon,
 } from 'lib/components/SWMansionIcon.react.js';
 
 import Button from './button.react.js';
 import css from './menu.css';
 
-type MenuItemProps = {
+type MenuItemPropsBase = {
   +onClick?: () => mixed,
-  +icon: Icon,
   +text: string,
   +dangerous?: boolean,
 };
+type MenuItemProps =
+  | {
+      ...MenuItemPropsBase,
+      +icon: Icon,
+    }
+  | {
+      ...MenuItemPropsBase,
+      +iconComponent: React.Node,
+    };
 
 function MenuItem(props: MenuItemProps): React.Node {
-  const { onClick, icon, text, dangerous } = props;
+  const { onClick, icon, iconComponent, text, dangerous } = props;
 
   const itemClasses = classNames(css.menuAction, {
     [css.menuActionDangerous]: dangerous,
   });
 
+  let menuItemIcon = iconComponent;
+  if (icon) {
+    menuItemIcon = <SWMansionIcon size="100%" icon={icon} />;
+  }
+
   return (
     <Button className={itemClasses} onClick={onClick}>
-      <div className={css.menuActionIcon}>
-        <SWMansionIcon size="100%" icon={icon} />
-      </div>
+      <div className={css.menuActionIcon}>{menuItemIcon}</div>
       <div>{text}</div>
     </Button>
   );
 }
 
 const MemoizedMenuItem: React.ComponentType<MenuItemProps> =
   React.memo(MenuItem);
 
 export default MemoizedMenuItem;
diff --git a/web/components/menu.css b/web/components/menu.css
index 3b5688b89..86efe8986 100644
--- a/web/components/menu.css
+++ b/web/components/menu.css
@@ -1,81 +1,87 @@
 button.menuButton {
   background-color: transparent;
   border: none;
   cursor: pointer;
   color: inherit;
 }
 
 div.menuActionList {
   position: absolute;
   z-index: 4;
   display: flex;
   flex-direction: column;
   background-color: var(--menu-bg);
   color: var(--menu-color);
+  stroke: var(--menu-color);
   border-radius: 4px;
   padding: 4px 0;
   line-height: var(--line-height-text);
   min-width: max-content;
 }
 
 div.menuActionListThreadActions {
   font-size: var(--m-font-16);
   top: 40px;
   right: -20px;
 }
 
 div.menuActionListMemberActions {
   font-size: var(--xs-font-12);
   background-color: var(--menu-bg-light);
   color: var(--menu-color-light);
+  stroke: var(--menu-color-light);
   top: 0;
   right: 5px;
 }
 
 div.menuActionListCommunityActions {
   font-size: var(--m-font-16);
   background-color: var(--menu-bg-light);
   color: var(--menu-color);
+  stroke: var(--menu-color);
   top: 24px;
 }
 
 button.menuAction {
   color: inherit;
   z-index: 1;
   padding: 12px 16px;
   line-height: 1.5;
   font-size: inherit;
   justify-content: start;
 }
 
 button.menuAction:hover {
   color: var(--menu-color-hover);
+  stroke: var(--menu-color-hover);
 }
 
 div.menuActionIcon {
   display: flex;
   justify-content: center;
   margin-right: 8px;
   height: 24px;
   width: 24px;
 }
 
 div.menuActionListMemberActions div.menuActionIcon {
   height: 18px;
   width: 18px;
 }
 
 button.menuActionDangerous {
   color: var(--menu-color-dangerous);
+  stroke: var(--menu-color-dangerous);
 }
 button.menuActionDangerous:hover {
   color: var(--menu-color-dangerous-hover);
+  stroke: var(--menu-color-dangerous-hover);
 }
 
 hr.separator {
   height: 1px;
   background: var(--menu-separator-color);
   margin: 10px 16px;
   max-width: 130px;
   border: none;
 }