diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index c48ae5925..79128daa7 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -51,24 +51,28 @@ const BookmarkFolders: React.FC = () => {
               </HStack>
             }
           />
-          {bookmarkFolders?.map((folder) => (
-            <ListItem
-              key={folder.id}
-              to={`/bookmarks/${folder.id}`}
-              label={
-                <HStack alignItems='center' space={2}>
-                  {folder.emoji ? (
-                    <Emoji
-                      emoji={folder.emoji}
-                      src={folder.emoji_url || undefined}
-                      className='size-5 flex-none'
-                    />
-                  ) : <Icon src={folderIcon} size={20} />}
-                  <span>{folder.name}</span>
-                </HStack>
-              }
-            />
-          ))}
+          {bookmarkFolders?.map((folder) => {
+            let icon = <Icon src={folderIcon} size={20} />;
+
+            if (folder.emoji_url) {
+              icon = <img src={folder.emoji_url} alt={folder.emoji} className='size-5' />;
+            } else if (folder.emoji) {
+              icon = <Emoji size={20} emoji={folder.emoji} />;
+            }
+
+            return (
+              <ListItem
+                key={folder.id}
+                to={`/bookmarks/${folder.id}`}
+                label={
+                  <HStack alignItems='center' space={2}>
+                    <div className='flex-none'>{icon}</div>
+                    <span>{folder.name}</span>
+                  </HStack>
+                }
+              />
+            );
+          })}
         </List>
       </Stack>
     </Column>
diff --git a/src/features/crypto-donate/components/lightning-address.tsx b/src/features/crypto-donate/components/lightning-address.tsx
index f0223bd61..725b7e8ce 100644
--- a/src/features/crypto-donate/components/lightning-address.tsx
+++ b/src/features/crypto-donate/components/lightning-address.tsx
@@ -15,11 +15,8 @@ const LightningAddress: React.FC<ILightningAddress> = (props): JSX.Element => {
 
   return (
     <Stack>
-      <HStack alignItems='center' className='mb-1'>
-        <Emoji
-          className='mr-2.5 flex w-6 items-start justify-center rtl:ml-2.5 rtl:mr-0'
-          emoji='⚡'
-        />
+      <HStack space={2.5} alignItems='center' className='mb-1'>
+        <Emoji size={24} emoji='⚡' />
 
         <Text weight='bold'>
           <FormattedMessage id='crypto.lightning' defaultMessage='Lightning' />
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index 451dc16af..dff342a88 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -129,7 +129,7 @@ const EditIdentity: React.FC<IEditIdentity> = () => {
                         {(account.source?.nostr?.nip05 === identifier && account.acct !== identifier) && (
                           <Tooltip text={intl.formatMessage(messages.unverified)}>
                             <div>
-                              <Emoji className='size-4' emoji='⚠️' />
+                              <Emoji emoji='⚠️' />
                             </div>
                           </Tooltip>
                         )}
diff --git a/src/features/emoji/index.ts b/src/features/emoji/index.ts
index 1ff9f555d..1efed4fcb 100644
--- a/src/features/emoji/index.ts
+++ b/src/features/emoji/index.ts
@@ -63,7 +63,7 @@ const validEmojiChar = (c: string) => {
 };
 
 const convertCustom = (shortname: string, filename: string) => {
-  return `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
+  return `<img draggable="false" class="inline-block w-4 h-4" alt="${shortname}" title="${shortname}" src="${filename}" />`;
 };
 
 const convertUnicode = (c: string) => {
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index 24d48b7ca..69bc27bc1 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -315,13 +315,11 @@ const Notification: React.FC<INotification> = (props) => {
 
   const renderIcon = (): React.ReactNode => {
     if (type === 'pleroma:emoji_reaction' && notification.emoji) {
-      return (
-        <Emoji
-          emoji={notification.emoji}
-          src={notification.emoji_url || undefined}
-          className='size-4 flex-none'
-        />
-      );
+      if (notification.emoji_url) {
+        return <img src={notification.emoji_url} alt={notification.emoji} className='size-4 flex-none' />;
+      } else {
+        return <Emoji emoji={notification.emoji} />;
+      }
     } else if (validType(type)) {
       return (
         <Icon
diff --git a/src/features/status/components/status-interaction-bar.tsx b/src/features/status/components/status-interaction-bar.tsx
index 39a9e1c64..62ee17cf7 100644
--- a/src/features/status/components/status-interaction-bar.tsx
+++ b/src/features/status/components/status-interaction-bar.tsx
@@ -182,15 +182,12 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
       return (
         <InteractionCounter count={count} onClick={features.exposableReactions ? handleClick : undefined}>
           <HStack space={0.5} alignItems='center'>
-            {emojiReacts.take(3).map((e, i) => {
-              return (
-                <Emoji
-                  key={i}
-                  className='size-4.5 flex-none'
-                  emoji={e.name}
-                  src={e.url}
-                />
-              );
+            {emojiReacts.take(3).map((emoji, i) => {
+              if (emoji.url) {
+                return <img key={i} src={emoji.url} alt={emoji.name} className='size-4.5 flex-none' />;
+              } else {
+                return <div key={i} className='flex-none'><Emoji size={18} emoji={emoji.name} /></div>;
+              }
             })}
           </HStack>
         </InteractionCounter>
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 6329e5104..8b122edd3 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -63,7 +63,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
         tabIndex={0}
       >
         {emoji
-          ? <Emoji height={20} width={20} emoji={emoji} />
+          ? <Emoji size={20} emoji={emoji} />
           : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={moodHappyIcon} />}
       </button>
 
diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx
index e399d4176..d3334f6ab 100644
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/src/features/ui/components/modals/reactions-modal.tsx
@@ -62,10 +62,16 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
 
     reactions!.forEach(reaction => items.push(
       {
-        text: <div className='flex items-center gap-1'>
-          <Emoji className='size-4' emoji={reaction.name} src={reaction.url || undefined} />
-          {reaction.count}
-        </div>,
+        text: (
+          <div className='flex items-center gap-1'>
+            {reaction.url ? (
+              <img src={reaction.url} alt='' className='size-4' />
+            ) : (
+              <Emoji emoji={reaction.name} />
+            )}
+            {reaction.count}
+          </div>
+        ),
         action: () => setReaction(reaction.name),
         name: reaction.name,
       },
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index 672cd1a3c..6c6708981 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -60,25 +60,29 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
   ];
 
   if (!isFetching) {
-    items.push(...(bookmarkFolders.map((folder) => (
-      <RadioItem
-        key={folder.id}
-        label={
-          <HStack alignItems='center' space={2}>
-            {folder.emoji ? (
-              <Emoji
-                emoji={folder.emoji}
-                src={folder.emoji_url || undefined}
-                className='size-5 flex-none'
-              />
-            ) : <Icon src={folderIcon} size={20} />}
-            <span>{folder.name}</span>
-          </HStack>
-        }
-        checked={selectedFolder === folder.id}
-        value={folder.id}
-      />
-    ))));
+    items.push(...(bookmarkFolders.map((folder) => {
+      let icon = <Icon src={folderIcon} size={20} />;
+
+      if (folder.emoji_url) {
+        icon = <img src={folder.emoji_url} alt={folder.emoji} className='size-5' />;
+      } else if (folder.emoji) {
+        icon = <Emoji size={20} emoji={folder.emoji} />;
+      }
+
+      return (
+        <RadioItem
+          key={folder.id}
+          label={
+            <HStack alignItems='center' space={2}>
+              <div className='flex-none'>{icon}</div>
+              <span>{folder.name}</span>
+            </HStack>
+          }
+          checked={selectedFolder === folder.id}
+          value={folder.id}
+        />
+      );
+    })));
   }
 
   const body = isFetching ? <Spinner /> : (