diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx
index ebc62bd651..e894a49b00 100644
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -11,7 +11,6 @@ import { connect } from 'react-redux';
 
 import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg';
 import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
-import EmojiReactionIcon from '@/material-icons/400-24px/mood.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
@@ -166,8 +165,6 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   };
 
-  handleEmojiPickInnerButton = () => {};
-
   handleReblogClick = e => {
     const { signedIn } = this.props.identity;
 
@@ -485,9 +482,7 @@ class StatusActionBar extends ImmutablePureComponent {
     const denyFromAll = emojiReactionPolicy !== 'block' && emojiReactionPolicy !== 'block';
     const emojiPickerDropdown = (enableEmojiReaction && emojiReactionAvailableServer && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
       <div className='status__action-bar__button-wrapper'>
-        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={(
-          <IconButton icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} />
-        )} />
+        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} inverted={false} />
       </div>
     )) || (enableEmojiReaction && (
       <div className='status__action-bar__button-wrapper status__action-bar__button-wrapper__blank' />
diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
index 43795d030f..dac873c8e4 100644
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
@@ -325,6 +325,7 @@ class EmojiPickerDropdown extends PureComponent {
     onPickEmoji: PropTypes.func.isRequired,
     onSkinTone: PropTypes.func.isRequired,
     skinTone: PropTypes.number.isRequired,
+    inverted: PropTypes.bool,
   };
 
   state = {
@@ -387,7 +388,7 @@ class EmojiPickerDropdown extends PureComponent {
   };
 
   render () {
-    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
+    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis, inverted } = this.props;
     const title = intl.formatMessage(messages.emoji);
     const { active, loading, placement } = this.state;
 
@@ -399,7 +400,7 @@ class EmojiPickerDropdown extends PureComponent {
           active={active}
           iconComponent={MoodIcon}
           onClick={this.onToggle}
-          inverted
+          inverted={typeof(inverted) === 'undefined' || inverted}
         />
 
         <Overlay show={active} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx
index 7aaa809bd8..86aa4ba699 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/status/components/action_bar.jsx
@@ -11,7 +11,6 @@ import { connect } from 'react-redux';
 
 import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
 import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
-import EmojiReactionIcon from '@/material-icons/400-24px/mood.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
@@ -232,8 +231,6 @@ class ActionBar extends PureComponent {
     this.props.onEmojiReact(this.props.status, data);
   };
 
-  handleEmojiPickInnerButton = () => {};
-
   render () {
     const { status, relationship, intl } = this.props;
     const { signedIn, permissions } = this.props.identity;
@@ -401,9 +398,7 @@ class ActionBar extends PureComponent {
     const denyFromAll = emojiReactionPolicy !== 'block' && emojiReactionPolicy !== 'block';
     const emojiPickerDropdown = (enableEmojiReaction && emojiReactionAvailableServer && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
       <div className='detailed-status__button'>
-        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={(
-          <IconButton title={intl.formatMessage(messages.pickEmoji)} icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} />
-        )} />
+        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} inverted={false} />
       </div>
     )) || (enableEmojiReaction && (
       <div className='detailed-status__button__blank' />