diff --git a/packages/shared/src/components/feeds/FeedSettings/FeedSettingsCreate.tsx b/packages/shared/src/components/feeds/FeedSettings/FeedSettingsCreate.tsx
index 79e33e1005..03c7dfa7b7 100644
--- a/packages/shared/src/components/feeds/FeedSettings/FeedSettingsCreate.tsx
+++ b/packages/shared/src/components/feeds/FeedSettings/FeedSettingsCreate.tsx
@@ -1,24 +1,17 @@
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
-import classNames from 'classnames';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { ClientError } from 'graphql-request';
 import { Modal } from '../../modals/common/Modal';
 
 import type { CreateFeedProps } from '../../../hooks';
 import { useActions, useFeeds, useToastNotification } from '../../../hooks';
-import { emojiOptions } from '../../../lib/constants';
 import { Button } from '../../buttons/Button';
+import { EmojiPicker } from '../../fields/EmojiPicker';
 import { ButtonSize, ButtonVariant } from '../../buttons/common';
 import { TextField } from '../../fields/TextField';
-import { IconSize } from '../../Icon';
-import { HashtagIcon } from '../../icons';
-import {
-  Typography,
-  TypographyType,
-  TypographyTag,
-} from '../../typography/Typography';
+import { Typography, TypographyType } from '../../typography/Typography';
 import { LogEvent } from '../../../lib/log';
 import { useLogContext } from '../../../contexts/LogContext';
 import { labels } from '../../../lib/labels';
@@ -235,45 +228,13 @@ export const FeedSettingsCreate = (): ReactElement => {
                 setData((current) => ({ ...current, name: value }))
               }
             />
-            <div className="flex flex-col gap-4">
-              <Typography type={TypographyType.Body}>
-                <Typography className="inline-flex" bold>
-                  Choose an icon
-                </Typography>{' '}
-                (optional)
-              </Typography>
-              <ul className="flex flex-wrap gap-4" role="radiogroup">
-                {emojiOptions.map((emoji) => (
-                  <Button
-                    type="button"
-                    key={emoji}
-                    onClick={() =>
-                      setData((current) => ({ ...current, icon: emoji }))
-                    }
-                    className={classNames(
-                      '!size-12',
-                      data.icon === emoji && 'border-surface-focus',
-                    )}
-                    variant={ButtonVariant.Float}
-                    aria-checked={
-                      data.icon === emoji || (!emoji && data.icon === '')
-                    }
-                    role="radio"
-                  >
-                    {!emoji ? (
-                      <HashtagIcon size={IconSize.Large} />
-                    ) : (
-                      <Typography
-                        tag={TypographyTag.Span}
-                        type={TypographyType.Title1}
-                      >
-                        {emoji}
-                      </Typography>
-                    )}
-                  </Button>
-                ))}
-              </ul>
-            </div>
+            <EmojiPicker
+              value={data.icon || ''}
+              onChange={(emoji) =>
+                setData((current) => ({ ...current, icon: emoji }))
+              }
+              label="Icon (optional)"
+            />
             <Button
               className="hidden tablet:flex"
               type="submit"
diff --git a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsGeneralSection.tsx b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsGeneralSection.tsx
index 97e93f22d1..5c65c3285c 100644
--- a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsGeneralSection.tsx
+++ b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsGeneralSection.tsx
@@ -5,22 +5,15 @@ import Link from '../../../utilities/Link';
 import { FeedSettingsEditContext } from '../FeedSettingsEditContext';
 import { Button } from '../../../buttons/Button';
 import { ButtonSize, ButtonVariant } from '../../../buttons/common';
-import { IconSize } from '../../../Icon';
-import {
-  HashtagIcon,
-  LockIcon,
-  StarIcon,
-  TrashIcon,
-  VIcon,
-} from '../../../icons';
+import { LockIcon, StarIcon, TrashIcon, VIcon } from '../../../icons';
 import {
   Typography,
   TypographyType,
-  TypographyTag,
   TypographyColor,
 } from '../../../typography/Typography';
-import { emojiOptions, webappUrl } from '../../../../lib/constants';
+import { webappUrl } from '../../../../lib/constants';
 import { TextField } from '../../../fields/TextField';
+import { EmojiPicker } from '../../../fields/EmojiPicker';
 import { Divider } from '../../../utilities';
 import { useAuthContext } from '../../../../contexts/AuthContext';
 import { ColorName } from '../../../../styles/colors';
@@ -100,40 +93,11 @@ export const FeedSettingsGeneralSection = (): ReactElement => {
         )}
       </div>
       {isCustomFeed && (
-        <div className="flex flex-col gap-4">
-          <Typography bold type={TypographyType.Body}>
-            Choose an icon
-          </Typography>
-          <ul className="flex flex-wrap gap-4" role="radiogroup">
-            {emojiOptions.map((emoji) => (
-              <Button
-                type="button"
-                key={emoji}
-                onClick={() => setData({ icon: emoji })}
-                className={classNames(
-                  '!size-12',
-                  data.icon === emoji && 'border-surface-focus',
-                )}
-                variant={ButtonVariant.Float}
-                aria-checked={
-                  data.icon === emoji || (!emoji && data.icon === '')
-                }
-                role="radio"
-              >
-                {!emoji ? (
-                  <HashtagIcon size={IconSize.Large} />
-                ) : (
-                  <Typography
-                    tag={TypographyTag.Span}
-                    type={TypographyType.Title1}
-                  >
-                    {emoji}
-                  </Typography>
-                )}
-              </Button>
-            ))}
-          </ul>
-        </div>
+        <EmojiPicker
+          value={data.icon || ''}
+          onChange={(emoji) => setData({ icon: emoji })}
+          label="Choose an icon"
+        />
       )}
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1">
diff --git a/packages/shared/src/components/fields/EmojiPicker.tsx b/packages/shared/src/components/fields/EmojiPicker.tsx
index debe892250..400c03024f 100644
--- a/packages/shared/src/components/fields/EmojiPicker.tsx
+++ b/packages/shared/src/components/fields/EmojiPicker.tsx
@@ -59,14 +59,32 @@ export const EmojiPicker = ({
 }: EmojiPickerProps): ReactElement => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  const updateDropdownPosition = useCallback(() => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+      });
+    }
+  }, []);
 
   useEffect(() => {
     if (isOpen) {
+      updateDropdownPosition();
       inputRef.current?.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, updateDropdownPosition]);
 
   useEffect(() => {
     if (!isOpen) {
@@ -83,9 +101,20 @@ export const EmojiPicker = ({
       }
     };
 
+    const handleScroll = () => {
+      updateDropdownPosition();
+    };
+
     document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [isOpen]);
+    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('resize', handleScroll);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', handleScroll);
+    };
+  }, [isOpen, updateDropdownPosition]);
 
   const handleSelect = useCallback(
     (emoji: string) => {
@@ -115,7 +144,7 @@ export const EmojiPicker = ({
         {label}
       </Typography>
 
-      <div className="flex items-center gap-2">
+      <div ref={triggerRef} className="flex items-center gap-2">
         {value && (
           <Button
             type="button"
@@ -149,7 +178,15 @@ export const EmojiPicker = ({
       </div>
 
       {isOpen && (
-        <div className="absolute left-0 top-full z-3 mt-1 w-full rounded-16 border border-border-subtlest-tertiary bg-background-default p-3 shadow-2">
+        <div
+          className="fixed z-[100] max-h-80 overflow-y-auto rounded-16 border border-border-subtlest-tertiary bg-background-default p-3 shadow-2"
+          style={{
+            top: `${dropdownPosition.top}px`,
+            left: `${dropdownPosition.left}px`,
+            width: `${dropdownPosition.width}px`,
+            minWidth: '300px',
+          }}
+        >
           <input
             ref={inputRef}
             type="text"
diff --git a/packages/shared/src/components/modals/bookmark/BookmarkFolderModal.tsx b/packages/shared/src/components/modals/bookmark/BookmarkFolderModal.tsx
index 219f65e034..ea91375525 100644
--- a/packages/shared/src/components/modals/bookmark/BookmarkFolderModal.tsx
+++ b/packages/shared/src/components/modals/bookmark/BookmarkFolderModal.tsx
@@ -1,6 +1,5 @@
 import type { FormEvent, ReactElement } from 'react';
 import React, { useState } from 'react';
-import classNames from 'classnames';
 import {
   useConditionalFeature,
   usePlusSubscription,
@@ -17,9 +16,10 @@ import {
   TypographyType,
 } from '../../typography/Typography';
 import { Button, ButtonVariant } from '../../buttons/Button';
-import { DevPlusIcon, FolderIcon } from '../../icons';
-import { emojiOptions, plusUrl } from '../../../lib/constants';
+import { DevPlusIcon } from '../../icons';
+import { plusUrl } from '../../../lib/constants';
 import { anchorDefaultRel } from '../../../lib/strings';
+import { EmojiPicker } from '../../fields/EmojiPicker';
 import { LogEvent, TargetId } from '../../../lib/log';
 import { IconSize } from '../../Icon';
 import { ModalHeader } from '../common/ModalHeader';
@@ -139,39 +139,7 @@ const BookmarkFolderModal = ({
             onChange={(e) => setName(e.target.value)}
             value={name}
           />
-          <Typography bold type={TypographyType.Body}>
-            Choose an icon
-          </Typography>
-          <ul
-            className="flex flex-wrap gap-4 laptop:justify-evenly"
-            role="radiogroup"
-          >
-            {emojiOptions.map((emoji) => (
-              <Button
-                type="button"
-                key={emoji}
-                onClick={() => setIcon(emoji)}
-                className={classNames(
-                  '!size-12',
-                  icon === emoji && 'border-surface-focus',
-                )}
-                variant={ButtonVariant.Float}
-                aria-checked={icon === emoji || (!emoji && icon === '')}
-                role="radio"
-              >
-                {!emoji ? (
-                  <FolderIcon size={IconSize.Large} />
-                ) : (
-                  <Typography
-                    tag={TypographyTag.Span}
-                    type={TypographyType.Title1}
-                  >
-                    {emoji}
-                  </Typography>
-                )}
-              </Button>
-            ))}
-          </ul>
+          <EmojiPicker value={icon} onChange={setIcon} label="Choose an icon" />
           {!isMobile &&
             (shouldUpgrade ? (
               <Link href={plusUrl} passHref>