diff --git a/app/soapbox/features/emoji/emoji_picker.tsx b/app/soapbox/features/emoji/components/emoji_picker.tsx
similarity index 95%
rename from app/soapbox/features/emoji/emoji_picker.tsx
rename to app/soapbox/features/emoji/components/emoji_picker.tsx
index 82e3d6ef5..5a2ea2219 100644
--- a/app/soapbox/features/emoji/emoji_picker.tsx
+++ b/app/soapbox/features/emoji/components/emoji_picker.tsx
@@ -1,7 +1,7 @@
 import { Picker as EmojiPicker, PickerProps } from 'emoji-mart';
 import React, { useRef, useEffect } from 'react';
 
-import data from './data';
+import data from '../data';
 
 const getSpritesheetURL = (set: string) => {
   return '/packs/images/32.png';
diff --git a/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx b/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
index b09945f4e..31970bc43 100644
--- a/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
+++ b/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
@@ -67,6 +67,7 @@ interface IEmojiPickerDropdown {
   onPickEmoji: (emoji: Emoji) => void,
   onSkinTone: () => void,
   condensed: boolean,
+  render: any,
 }
 
 // Fixes render bug where popover has a delayed position update
@@ -90,7 +91,7 @@ const RenderAfter = ({ children, update }: any) => {
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, frequentlyUsedEmojis, onPickEmoji, onSkinTone, condensed }) => {
+const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, frequentlyUsedEmojis, onPickEmoji, onSkinTone, condensed, render: Render }) => {
   const intl = useIntl();
   const settings = useSettings();
   const title = intl.formatMessage(messages.emoji);
@@ -204,27 +205,17 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
 
   return (
     <div className='relative' ref={setContainerElement}>
-      <IconButton
-        className={classNames({
-          'text-gray-400 hover:text-gray-600': true,
-          'pulse-loading': visible && loading,
-        })}
-        ref={setPopperReference}
-        src={require('@tabler/icons/mood-happy.svg')}
+      <Render
+        handleToggle={handleToggle}
+        visible={visible}
+        loading={loading}
         title={title}
-        aria-label={title}
-        aria-expanded={visible}
-        role='button'
-        onClick={handleToggle}
-        onKeyDown={handleToggle}
-        tabIndex={0}
+        setPopperReference={setPopperReference}
       />
 
       {createPortal(
         <div
-          className={classNames({
-            'z-1000': true,
-          })}
+          className={classNames({ 'z-1000': true })}
           ref={setPopperElement}
           style={style}
           {...attributes.popper}
diff --git a/app/soapbox/features/emoji/containers/emoji_picker_dropdown_container.js b/app/soapbox/features/emoji/containers/emoji_picker_dropdown_container.jsx
similarity index 68%
rename from app/soapbox/features/emoji/containers/emoji_picker_dropdown_container.js
rename to app/soapbox/features/emoji/containers/emoji_picker_dropdown_container.jsx
index ff8cbc32c..76a3c468f 100644
--- a/app/soapbox/features/emoji/containers/emoji_picker_dropdown_container.js
+++ b/app/soapbox/features/emoji/containers/emoji_picker_dropdown_container.jsx
@@ -1,7 +1,10 @@
+import React from 'react';
 import { Map as ImmutableMap } from 'immutable';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import classNames from 'classnames';
 
+import { IconButton } from 'soapbox/components/ui';
 import { useEmoji } from '../../../actions/emojis';
 import { getSettings, changeSetting } from '../../../actions/settings';
 import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
@@ -81,4 +84,35 @@ const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
   },
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);
+const Container = connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);
+
+const EmojiPickerDropdownWrapper = (props) => {
+  return (
+    <Container
+      render={
+        ({ setPopperReference, title, visible, loading, handleToggle }) => (
+          <IconButton
+            className={classNames({
+              'text-gray-400 hover:text-gray-600': true,
+              'pulse-loading': visible && loading,
+            })}
+            ref={setPopperReference}
+            src={require('@tabler/icons/mood-happy.svg')}
+            title={title}
+            aria-label={title}
+            aria-expanded={visible}
+            role='button'
+            onClick={handleToggle}
+            onKeyDown={handleToggle}
+            tabIndex={0}
+          />
+        )
+      }
+
+      {...props}
+    />
+  );
+};
+
+
+export default EmojiPickerDropdownWrapper;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index a6379b130..2d4151796 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -1,5 +1,5 @@
 export function EmojiPicker() {
-  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/emoji_picker');
+  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/components/emoji_picker');
 }
 
 export function Notifications() {