diff --git a/app/assets/javascripts/custom_emoji/components/app.vue b/app/assets/javascripts/custom_emoji/components/app.vue
index 405a296397fe15a8cbc8073956876415801854d9..00b904fbea49bc037f5d92f25b2fade9e0dbb485 100644
--- a/app/assets/javascripts/custom_emoji/components/app.vue
+++ b/app/assets/javascripts/custom_emoji/components/app.vue
@@ -8,7 +8,7 @@ export default {};
       <h4 class="gl-mt-0">
         {{ __('Custom emoji') }}
       </h4>
-      <p>{{ __('Custom emoji will be available to use in every project in group.') }}</p>
+      <p>{{ __('Custom emoji will be available to use in every project in the group.') }}</p>
       <router-view />
     </div>
   </div>
diff --git a/app/assets/javascripts/emoji/awards_app/index.js b/app/assets/javascripts/emoji/awards_app/index.js
index f3d72c2dba5f24a17921d0c82622eed6400de615..8559f982bf421224616e41ed627e7a87f3267008 100644
--- a/app/assets/javascripts/emoji/awards_app/index.js
+++ b/app/assets/javascripts/emoji/awards_app/index.js
@@ -9,7 +9,7 @@ export default (el) => {
   if (!el) return null;
 
   const {
-    dataset: { path },
+    dataset: { path, newCustomEmojiPath },
   } = el;
   const canAwardEmoji = parseBoolean(el.dataset.canAwardEmoji);
 
@@ -17,6 +17,9 @@ export default (el) => {
     el,
     name: 'AwardsListRoot',
     store: createstore(),
+    provide: {
+      newCustomEmojiPath,
+    },
     computed: {
       ...mapState(['currentUserId', 'canAwardEmoji', 'awards']),
     },
diff --git a/app/assets/javascripts/emoji/components/picker.vue b/app/assets/javascripts/emoji/components/picker.vue
index fcc54f17466fb085297e21ee8e27c94254aa5af7..238f0d81b2212e5b03ef4c53e1ca205f0b1675b1 100644
--- a/app/assets/javascripts/emoji/components/picker.vue
+++ b/app/assets/javascripts/emoji/components/picker.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlIcon, GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
+import { GlIcon, GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { findLastIndex } from 'lodash';
 import VirtualList from 'vue-virtual-scroll-list';
 import { CATEGORY_NAMES, getEmojiCategoryMap, state } from '~/emoji';
@@ -13,11 +13,17 @@ export default {
   components: {
     GlIcon,
     GlDropdown,
+    GlDropdownItem,
     GlSearchBoxByType,
     VirtualList,
     Category,
     EmojiList,
   },
+  inject: {
+    newCustomEmojiPath: {
+      default: '',
+    },
+  },
   props: {
     toggleClass: {
       type: [Array, String, Object],
@@ -167,6 +173,11 @@ export default {
           </virtual-list>
         </template>
       </emoji-list>
+      <template v-if="newCustomEmojiPath" #footer>
+        <gl-dropdown-item :href="newCustomEmojiPath">
+          {{ __('Create new emoji') }}
+        </gl-dropdown-item>
+      </template>
     </gl-dropdown>
   </div>
 </template>
diff --git a/app/assets/javascripts/mr_notes/init_notes.js b/app/assets/javascripts/mr_notes/init_notes.js
index 04167518d3f34863f72a044e9b98751197ff10fd..265e2a2f8805fe47482b6bfb3ba2805be8c19fc3 100644
--- a/app/assets/javascripts/mr_notes/init_notes.js
+++ b/app/assets/javascripts/mr_notes/init_notes.js
@@ -44,6 +44,7 @@ export default () => {
       reportAbusePath: notesDataset.reportAbusePath,
       newCommentTemplatePath: notesDataset.newCommentTemplatePath,
       mrFilter: true,
+      newCustomEmojiPath: notesDataset.newCustomEmojiPath,
     },
     data() {
       const noteableData = JSON.parse(notesDataset.noteableData);
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index 724b47bf44bcfecf2c3e140032ba8a317fbd2d97..f9fbe6659ee65e410a8e61dbdee0d53f30f27e4b 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -62,6 +62,7 @@ export default ({ editorAiActions = [] } = {}) => {
       newCommentTemplatePath: notesDataset.newCommentTemplatePath,
       resourceGlobalId: convertToGraphQLId(noteableData.noteableType, noteableData.id),
       editorAiActions: editorAiActions.map((factory) => factory(noteableData)),
+      newCustomEmojiPath: notesDataset.newCustomEmojiPath,
     },
     data() {
       return {
diff --git a/app/assets/javascripts/pages/groups/custom_emoji/index.js b/app/assets/javascripts/pages/groups/custom_emoji/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd02a6f5348d26d7555ef6637aabcaf4fc430591
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/custom_emoji/index.js
@@ -0,0 +1,3 @@
+import { initCustomEmojis } from '~/custom_emoji/custom_emoji_bundle';
+
+requestIdleCallback(initCustomEmojis);
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index 9b22e4cebb2befad6470300dbca3683bb7466e3c..d3986f31d5227c166df686832f2f2bf173e359e4 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -63,6 +63,7 @@ gl-emoji {
   border-bottom-color: $blue-500;
 }
 
-.emoji-picker .gl-dropdown-inner > :last-child {
+.emoji-picker .gl-dropdown-contents > :last-child {
   padding-bottom: 0;
+  overflow-y: hidden;
 }
diff --git a/app/controllers/groups/custom_emoji_controller.rb b/app/controllers/groups/custom_emoji_controller.rb
new file mode 100644
index 0000000000000000000000000000000000000000..f202c9febbac94c79fb0d59f0fe7552db2cfd134
--- /dev/null
+++ b/app/controllers/groups/custom_emoji_controller.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Groups
+  class CustomEmojiController < Groups::ApplicationController
+    feature_category :code_review_workflow
+    urgency :low
+
+    before_action do
+      render_404 unless Feature.enabled?(:custom_emoji)
+    end
+  end
+end
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index e552b01f7ba807bf0feb8f74423f2f51ad8441f2..de15d6cabc001f21a5929072665d0b635ab07297 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -197,6 +197,14 @@ def enabled_git_access_protocol_options_for_group
     end
   end
 
+  def new_custom_emoji_path(group)
+    return unless Feature.enabled?(:custom_emoji)
+    return unless group
+    return unless can?(current_user, :create_custom_emoji, group)
+
+    new_group_custom_emoji_path(group)
+  end
+
   private
 
   def group_title_link(group, hidable: false, show_avatar: false, for_dropdown: false)
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 5062599c26137705c7fa1f3202b99684ebd1368d..254f05e3bccec23df0f066b715fca936fad39628 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -1,8 +1,9 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
+- new_custom_emoji_path = local_assigns.fetch(:new_custom_emoji_path, nil)
 
 - if api_awards_path
   .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between.gl-pt-3
-    #js-vue-awards-block{ data: { path: api_awards_path, can_award_emoji: can?(current_user, :award_emoji, awardable).to_s } }
+    #js-vue-awards-block{ data: { path: api_awards_path, can_award_emoji: can?(current_user, :award_emoji, awardable).to_s, new_custom_emoji_path: new_custom_emoji_path } }
     = yield
 - else
   - grouped_emojis = awardable.grouped_awards(with_thumbs: inline)
diff --git a/app/views/groups/custom_emoji/index.html.haml b/app/views/groups/custom_emoji/index.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..d8c28ac8959345b6dc11475ca339557b494324ef
--- /dev/null
+++ b/app/views/groups/custom_emoji/index.html.haml
@@ -0,0 +1,8 @@
+- page_title _('Custom emoji')
+
+#js-custom-emojis-root.row.gl-mt-5{ data: { base_path: group_custom_emoji_index_path(@group), group_path: @group.full_path } }
+  .col-12
+    %h4.gl-mt-0
+      = page_title
+    %p= _('Custom emoji will be available to use in every project in the group.')
+    = gl_loading_icon(size: 'lg')
diff --git a/app/views/projects/issues/_details_content.html.haml b/app/views/projects/issues/_details_content.html.haml
index 51ffb68f4e51f99ae2b268b106f5740ddee67a72..881e6863040cf942037c969a368595929ce73f56 100644
--- a/app/views/projects/issues/_details_content.html.haml
+++ b/app/views/projects/issues/_details_content.html.haml
@@ -16,7 +16,7 @@
       = edited_time_ago_with_tooltip(issuable, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
 
     .js-issue-widgets
-      = render 'projects/issues/emoji_block', issuable: issuable, api_awards_path: api_awards_path
+      = render 'projects/issues/emoji_block', issuable: issuable, api_awards_path: api_awards_path, new_custom_emoji_path: new_custom_emoji_path(@project.group)
 
   .js-issue-widgets
     = render 'projects/issues/sentry_stack_trace', issuable: issuable
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index c6e5102889a8b4b774313bd07679c247a1196d96..5cb7fa8816e0bcf498aae447f064344b563ca7d8 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -13,4 +13,5 @@
     current_user_data: UserSerializer.new.represent(current_user, {only_path: true}, CurrentUserEntity).to_json,
     can_add_timeline_events: "#{can?(current_user, :admin_incident_management_timeline_event, @issue)}",
     report_abuse_path: add_category_abuse_reports_path,
-    new_comment_template_path: profile_comment_templates_path } }
+    new_comment_template_path: profile_comment_templates_path,
+    new_custom_emoji_path: new_custom_emoji_path(@project.group) } }
diff --git a/app/views/projects/issues/_emoji_block.html.haml b/app/views/projects/issues/_emoji_block.html.haml
index 7eb3c0f5c9f843428ef0e131d6f0d4f10ecdfa3c..f9eee9ec99ea7367865325b92165fabe288927b0 100644
--- a/app/views/projects/issues/_emoji_block.html.haml
+++ b/app/views/projects/issues/_emoji_block.html.haml
@@ -1,8 +1,9 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
+- new_custom_emoji_path = local_assigns.fetch(:new_custom_emoji_path, nil)
 
 .emoji-block.emoji-block-sticky
   .row.gl-m-0.gl-justify-content-space-between
     .js-noteable-awards
-      = render 'award_emoji/awards_block', awardable: issuable, inline: true, api_awards_path: api_awards_path
+      = render 'award_emoji/awards_block', awardable: issuable, inline: true, api_awards_path: api_awards_path, new_custom_emoji_path: new_custom_emoji_path
     .new-branch-col.gl-font-size-0.gl-my-2
       = render 'new_branch' if show_new_branch_button?
diff --git a/app/views/projects/merge_requests/_awards_block.html.haml b/app/views/projects/merge_requests/_awards_block.html.haml
index c1952793e7211b4e7f9021c77db05f15885f5afd..f657f683a6d6f35ba281cade9aabc2c96f95a860 100644
--- a/app/views/projects/merge_requests/_awards_block.html.haml
+++ b/app/views/projects/merge_requests/_awards_block.html.haml
@@ -1,2 +1,2 @@
 .emoji-block.emoji-list-container.js-noteable-awards
-  = render 'award_emoji/awards_block', awardable: @merge_request, inline: true, api_awards_path: award_emoji_merge_request_api_path(@merge_request)
+  = render 'award_emoji/awards_block', awardable: @merge_request, inline: true, api_awards_path: award_emoji_merge_request_api_path(@merge_request), new_custom_emoji_path: new_custom_emoji_path(@project.group)
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index dfb18b5202170fc2120be838c5736e4140729db7..f99396e4155d6d90ffa55af2d113bd87b10bfbb2 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -83,7 +83,8 @@
                 current_user_data: @current_user_data,
                 is_locked: @merge_request.discussion_locked.to_s,
                 report_abuse_path: add_category_abuse_reports_path,
-                new_comment_template_path: profile_comment_templates_path } }
+                new_comment_template_path: profile_comment_templates_path,
+                new_custom_emoji_path: new_custom_emoji_path(@project.group) } }
           - if moved_mr_sidebar_enabled?
             = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
 
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 58e86ebffa0a2ff1c00353de83d635fad978d22c..7ff798d732409fd213f6c7959af000d38c5eb421 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -6,6 +6,6 @@
 #js-snippet-view{ data: { 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet), 'can-report-spam': @snippet.submittable_as_spam_by?(current_user).to_s } }
 
 .gl-px-0.gl-py-2
-  = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet)
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet), new_custom_emoji_path: new_custom_emoji_path(@project.group)
 
 #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/config/routes/group.rb b/config/routes/group.rb
index 87e885e59a20e09edfaa4dd9b4cacea8c0057ad6..6cad7f9093b5250fb472d33f0290617cd0a78582 100644
--- a/config/routes/group.rb
+++ b/config/routes/group.rb
@@ -78,6 +78,8 @@
       post :toggle_subscription, on: :member
     end
 
+    resources :custom_emoji, only: [:index, :new], action: :index
+
     resources :packages, only: [:index, :show]
 
     resources :milestones, constraints: { id: %r{[^/]+} } do
diff --git a/ee/app/views/groups/epics/_discussion.html.haml b/ee/app/views/groups/epics/_discussion.html.haml
index 07f769ba9b8d068fdcaeaa6f05e4e68bb4f6f3a0..22869e64fbaa40352c97efd786fb25ccab989bae 100644
--- a/ee/app/views/groups/epics/_discussion.html.haml
+++ b/ee/app/views/groups/epics/_discussion.html.haml
@@ -8,4 +8,5 @@
     current_user_data: UserSerializer.new.represent(current_user, { only_path: true }, CurrentUserEntity).to_json,
     noteable_type: 'Epic',
     report_abuse_path: add_category_abuse_reports_path,
-    new_comment_template_path: profile_comment_templates_path } }
+    new_comment_template_path: profile_comment_templates_path,
+    new_custom_emoji_path: new_custom_emoji_path(@group) } }
diff --git a/ee/app/views/groups/epics/show.html.haml b/ee/app/views/groups/epics/show.html.haml
index e0889d08999639c12b564cf4b7d77b7c29993c36..d3b3a7bfdc62aec5154a817818611fb712dfdb38 100644
--- a/ee/app/views/groups/epics/show.html.haml
+++ b/ee/app/views/groups/epics/show.html.haml
@@ -40,7 +40,7 @@
     'data-container-element-selector' => ".#{containerClass}" }
 
   .gl-display-flex.justify-content-between.emoji-list-container.js-noteable-awards
-    = render 'award_emoji/awards_block', awardable: @epic, inline: true, api_awards_path: award_emoji_epics_api_path(@epic)
+    = render 'award_emoji/awards_block', awardable: @epic, inline: true, api_awards_path: award_emoji_epics_api_path(@epic), new_custom_emoji_path: new_custom_emoji_path(@group)
   %div{ id: treeElementID, class: ['tab-pane', 'show', 'active'] }
     .row
       %section.col-md-12
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5d568647f4dbf3c864e226d09fbf8e2a5b28ba08..18343f46e79040c0e9f95e0c126aff44c44e6b63 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -13897,6 +13897,9 @@ msgstr ""
 msgid "Create new directory"
 msgstr ""
 
+msgid "Create new emoji"
+msgstr ""
+
 msgid "Create new file"
 msgstr ""
 
@@ -14407,7 +14410,7 @@ msgstr ""
 msgid "Custom emoji"
 msgstr ""
 
-msgid "Custom emoji will be available to use in every project in group."
+msgid "Custom emoji will be available to use in every project in the group."
 msgstr ""
 
 msgid "Custom hostname (for private commit emails)"
diff --git a/spec/features/merge_request/user_creates_custom_emoji_spec.rb b/spec/features/merge_request/user_creates_custom_emoji_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..35593836dab8bdeb5fe34544e1cc4ecb79bc4616
--- /dev/null
+++ b/spec/features/merge_request/user_creates_custom_emoji_spec.rb
@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Merge request > User creates custom emoji', :js, feature_category: :code_review_workflow do
+  let_it_be(:group) { create(:group) }
+  let_it_be(:user) { create(:user) }
+  let_it_be(:project) { create(:project, :public, :repository, namespace: group) }
+  let_it_be(:merge_request) { create(:merge_request, source_project: project, author: user) }
+
+  context 'with user who has permissions' do
+    before_all do
+      group.add_owner(user)
+    end
+
+    before do
+      sign_in(user)
+
+      visit project_merge_request_path(project, merge_request)
+      wait_for_requests
+    end
+
+    it 'shows link to create custom emoji' do
+      first('.add-reaction-button').click
+
+      wait_for_requests
+
+      click_link 'Create new emoji'
+
+      wait_for_requests
+
+      find_by_testid("custom-emoji-name-input").set 'parrot'
+      find_by_testid("custom-emoji-url-input").set 'https://example.com'
+
+      click_button 'Save'
+
+      wait_for_requests
+
+      expect(page).to have_content(':parrot:')
+    end
+  end
+
+  context 'with user who does not have permissions' do
+    before do
+      sign_in(user)
+
+      visit project_merge_request_path(project, merge_request)
+      wait_for_requests
+    end
+
+    it 'shows link to create custom emoji' do
+      first('.add-reaction-button').click
+
+      wait_for_requests
+
+      expect(page).not_to have_link('Create new emoji')
+    end
+  end
+end
diff --git a/spec/helpers/groups_helper_spec.rb b/spec/helpers/groups_helper_spec.rb
index 1b5f23a5e8eb319735be32291c1fe968b9799239..2cdb934eb0a6a443f7ef8df332c6074a57521a32 100644
--- a/spec/helpers/groups_helper_spec.rb
+++ b/spec/helpers/groups_helper_spec.rb
@@ -555,4 +555,44 @@
       it { is_expected.to contain_exactly([_("Only HTTP(S)"), "http"]) }
     end
   end
+
+  describe '#new_custom_emoji_path' do
+    subject { helper.new_custom_emoji_path(group) }
+
+    let_it_be(:group) { create(:group) }
+
+    context 'with feature flag disabled' do
+      before do
+        stub_feature_flags(custom_emoji: false)
+      end
+
+      it { is_expected.to eq(nil) }
+    end
+
+    context 'with feature flag enabled' do
+      context 'with nil group' do
+        let(:group) { nil }
+
+        it { is_expected.to eq(nil) }
+      end
+
+      context 'with current_user who has no permissions' do
+        before do
+          allow(helper).to receive(:current_user).and_return(create(:user))
+        end
+
+        it { is_expected.to eq(nil) }
+      end
+
+      context 'with current_user who has permissions' do
+        before do
+          user = create(:user)
+          group.add_owner(user)
+          allow(helper).to receive(:current_user).and_return(user)
+        end
+
+        it { is_expected.to eq(new_group_custom_emoji_path(group)) }
+      end
+    end
+  end
 end
diff --git a/spec/requests/groups/custom_emoji_controller_spec.rb b/spec/requests/groups/custom_emoji_controller_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..d12cd8e42ac6f1625e20f0637360649ef1fe5749
--- /dev/null
+++ b/spec/requests/groups/custom_emoji_controller_spec.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Groups::CustomEmojiController, feature_category: :code_review_workflow do
+  let_it_be(:group) { create(:group) }
+
+  describe 'GET #index' do
+    context 'with custom_emoji feature flag disabled' do
+      before do
+        stub_feature_flags(custom_emoji: false)
+
+        get group_custom_emoji_index_url(group)
+      end
+
+      it { expect(response).to have_gitlab_http_status(:not_found) }
+    end
+
+    context 'with custom_emoji feature flag enabled' do
+      before do
+        get group_custom_emoji_index_url(group)
+      end
+
+      it { expect(response).to have_gitlab_http_status(:ok) }
+    end
+  end
+end