diff --git a/app/assets/javascripts/discourse/components/emoji-picker.js b/app/assets/javascripts/discourse/components/emoji-picker.js
index 90e2fefe13b..e088f9c4097 100644
--- a/app/assets/javascripts/discourse/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/components/emoji-picker.js
@@ -434,7 +434,7 @@ export default Component.extend({
 
     this.$visibleSections.forEach(visibleSection => {
       const $unloadedEmojis = $(visibleSection).find(
-        "button.emoji[data-loaded!='1']"
+        "button.emoji:not(.custom)[data-loaded!='1']"
       );
       $.each($unloadedEmojis, (_, button) => {
         let offsetTop = button.offsetTop;
diff --git a/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs.erb b/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs.erb
index f3504d33f0c..ea5b7c125bd 100644
--- a/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs.erb
+++ b/app/assets/javascripts/discourse/templates/components/emoji-picker.hbs.erb
@@ -61,7 +61,7 @@
             {{#if emojis.length}}
               <div class='section-group'>
                 {{#each emojis as |emoji|}}
-                  <button type="button" class="emoji" tabindex="-1" title=":{{emoji.code}}:">
+                  <button type="button" class="custom emoji" tabindex="-1" title="{{emoji.code}}">
                     <img loading="lazy" class="emoji" src="{{emoji.src}}">
                   </button>
                 {{/each}}