diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx
index 93ed591a2..44cbf67c4 100644
--- a/apps/client/src/widgets/note_icon.tsx
+++ b/apps/client/src/widgets/note_icon.tsx
@@ -58,7 +58,7 @@ function NoteIconList({ note }: { note: FNote }) {
     const searchBoxRef = useRef<HTMLInputElement>(null);
     const [ search, setSearch ] = useState<string>();
     const [ iconData, setIconData ] = useState<IconData>();
-    const [ filterByPrefix, setFilterByIconPack ] = useState<string | null>(null);
+    const [ filterByPrefix, setFilterByPrefix ] = useState<string | null>(null);
 
     useEffect(() => {
         async function loadIcons() {
@@ -134,23 +134,7 @@ function NoteIconList({ note }: { note: FNote }) {
                     noDropdownListStyle
                     iconAction
                 >
-                    <FormListItem
-                        checked={filterByPrefix === null}
-                        onClick={() => setFilterByIconPack(null)}
-                    >{t("note_icon.filter-none")}</FormListItem>
-                    <FormListItem
-                        checked={filterByPrefix === "bx"}
-                        onClick={() => setFilterByIconPack("bx")}
-                    >{t("note_icon.filter-default")}</FormListItem>
-                    <FormDropdownDivider />
-
-                    {glob.iconRegistry.sources.map(({ prefix, name }) => (
-                        <FormListItem
-                            key={prefix}
-                            onClick={() => setFilterByIconPack(prefix)}
-                            checked={filterByPrefix === prefix}
-                        >{name}</FormListItem>
-                    ))}
+                    <IconFilterContent filterByPrefix={filterByPrefix} setFilterByPrefix={setFilterByPrefix} />
                 </Dropdown>
             </div>
 
@@ -192,6 +176,33 @@ function NoteIconList({ note }: { note: FNote }) {
     );
 }
 
+function IconFilterContent({ filterByPrefix, setFilterByPrefix }: {
+    filterByPrefix: string | null;
+    setFilterByPrefix: (value: string | null) => void;
+}) {
+    return (
+        <>
+            <FormListItem
+                checked={filterByPrefix === null}
+                onClick={() => setFilterByPrefix(null)}
+            >{t("note_icon.filter-none")}</FormListItem>
+            <FormListItem
+                checked={filterByPrefix === "bx"}
+                onClick={() => setFilterByPrefix("bx")}
+            >{t("note_icon.filter-default")}</FormListItem>
+            <FormDropdownDivider />
+
+            {glob.iconRegistry.sources.map(({ prefix, name }) => (
+                <FormListItem
+                    key={prefix}
+                    onClick={() => setFilterByPrefix(prefix)}
+                    checked={filterByPrefix === prefix}
+                >{name}</FormListItem>
+            ))}
+        </>
+    );
+}
+
 async function getIconToCountMap() {
     if (!iconToCountCache) {
         iconToCountCache = server.get<IconToCountCache>("other/icon-usage");