diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js
--- a/web/avatars/edit-user-avatar-menu.react.js
+++ b/web/avatars/edit-user-avatar-menu.react.js
@@ -4,9 +4,11 @@
 import * as React from 'react';
 
 import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 
 import css from './edit-user-avatar-menu.css';
+import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
 
@@ -22,13 +24,26 @@
 
   const { setUserAvatar } = editUserAvatarContext;
 
+  const modalContext = useModalContext();
+
+  const openEmojiSelectionModal = React.useCallback(() => {
+    modalContext.pushModal(<EmojiAvatarSelectionModal />);
+  }, [modalContext]);
+
   const removeUserAvatar = React.useCallback(() => {
     setUserAvatar({ type: 'remove' });
   }, [setUserAvatar]);
 
   const emojiMenuItem = React.useMemo(
-    () => <MenuItem key="emoji" text="Select emoji" icon="emote-smile" />,
-    [],
+    () => (
+      <MenuItem
+        key="emoji"
+        text="Select emoji"
+        icon="emote-smile"
+        onClick={openEmojiSelectionModal}
+      />
+    ),
+    [openEmojiSelectionModal],
   );
   const imageMenuItem = React.useMemo(
     () => <MenuItem key="image" text="Select image" icon="image-1" />,
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -0,0 +1,20 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import Modal from '../modals/modal.react.js';
+
+function EmojiAvatarSelectionModal(): React.Node {
+  const modalContext = useModalContext();
+  return (
+    <Modal
+      name="Emoji avatar selection"
+      size="large"
+      onClose={modalContext.popModal}
+    ></Modal>
+  );
+}
+
+export default EmojiAvatarSelectionModal;