diff --git a/apps/web/ce/hooks/use-additional-favorite-item-details.ts b/apps/web/ce/hooks/use-additional-favorite-item-details.tsx
similarity index 81%
rename from apps/web/ce/hooks/use-additional-favorite-item-details.ts
rename to apps/web/ce/hooks/use-additional-favorite-item-details.tsx
index 7bf502ea11..88203a26e2 100644
--- a/apps/web/ce/hooks/use-additional-favorite-item-details.ts
+++ b/apps/web/ce/hooks/use-additional-favorite-item-details.tsx
@@ -7,7 +7,7 @@
 // plane imports
 import type { IFavorite } from "@plane/types";
 // components
-import { getFavoriteItemIcon } from "@/components/workspace/sidebar/favorites/favorite-items/common";
+import { FavoriteItemIcon } from "@/components/workspace/sidebar/favorites/favorite-items/common";
 
 export const useAdditionalFavoriteItemDetails = () => {
   const getAdditionalFavoriteItemDetails = (_workspaceSlug: string, favorite: IFavorite) => {
@@ -20,7 +20,7 @@ export const useAdditionalFavoriteItemDetails = () => {
     switch (favoriteItemEntityType) {
       default:
         itemTitle = favoriteItemName;
-        itemIcon = getFavoriteItemIcon(favoriteItemEntityType);
+        itemIcon = <FavoriteItemIcon type={favoriteItemEntityType} />;
         break;
     }
     return { itemIcon, itemTitle };
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx
new file mode 100644
index 0000000000..64c3a4ae6c
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+// plane imports
+import type { TLogoProps } from "@plane/types";
+import { CycleIcon, FavoriteFolderIcon, ModuleIcon, PageIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+
+const ICON_MAP: Record<string, React.FC<ISvgIcons> | LucideIcon> = {
+  page: PageIcon,
+  project: ProjectIcon,
+  view: ViewsIcon,
+  module: ModuleIcon,
+  cycle: CycleIcon,
+  folder: FavoriteFolderIcon,
+};
+
+type Props = {
+  type: string;
+  logo?: TLogoProps;
+};
+
+export const FavoriteItemIcon = ({ type, logo }: Props) => {
+  const Icon = ICON_MAP[type] ?? PageIcon;
+
+  return (
+    <>
+      <div className="hidden size-5 items-center justify-center group-hover:flex">
+        <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
+      </div>
+      <div className="flex size-5 items-center justify-center group-hover:hidden">
+        {logo?.in_use ? (
+          <Logo logo={logo} size={16} type={type === "project" ? "material" : "lucide"} />
+        ) : (
+          <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
index f7de5b9214..ae4bb44cfa 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
@@ -4,32 +4,8 @@
  * See the LICENSE file for details.
  */
 
-import { Logo } from "@plane/propel/emoji-icon-picker";
-import { PageIcon } from "@plane/propel/icons";
-// plane imports
-import type { IFavorite, TLogoProps } from "@plane/types";
-// components
-// plane web constants
-import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/constants/sidebar-favorites";
-
-export const getFavoriteItemIcon = (type: string, logo?: TLogoProps) => {
-  const Icon = FAVORITE_ITEM_ICONS[type] || PageIcon;
-
-  return (
-    <>
-      <div className="hidden size-5 items-center justify-center group-hover:flex">
-        <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
-      </div>
-      <div className="flex size-5 items-center justify-center group-hover:hidden">
-        {logo?.in_use ? (
-          <Logo logo={logo} size={16} type={type === "project" ? "material" : "lucide"} />
-        ) : (
-          <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
-        )}
-      </div>
-    </>
-  );
-};
+import { FAVORITE_ITEM_LINKS } from "@plane/constants";
+import type { IFavorite } from "@plane/types";
 
 export const generateFavoriteItemLink = (workspaceSlug: string, favorite: IFavorite) => {
   const entityLinkDetails = FAVORITE_ITEM_LINKS[favorite.entity_type];
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts
index c044bec246..4e13083a93 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts
@@ -5,6 +5,7 @@
  */
 
 export * from "./favorite-item-drag-handle";
+export * from "./favorite-item-icon";
 export * from "./favorite-item-quick-action";
 export * from "./favorite-item-wrapper";
 export * from "./favorite-item-title";
diff --git a/apps/web/core/hooks/use-favorite-item-details.tsx b/apps/web/core/hooks/use-favorite-item-details.tsx
index b3c9468e39..ef2a296a08 100644
--- a/apps/web/core/hooks/use-favorite-item-details.tsx
+++ b/apps/web/core/hooks/use-favorite-item-details.tsx
@@ -9,8 +9,8 @@ import type { IFavorite } from "@plane/types";
 // components
 import { getPageName } from "@plane/utils";
 import {
+  FavoriteItemIcon,
   generateFavoriteItemLink,
-  getFavoriteItemIcon,
 } from "@/components/workspace/sidebar/favorites/favorite-items/common";
 // helpers
 // hooks
@@ -53,23 +53,23 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit
   switch (favoriteItemEntityType) {
     case "project":
       itemTitle = currentProjectDetails?.name ?? favoriteItemName;
-      itemIcon = getFavoriteItemIcon("project", currentProjectDetails?.logo_props || favoriteItemLogoProps);
+      itemIcon = <FavoriteItemIcon type="project" logo={currentProjectDetails?.logo_props || favoriteItemLogoProps} />;
       break;
     case "page":
       itemTitle = getPageName(pageDetail?.name ?? favoriteItemName);
-      itemIcon = getFavoriteItemIcon("page", pageDetail?.logo_props ?? favoriteItemLogoProps);
+      itemIcon = <FavoriteItemIcon type="page" logo={pageDetail?.logo_props ?? favoriteItemLogoProps} />;
       break;
     case "view":
       itemTitle = viewDetails?.name ?? favoriteItemName;
-      itemIcon = getFavoriteItemIcon("view", viewDetails?.logo_props || favoriteItemLogoProps);
+      itemIcon = <FavoriteItemIcon type="view" logo={viewDetails?.logo_props || favoriteItemLogoProps} />;
       break;
     case "cycle":
       itemTitle = cycleDetail?.name ?? favoriteItemName;
-      itemIcon = getFavoriteItemIcon("cycle");
+      itemIcon = <FavoriteItemIcon type="cycle" />;
       break;
     case "module":
       itemTitle = moduleDetail?.name ?? favoriteItemName;
-      itemIcon = getFavoriteItemIcon("module");
+      itemIcon = <FavoriteItemIcon type="module" />;
       break;
     default: {
       const additionalDetails = getAdditionalFavoriteItemDetails(workspaceSlug, favorite);
diff --git a/apps/web/core/constants/sidebar-favorites.ts b/packages/constants/src/sidebar-favorites.ts
similarity index 65%
rename from apps/web/core/constants/sidebar-favorites.ts
rename to packages/constants/src/sidebar-favorites.ts
index e2935a6a5a..af8d740749 100644
--- a/apps/web/core/constants/sidebar-favorites.ts
+++ b/packages/constants/src/sidebar-favorites.ts
@@ -4,21 +4,8 @@
  * See the LICENSE file for details.
  */
 
-import type { LucideIcon } from "lucide-react";
-// plane imports
-import type { ISvgIcons } from "@plane/propel/icons";
-import { CycleIcon, FavoriteFolderIcon, ModuleIcon, PageIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
 import type { IFavorite } from "@plane/types";
 
-export const FAVORITE_ITEM_ICONS: Record<string, React.FC<ISvgIcons> | LucideIcon> = {
-  page: PageIcon,
-  project: ProjectIcon,
-  view: ViewsIcon,
-  module: ModuleIcon,
-  cycle: CycleIcon,
-  folder: FavoriteFolderIcon,
-};
-
 export const FAVORITE_ITEM_LINKS: {
   [key: string]: {
     itemLevel: "project" | "workspace";