diff --git a/apps/hash-frontend/src/pages/actions.page/draft-entities/draft-entities-filters.tsx b/apps/hash-frontend/src/pages/actions.page/draft-entities/draft-entities-filters.tsx
index 6f7ead03e1a..d6254a3793d 100644
--- a/apps/hash-frontend/src/pages/actions.page/draft-entities/draft-entities-filters.tsx
+++ b/apps/hash-frontend/src/pages/actions.page/draft-entities/draft-entities-filters.tsx
@@ -6,18 +6,19 @@ import {
   extractBaseUrl,
   extractWebIdFromEntityId,
 } from "@blockprotocol/type-system";
-import { WandMagicSparklesIcon } from "@hashintel/design-system";
+import {
+  EntityOrTypeIcon,
+  WandMagicSparklesIcon,
+} from "@hashintel/design-system";
 
 import { useOrgs } from "../../../components/hooks/use-orgs";
 import { useUsers } from "../../../components/hooks/use-users";
-import { AsteriskLightIcon } from "../../../shared/icons/asterisk-light-icon";
 import { CalendarDayLightIcon } from "../../../shared/icons/calendar-day-light-icon";
 import { CalendarDaysLightIcon } from "../../../shared/icons/calendar-days-light-icon";
 import { CalendarLightIcon } from "../../../shared/icons/calendar-light-icon";
 import { CalendarWeekLightIcon } from "../../../shared/icons/calendar-week-light-icon";
 import { CalendarsLightIcon } from "../../../shared/icons/calendars-light-icon";
 import { HashSolidIcon } from "../../../shared/icons/hash-solid-icon";
-import { LinkRegularIcon } from "../../../shared/icons/link-regular-icon";
 import { UserIcon } from "../../../shared/icons/user-icon";
 import { UsersRegularIcon } from "../../../shared/icons/users-regular-icon";
 import { Button } from "../../../shared/ui";
@@ -353,14 +354,15 @@ export const DraftEntitiesFilters: FunctionComponent<{
             const { baseUrl, icon, isLink, title } = entityType;
 
             return {
-              icon: icon ? (
-                <Box marginRight={1.25} maxWidth={14} component="span">
-                  {icon}
-                </Box>
-              ) : isLink ? (
-                <LinkRegularIcon />
-              ) : (
-                <AsteriskLightIcon />
+              icon: (
+                <EntityOrTypeIcon
+                  entity={null}
+                  icon={icon}
+                  isLink={isLink}
+                  fontSize={14}
+                  fill={({ palette }) => palette.gray[50]}
+                  sx={{ mr: 1.25 }}
+                />
               ),
               label: title,
               value: baseUrl,
diff --git a/apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx b/apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx
index c812d71078b..1ccd080bf3c 100644
--- a/apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx
+++ b/apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx
@@ -11,6 +11,7 @@ import {
 import {
   ArrowUpRightFromSquareRegularIcon,
   ArrowUpRightIcon,
+  EntityOrTypeIcon,
   EntityTypeIcon,
   LinkTypeIcon,
 } from "@hashintel/design-system";
@@ -115,32 +116,37 @@ export const EntityTypeHeader = ({
                   control={control}
                   name="icon"
                   render={({ field }) => {
-                    const iconImgUrl = field.value?.startsWith("/")
-                      ? new URL(field.value, window.location.origin).href
-                      : field.value;
+                    const iconValue = field.value;
 
                     /**
                      * @todo allow uploading new SVG icons
                      */
-                    if (iconImgUrl?.startsWith("http")) {
+                    if (
+                      typeof iconValue === "string" &&
+                      (iconValue.startsWith("http") ||
+                        iconValue.startsWith("/"))
+                    ) {
                       return (
                         <Box
-                          sx={({ palette }) => ({
-                            backgroundColor: palette.gray[50],
-                            webkitMask: `url(${iconImgUrl}) no-repeat center / contain`,
-                            mask: `url(${iconImgUrl}) no-repeat center / contain`,
-                            width: 40,
-                            height: 40,
+                          sx={{
                             position: "relative",
                             top: entityTypeNameSize.lineHeight / 2 - 20,
-                          })}
-                        />
+                          }}
+                        >
+                          <EntityOrTypeIcon
+                            entity={null}
+                            icon={iconValue}
+                            isLink={isLink}
+                            fontSize={40}
+                            fill={({ palette }) => palette.gray[50]}
+                          />
+                        </Box>
                       );
                     }
 
                     return (
                       <EditEmojiIconButton
-                        icon={field.value}
+                        icon={iconValue}
                         disabled={isReadonly}
                         onChange={(updatedIcon) => field.onChange(updatedIcon)}
                         defaultIcon={
diff --git a/apps/hash-frontend/src/pages/shared/graph-visualizer/graph-container/graph-data-loader.tsx b/apps/hash-frontend/src/pages/shared/graph-visualizer/graph-container/graph-data-loader.tsx
index 5e13f8aaae2..8675a919f65 100644
--- a/apps/hash-frontend/src/pages/shared/graph-visualizer/graph-container/graph-data-loader.tsx
+++ b/apps/hash-frontend/src/pages/shared/graph-visualizer/graph-container/graph-data-loader.tsx
@@ -47,6 +47,10 @@ export const GraphDataLoader = memo(({ edges, nodes }: GraphLoaderProps) => {
         !!node.icon?.startsWith("https://") ||
         node.icon?.startsWith("/");
 
+      const imageUrl = node.icon?.startsWith("/")
+        ? new URL(node.icon, window.location.origin).href
+        : node.icon;
+
       graph.addNode(node.nodeId, {
         borderColor: node.borderColor ?? node.color,
         /**
@@ -58,7 +62,7 @@ export const GraphDataLoader = memo(({ edges, nodes }: GraphLoaderProps) => {
         x: index % 20,
         y: Math.floor(index / 20),
         iconColor: customColors.gray[10],
-        image: node.icon,
+        image: imageUrl,
         label: node.label,
         nodeId: node.nodeId,
         nodeTypeId: node.nodeTypeId,