diff --git a/apps/hash-frontend/src/components/block-loader/block-loader.tsx b/apps/hash-frontend/src/components/block-loader/block-loader.tsx
index e2cd7a9f22c..7e7877cb68b 100644
--- a/apps/hash-frontend/src/components/block-loader/block-loader.tsx
+++ b/apps/hash-frontend/src/components/block-loader/block-loader.tsx
@@ -178,7 +178,9 @@ export const BlockLoader: FunctionComponent<BlockLoaderProps> = ({
          * The traversal depths will not be accurate, because the actual traversal was rooted at the block collection.
          * This data is only used briefly – we fetch the block's subgraph from the API further on this effect.
          */
-        const latestEditionId = Object.keys(entityEditionMap).sort().pop()!;
+        const latestEditionId = Object.keys(entityEditionMap)
+          .toSorted()
+          .at(-1)!;
         subgraphToRewrite = {
           ...blockCollectionSubgraph,
           roots: [
@@ -231,8 +233,8 @@ export const BlockLoader: FunctionComponent<BlockLoaderProps> = ({
        *    doing so only for the latest edition is an optimization which assumes blocks only care about the latest value.
        */
       const latestSubgraphEditionTimestamp = Object.keys(entityOrTypeEditionMap)
-        .sort()
-        .pop() as EntityRevisionId;
+        .toSorted()
+        .at(-1) as EntityRevisionId;
 
       /**
        * Check if we have a version of this entity in the local store, if provided, and if it's newer than in the subgraph.
diff --git a/apps/hash-frontend/src/components/grid/utils.ts b/apps/hash-frontend/src/components/grid/utils.ts
index 42919edd5af..38bb4d8d23d 100644
--- a/apps/hash-frontend/src/components/grid/utils.ts
+++ b/apps/hash-frontend/src/components/grid/utils.ts
@@ -18,7 +18,7 @@ export const getYCenter = (
  * @returns cell horizontal padding
  */
 export const getCellHorizontalPadding = (atFirstColumn?: boolean) =>
-  atFirstColumn ? 36 : 22;
+  atFirstColumn ? 42 : 22;
 
 export type BlankCell = CustomCell<{ kind: "blank-cell" }>;
 
diff --git a/apps/hash-frontend/src/components/grid/utils/draw-cell-fade-out-gradient.ts b/apps/hash-frontend/src/components/grid/utils/draw-cell-fade-out-gradient.ts
index a6bb0811b14..23a585b0700 100644
--- a/apps/hash-frontend/src/components/grid/utils/draw-cell-fade-out-gradient.ts
+++ b/apps/hash-frontend/src/components/grid/utils/draw-cell-fade-out-gradient.ts
@@ -26,7 +26,7 @@ export const drawCellFadeOutGradient = (
     ctx.fillRect(rectLeft, rect.y, extraWidth, rect.height);
   }
 
-  const grdWidth = 50;
+  const grdWidth = 20;
   const grdLeft = rectLeft - grdWidth;
   const grd = ctx.createLinearGradient(rectLeft - grdWidth, 0, rectLeft, 0);
   grd.addColorStop(0, "#ffffff00");
diff --git a/apps/hash-frontend/src/components/grid/utils/draw-chip-with-icon.ts b/apps/hash-frontend/src/components/grid/utils/draw-chip-with-icon.ts
index 4bd1acc9a52..1e0e63236e8 100644
--- a/apps/hash-frontend/src/components/grid/utils/draw-chip-with-icon.ts
+++ b/apps/hash-frontend/src/components/grid/utils/draw-chip-with-icon.ts
@@ -9,6 +9,63 @@ import { getYCenter } from "../utils";
 import type { CustomIcon } from "./custom-grid-icons";
 import { drawChip } from "./draw-chip";
 
+const filledIconCanvasCache: {
+  [originalUrl: string]: {
+    [fillColor: string]: HTMLCanvasElement;
+  };
+} = {};
+
+/**
+ * In order to fill SVGs with a new color, we draw them on an off-screen canvas,
+ * and fill the non-transparent parts of the image with the desired color.
+ */
+const getFilledCanvas = ({
+  fill,
+  iconUrl,
+  image,
+}: {
+  fill: string;
+  iconUrl: string;
+  image: HTMLImageElement | ImageBitmap;
+}): HTMLImageElement | ImageBitmap | HTMLCanvasElement => {
+  if (!iconUrl.endsWith(".svg")) {
+    return image;
+  }
+
+  const cachedCanvas = filledIconCanvasCache[iconUrl]?.[fill];
+
+  if (cachedCanvas) {
+    return cachedCanvas;
+  }
+
+  const offScreenCanvas = document.createElement("canvas");
+  const offScreenContext = offScreenCanvas.getContext("2d");
+
+  if (!offScreenContext) {
+    throw new Error("Could not create off-screen canvas");
+  }
+
+  offScreenCanvas.width = image.width;
+  offScreenCanvas.height = image.height;
+
+  // Draw the image onto the off-screen canvas
+  offScreenContext.drawImage(image, 0, 0);
+
+  offScreenContext.globalCompositeOperation = "source-in";
+  offScreenContext.fillStyle = fill;
+  offScreenContext.fillRect(
+    0,
+    0,
+    offScreenCanvas.width,
+    offScreenCanvas.height,
+  );
+
+  filledIconCanvasCache[iconUrl] ??= {};
+  filledIconCanvasCache[iconUrl][fill] = offScreenCanvas;
+
+  return offScreenCanvas;
+};
+
 const drawClippedImage = ({
   ctx,
   height,
@@ -71,6 +128,21 @@ const drawClippedImage = ({
   return width;
 };
 
+export type DrawChipWithIconProps = {
+  args: DrawArgs<CustomCell>;
+  icon?:
+    | {
+        inbuiltIcon: CustomIcon;
+      }
+    | { imageSrc: string }
+    | { entityTypeIcon: string };
+  iconFill?: string;
+  text: string;
+  left: number;
+  color: ChipCellColor;
+  variant?: ChipCellVariant;
+};
+
 /**
  * @param args draw args of cell
  * @param text text content of chip
@@ -84,26 +156,18 @@ const drawClippedImage = ({
  */
 export const drawChipWithIcon = ({
   args,
+  icon,
+  iconFill,
   text,
-  icon = "bpAsterisk",
-  imageSrc,
   left,
   color,
   variant,
-}: {
-  args: DrawArgs<CustomCell>;
-  text: string;
-  icon?: CustomIcon;
-  imageSrc?: string;
-  left: number;
-  color: ChipCellColor;
-  variant?: ChipCellVariant;
-}) => {
+}: DrawChipWithIconProps) => {
   const { ctx, theme, imageLoader, col, row } = args;
   const yCenter = getYCenter(args);
 
   const paddingX = 12;
-  const iconHeight = imageSrc ? 24 : 12;
+  const iconHeight = icon && "imageSrc" in icon ? 24 : 12;
   const gap = 8;
 
   const iconLeft = left + paddingX;
@@ -113,18 +177,22 @@ export const drawChipWithIcon = ({
 
   const iconTop = yCenter - iconHeight / 2;
 
-  const { bgColor, borderColor, iconColor, textColor } = getChipColors(
-    color,
-    variant,
-  );
+  const {
+    bgColor,
+    borderColor,
+    iconColor: defaultColor,
+    textColor,
+  } = getChipColors(color, variant);
+
+  const iconColor = iconFill ?? defaultColor;
 
   let chipWidth = iconHeight + gap + textWidth + 2 * paddingX;
 
   let chipHeight;
   let chipTop;
 
-  if (imageSrc) {
-    const image = imageLoader.loadOrGetImage(imageSrc, col, row);
+  if (icon && "imageSrc" in icon) {
+    const image = imageLoader.loadOrGetImage(icon.imageSrc, col, row);
 
     if (image) {
       const maxWidth = 80;
@@ -154,7 +222,7 @@ export const drawChipWithIcon = ({
         width,
       });
     } else {
-      throw new Error(`Image not loaded: ${imageSrc}`);
+      throw new Error(`Image not loaded: ${icon.imageSrc}`);
     }
   } else {
     ({ height: chipHeight, top: chipTop } = drawChip(
@@ -165,15 +233,62 @@ export const drawChipWithIcon = ({
       borderColor,
     ));
 
-    args.spriteManager.drawSprite(
-      icon,
-      "normal",
-      ctx,
-      iconLeft,
-      iconTop,
-      iconHeight,
-      { ...theme, fgIconHeader: iconColor },
-    );
+    if (icon && "inbuiltIcon" in icon) {
+      args.spriteManager.drawSprite(
+        icon.inbuiltIcon,
+        "normal",
+        ctx,
+        iconLeft,
+        iconTop,
+        iconHeight,
+        { ...theme, fgIconHeader: iconColor },
+      );
+    } else if (icon && "entityTypeIcon" in icon) {
+      if (icon.entityTypeIcon.match(/\p{Extended_Pictographic}$/u)) {
+        /**
+         * This is an emoji icon
+         */
+        ctx.fillStyle = iconColor;
+        const currentFont = ctx.font;
+        ctx.font = `bold ${iconHeight}px Inter`;
+        ctx.fillText(icon.entityTypeIcon, iconLeft, yCenter);
+        ctx.font = currentFont;
+      } else {
+        let iconUrl;
+        if (icon.entityTypeIcon.startsWith("/")) {
+          iconUrl = new URL(icon.entityTypeIcon, window.location.origin).href;
+        } else if (icon.entityTypeIcon.startsWith("https")) {
+          iconUrl = icon.entityTypeIcon;
+        }
+
+        if (iconUrl) {
+          const image = imageLoader.loadOrGetImage(iconUrl, col, row);
+
+          if (image) {
+            const canvasWithFill = getFilledCanvas({
+              fill: iconColor,
+              iconUrl,
+              image,
+            });
+
+            const aspectRatio = image.width / image.height;
+
+            const width =
+              aspectRatio > 1 ? iconHeight : iconHeight * aspectRatio;
+            const height =
+              aspectRatio > 1 ? iconHeight / aspectRatio : iconHeight;
+
+            ctx.drawImage(
+              canvasWithFill,
+              iconLeft + (iconHeight - width) / 2,
+              iconTop + (iconHeight - height) / 2,
+              width,
+              height,
+            );
+          }
+        }
+      }
+    }
   }
 
   const textLeft = left + chipWidth - paddingX - textWidth;
diff --git a/apps/hash-frontend/src/pages/[shortname].page/pinned-entity-type-tab-contents.tsx b/apps/hash-frontend/src/pages/[shortname].page/pinned-entity-type-tab-contents.tsx
index d199a2fc5f8..b1096ce3af9 100644
--- a/apps/hash-frontend/src/pages/[shortname].page/pinned-entity-type-tab-contents.tsx
+++ b/apps/hash-frontend/src/pages/[shortname].page/pinned-entity-type-tab-contents.tsx
@@ -1,3 +1,4 @@
+import { EntityOrTypeIcon } from "@hashintel/design-system";
 import type { Entity } from "@local/hash-graph-sdk/entity";
 import type { EntityTypeWithMetadata } from "@local/hash-graph-types/ontology";
 import type { OwnedById } from "@local/hash-graph-types/web";
@@ -5,7 +6,10 @@ import { generateEntityLabel } from "@local/hash-isomorphic-utils/generate-entit
 import { systemEntityTypes } from "@local/hash-isomorphic-utils/ontology-type-ids";
 import { includesPageEntityTypeId } from "@local/hash-isomorphic-utils/page-entity-type-ids";
 import type { EntityRootType, Subgraph } from "@local/hash-subgraph";
-import { extractEntityUuidFromEntityId } from "@local/hash-subgraph";
+import {
+  extractEntityUuidFromEntityId,
+  linkEntityTypeUrl,
+} from "@local/hash-subgraph";
 import {
   Box,
   Divider,
@@ -29,12 +33,9 @@ import type { Org, User } from "../../lib/user-and-org";
 import { useEntityTypesContextRequired } from "../../shared/entity-types-context/hooks/use-entity-types-context-required";
 import { ArrowDownAZRegularIcon } from "../../shared/icons/arrow-down-a-z-regular-icon";
 import { ArrowUpZARegularIcon } from "../../shared/icons/arrow-up-a-z-regular-icon";
-import { CanvasIcon } from "../../shared/icons/canvas-icon";
 import { ClockRegularIcon } from "../../shared/icons/clock-regular-icon";
-import { PageLightIcon } from "../../shared/icons/page-light-icon";
 import { PlusRegularIcon } from "../../shared/icons/plus-regular";
 import { Button, Link, MenuItem } from "../../shared/ui";
-import { useEntityIcon } from "../../shared/use-entity-icon";
 import { ProfileSectionHeading } from "../[shortname]/shared/profile-section-heading";
 import { InlineSelect } from "../shared/inline-select";
 import type { ProfilePageTab } from "./util";
@@ -59,20 +60,6 @@ const EntityRow: FunctionComponent<{
     ? format(updatedAt, "d MMMM yyyy")
     : `${formatDistanceToNowStrict(updatedAt)} ago`;
 
-  const icon = useEntityIcon({
-    entity,
-    entityTypes: entityType ? [entityType] : undefined,
-    pageIcon: entity.metadata.entityTypeIds.includes(
-      systemEntityTypes.canvas.entityTypeId,
-    ) ? (
-      <CanvasIcon
-        sx={{ fontSize: 20, fill: ({ palette }) => palette.gray[40] }}
-      />
-    ) : (
-      <PageLightIcon sx={{ fontSize: 18 }} />
-    ),
-  });
-
   return (
     <Link
       target="_blank"
@@ -90,17 +77,21 @@ const EntityRow: FunctionComponent<{
       }}
     >
       <Box sx={{ padding: 3 }}>
-        <Box
-          display="flex"
-          alignItems="center"
-          columnGap={1.5}
-          sx={{
-            "> svg": {
-              color: ({ palette }) => palette.gray[50],
-            },
-          }}
-        >
-          {icon}
+        <Box display="flex" alignItems="center" columnGap={1.5}>
+          <EntityOrTypeIcon
+            entity={null}
+            icon={entityType?.schema.icon}
+            fontSize={14}
+            fill={({ palette }) => palette.blue[70]}
+            isLink={
+              /**
+               * @todo H-3363 use closed schema to take account of indirectly inherited link status
+               */
+              !!entityType?.schema.allOf?.some(
+                (allOf) => allOf.$ref === linkEntityTypeUrl,
+              )
+            }
+          />
           <Typography component="h2" sx={{ fontWeight: 700, fontSize: 14 }}>
             {label}
           </Typography>
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/edit-entity-slide-over.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/edit-entity-slide-over.tsx
index 5abaf2df701..51aab06ca54 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/edit-entity-slide-over.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/edit-entity-slide-over.tsx
@@ -1,5 +1,9 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { ArrowUpRightRegularIcon, Skeleton } from "@hashintel/design-system";
+import {
+  ArrowUpRightRegularIcon,
+  EntityOrTypeIcon,
+  Skeleton,
+} from "@hashintel/design-system";
 import {
   mergePropertyObjectAndMetadata,
   patchesFromPropertyObjects,
@@ -15,9 +19,10 @@ import {
 import type { EntityRootType, Subgraph } from "@local/hash-subgraph";
 import {
   extractOwnedByIdFromEntityId,
+  linkEntityTypeUrl,
   splitEntityId,
 } from "@local/hash-subgraph";
-import { getRoots } from "@local/hash-subgraph/stdlib";
+import { getEntityTypeById, getRoots } from "@local/hash-subgraph/stdlib";
 import { Box, Drawer, Stack, Typography } from "@mui/material";
 import type { RefObject } from "react";
 import { memo, useCallback, useMemo, useState } from "react";
@@ -357,6 +362,28 @@ const EditEntitySlideOver = memo(
       [incompleteOnEntityClick, slideContainerRef],
     );
 
+    /**
+     * @todo H-3363 use the closed schema to get the first icon
+     */
+    const entityTypes = useMemo(
+      () =>
+        entity && localEntitySubgraph
+          ? entity.metadata.entityTypeIds.toSorted().map((entityTypeId) => {
+              const entityType = getEntityTypeById(
+                localEntitySubgraph,
+                entityTypeId,
+              );
+
+              if (!entityType) {
+                throw new Error(`Cannot find entity type ${entityTypeId}`);
+              }
+
+              return entityType;
+            })
+          : [],
+      [entity, localEntitySubgraph],
+    );
+
     return (
       <Drawer
         hideBackdrop
@@ -400,7 +427,26 @@ const EditEntitySlideOver = memo(
             />
             <Stack gap={5} px={6} pb={5} pt={1}>
               <Stack alignItems="center" direction="row">
-                <Typography variant="h2" color="gray.90" fontWeight="bold">
+                <Box sx={{ minWidth: 40 }}>
+                  <EntityOrTypeIcon
+                    entity={entity}
+                    icon={entityTypes[0]?.schema.icon}
+                    // @todo H-3363 use closed schema to take account of indirectly inherited link status
+                    isLink={
+                      !!entityTypes[0]?.schema.allOf?.some(
+                        (allOf) => allOf.$ref === linkEntityTypeUrl,
+                      )
+                    }
+                    fill={({ palette }) => palette.gray[50]}
+                    fontSize={40}
+                  />
+                </Box>
+                <Typography
+                  variant="h2"
+                  color="gray.90"
+                  fontWeight="bold"
+                  ml={2}
+                >
                   {entityLabel}
                 </Typography>
                 {entityOwningShortname && !hideOpenInNew && (
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/incoming-links-section/incoming-links-table.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/incoming-links-section/incoming-links-table.tsx
index 253c105f0d0..d7346421b89 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/incoming-links-section/incoming-links-table.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/incoming-links-section/incoming-links-table.tsx
@@ -1,4 +1,5 @@
 import type { EntityType, VersionedUrl } from "@blockprotocol/type-system";
+import { EntityOrTypeIcon } from "@hashintel/design-system";
 import { typedEntries } from "@local/advanced-types/typed-entries";
 import type { Entity } from "@local/hash-graph-sdk/entity";
 import type { EntityId } from "@local/hash-graph-types/entity";
@@ -139,6 +140,15 @@ const TableRow = memo(({ row }: { row: IncomingLinkRow }) => {
             }
             fontSize={linksTableFontSize}
             label={row.sourceEntityLabel}
+            icon={
+              <EntityOrTypeIcon
+                entity={row.sourceEntity}
+                fontSize={linksTableFontSize}
+                fill={({ palette }) => palette.gray[50]}
+                icon={row.sourceEntityTypes[0]!.icon}
+                isLink={!!row.sourceEntity.linkData}
+              />
+            }
           />
         </PropertiesTooltip>
       </TableCell>
@@ -148,6 +158,15 @@ const TableRow = memo(({ row }: { row: IncomingLinkRow }) => {
             <ValueChip
               key={linkEntityType.$id}
               showInFull
+              icon={
+                <EntityOrTypeIcon
+                  entity={null}
+                  fontSize={linksTableFontSize}
+                  fill={({ palette }) => palette.blue[70]}
+                  icon={linkEntityType.icon}
+                  isLink
+                />
+              }
               type
               sx={{
                 fontSize: linksTableFontSize,
@@ -179,6 +198,16 @@ const TableRow = memo(({ row }: { row: IncomingLinkRow }) => {
             <ValueChip
               key={sourceEntityType.$id}
               type
+              icon={
+                <EntityOrTypeIcon
+                  entity={null}
+                  fontSize={linksTableFontSize}
+                  fill={({ palette }) => palette.blue[70]}
+                  icon={sourceEntityType.icon}
+                  /* @todo H-3363 use closed entity type schema to check link status */
+                  isLink={!!row.sourceEntity.linkData}
+                />
+              }
               sx={{
                 fontSize: linksTableFontSize,
               }}
@@ -196,6 +225,15 @@ const TableRow = memo(({ row }: { row: IncomingLinkRow }) => {
           <ClickableCellChip
             onClick={() => row.onEntityClick(row.linkEntity.entityId)}
             fontSize={linksTableFontSize}
+            icon={
+              <EntityOrTypeIcon
+                entity={row.linkEntity}
+                fontSize={linksTableFontSize}
+                fill={({ palette }) => palette.gray[50]}
+                icon={row.linkEntityTypes[0]!.icon}
+                isLink
+              />
+            }
             label={row.linkEntityLabel}
           />
         </PropertiesTooltip>
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section.tsx
index 9cc577b209b..d5ba68a400c 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section.tsx
@@ -10,7 +10,7 @@ import { Paper, Stack } from "@mui/material";
 import { useState } from "react";
 
 import { Grid } from "../../../../../../components/grid/grid";
-import { renderChipCell } from "../../../../../shared/chip-cell";
+import { createRenderChipCell } from "../../../../../shared/chip-cell";
 import { SectionWrapper } from "../../../../shared/section-wrapper";
 import { LinksSectionEmptyState } from "../../shared/links-section-empty-state";
 import { useEntityEditor } from "../entity-editor-context";
@@ -107,7 +107,7 @@ export const OutgoingLinksSection = ({
               renderLinkCell,
               renderLinkedWithCell,
               renderSummaryChipCell,
-              renderChipCell,
+              createRenderChipCell(),
             ]}
           />
         </Paper>
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/cells/link-cell.ts b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/cells/link-cell.ts
index 62f39805844..7c68ffd8e99 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/cells/link-cell.ts
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/cells/link-cell.ts
@@ -29,7 +29,7 @@ export const renderLinkCell: CustomRenderer<LinkCell> = {
     ctx.font = theme.baseFontStyle;
 
     const yCenter = getYCenter(args);
-    const iconLeft = rect.x + getCellHorizontalPadding(true);
+    const iconLeft = rect.x + getCellHorizontalPadding(false);
 
     const iconSize = 16;
     spriteManager.drawSprite(
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/cells/linked-with-cell.ts b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/cells/linked-with-cell.ts
index 3b45f43e420..525aff0fb64 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/cells/linked-with-cell.ts
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/cells/linked-with-cell.ts
@@ -144,7 +144,10 @@ export const renderLinkedWithCell: CustomRenderer<LinkedWithCell> = {
       const { width: chipWidth } = drawChipWithIcon({
         args,
         color: "white",
-        imageSrc,
+        /**
+         * @todo H-1978 use entity type icon if present in its schema
+         */
+        icon: imageSrc ? { imageSrc } : { inbuiltIcon: "bpAsterisk" },
         text: label,
         left: accumulatedLeft,
       });
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/readonly-outgoing-links-table.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/readonly-outgoing-links-table.tsx
index f87775e033e..3b42af63ae8 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/readonly-outgoing-links-table.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/readonly-outgoing-links-table.tsx
@@ -1,4 +1,5 @@
 import type { EntityType, VersionedUrl } from "@blockprotocol/type-system";
+import { EntityOrTypeIcon } from "@hashintel/design-system";
 import { typedEntries } from "@local/advanced-types/typed-entries";
 import type { Entity } from "@local/hash-graph-sdk/entity";
 import type { EntityId } from "@local/hash-graph-types/entity";
@@ -130,6 +131,16 @@ const TableRow = memo(({ row }: { row: OutgoingLinkRow }) => {
           {row.linkEntityTypes.map((linkEntityType) => (
             <ValueChip
               key={linkEntityType.$id}
+              icon={
+                <EntityOrTypeIcon
+                  entity={null}
+                  fontSize={linksTableFontSize}
+                  fill={({ palette }) => palette.blue[70]}
+                  icon={linkEntityType.icon}
+                  /* @todo H-3363 use closed entity type schema to check link status */
+                  isLink
+                />
+              }
               showInFull
               type
               sx={{
@@ -151,6 +162,15 @@ const TableRow = memo(({ row }: { row: OutgoingLinkRow }) => {
               row.onEntityClick(row.targetEntity.metadata.recordId.entityId)
             }
             fontSize={linksTableFontSize}
+            icon={
+              <EntityOrTypeIcon
+                entity={row.targetEntity}
+                fontSize={linksTableFontSize}
+                fill={({ palette }) => palette.gray[50]}
+                icon={row.targetEntityTypes[0]!.icon}
+                isLink={!!row.targetEntity.linkData}
+              />
+            }
             label={row.targetEntityLabel}
           />
         </PropertiesTooltip>
@@ -160,6 +180,16 @@ const TableRow = memo(({ row }: { row: OutgoingLinkRow }) => {
           {row.targetEntityTypes.map((targetEntityType) => (
             <ValueChip
               key={targetEntityType.$id}
+              icon={
+                <EntityOrTypeIcon
+                  entity={null}
+                  fontSize={linksTableFontSize}
+                  fill={({ palette }) => palette.blue[70]}
+                  icon={targetEntityType.icon}
+                  /* @todo H-3363 use closed entity type schema to check link status */
+                  isLink={!!row.targetEntity.linkData}
+                />
+              }
               type
               sx={{
                 fontSize: linksTableFontSize,
@@ -180,6 +210,15 @@ const TableRow = memo(({ row }: { row: OutgoingLinkRow }) => {
               row.onEntityClick(row.linkEntity.metadata.recordId.entityId)
             }
             fontSize={linksTableFontSize}
+            icon={
+              <EntityOrTypeIcon
+                entity={row.linkEntity}
+                fontSize={linksTableFontSize}
+                fill={({ palette }) => palette.gray[50]}
+                icon={row.linkEntityTypes[0]!.icon}
+                isLink
+              />
+            }
             label={row.linkEntityLabel}
           />
         </PropertiesTooltip>
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/types.ts b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/types.ts
index 3a6cfb33cc1..09b05ed6b20 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/types.ts
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/types.ts
@@ -20,7 +20,6 @@ export type LinkRow = {
   isList: boolean;
   isUploading: boolean;
   expectedEntityTypes: EntityTypeWithMetadata[];
-  expectedEntityTypeTitles: string[];
   linkAndTargetEntities: (LinkAndTargetEntity & {
     // Adding the subgraph we found these in makes it easy to retrieve their type(s), e.g. for labelling
     sourceSubgraph: Subgraph<EntityRootType> | null;
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/use-create-get-cell-content.ts b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/use-create-get-cell-content.ts
index 8c94e6a4462..7a7572a25c3 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/use-create-get-cell-content.ts
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/use-create-get-cell-content.ts
@@ -1,5 +1,7 @@
 import type { Item } from "@glideapps/glide-data-grid";
 import { GridCellKind } from "@glideapps/glide-data-grid";
+import { linkEntityTypeUrl } from "@local/hash-subgraph";
+import { useTheme } from "@mui/material";
 import { useCallback } from "react";
 
 import type { ChipCell } from "../../../../../../shared/chip-cell";
@@ -13,6 +15,8 @@ import type { LinkRow } from "./types";
 export const useCreateGetCellContent = () => {
   const { readonly } = useEntityEditor();
 
+  const theme = useTheme();
+
   const createGetCellContent = useCallback(
     (rows: LinkRow[]) =>
       ([colIndex, rowIndex]: Item):
@@ -32,7 +36,7 @@ export const useCreateGetCellContent = () => {
           throw new Error("columnKey not found");
         }
 
-        const expectsAnything = !row.expectedEntityTypeTitles.length;
+        const expectsAnything = !row.expectedEntityTypes.length;
 
         switch (columnKey) {
           case "linkTitle":
@@ -60,25 +64,42 @@ export const useCreateGetCellContent = () => {
                 readonly,
               },
             };
-          case "expectedEntityTypes":
+          case "expectedEntityTypes": {
+            const expectedEntityTypeTitles = row.expectedEntityTypes.map(
+              (type) => type.schema.title,
+            );
             return {
               kind: GridCellKind.Custom,
               readonly: true,
               allowOverlay: true, // in case we have so many expected types that we need to open on click to see them all
-              copyData: String(row.expectedEntityTypeTitles),
+              copyData: String(expectedEntityTypeTitles.join(", ")),
               data: {
                 kind: "chip-cell",
                 chips: expectsAnything
                   ? [{ text: "Anything" }]
-                  : row.expectedEntityTypeTitles.map((title) => ({
-                      text: title,
+                  : row.expectedEntityTypes.map(({ schema }) => ({
+                      text: schema.title,
+                      icon: schema.icon
+                        ? { entityTypeIcon: schema.icon }
+                        : {
+                            /**
+                             * @todo H-3363 use closed schema to take account of indirect inheritance links
+                             */
+                            inbuiltIcon: schema.allOf?.some(
+                              (allOf) => allOf.$ref === linkEntityTypeUrl,
+                            )
+                              ? "bpLink"
+                              : "bpAsterisk",
+                          },
+                      iconFill: theme.palette.blue[70],
                     })),
                 color: expectsAnything ? "blue" : "white",
               },
             };
+          }
         }
       },
-    [readonly],
+    [readonly, theme],
   );
 
   return createGetCellContent;
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/use-rows.ts b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/use-rows.ts
index e57c02f7acd..4c83040ce55 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/use-rows.ts
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/links-section/outgoing-links-section/use-rows.ts
@@ -158,10 +158,6 @@ export const useRows = () => {
 
           linkAndTargetEntities.push(...additions);
 
-          const expectedEntityTypeTitles = expectedEntityTypes.map(
-            (val) => val.schema.title,
-          );
-
           const isFile = expectedEntityTypes.some(
             (expectedType) =>
               isSpecialEntityTypeLookup?.[expectedType.schema.$id]?.isFile,
@@ -186,7 +182,6 @@ export const useRows = () => {
             isList:
               linkSchema.maxItems === undefined || linkSchema.maxItems > 1,
             expectedEntityTypes,
-            expectedEntityTypeTitles,
             entitySubgraph,
             markLinkAsArchived: markLinkEntityToArchive,
             onEntityClick,
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table.tsx
index 2d80a41dd42..fba5fad4b44 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table.tsx
@@ -3,7 +3,7 @@ import { useMemo, useRef } from "react";
 
 import { Grid } from "../../../../../../components/grid/grid";
 import { useGridTooltip } from "../../../../../../components/grid/utils/use-grid-tooltip";
-import { renderChipCell } from "../../../../../shared/chip-cell";
+import { createRenderChipCell } from "../../../../../shared/chip-cell";
 import { useEntityEditor } from "../entity-editor-context";
 import { renderSummaryChipCell } from "../shared/summary-chip-cell";
 import { createRenderChangeTypeCell } from "./property-table/cells/change-type-cell";
@@ -36,7 +36,7 @@ export const PropertyTable = ({
   const customRenderers = useMemo(
     () => [
       renderValueCell,
-      renderChipCell,
+      createRenderChipCell(),
       createRenderPropertyNameCell(togglePropertyExpand, propertyExpandStatus),
       renderSummaryChipCell,
       createRenderChangeTypeCell(gridRef),
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/change-type-cell.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/change-type-cell.tsx
index ba941bde99c..78786727a12 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/change-type-cell.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/change-type-cell.tsx
@@ -64,7 +64,7 @@ export const createRenderChangeTypeCell = (
           text: currentType.title,
           left: chipLeft,
           color: "blue",
-          icon: editorSpec.gridIcon,
+          icon: { inbuiltIcon: editorSpec.gridIcon },
         });
 
       const { width: chipWidth } = drawTheLeftChip();
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/property-name-cell.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/property-name-cell.tsx
index 9f3012250fe..88cc62aba32 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/property-name-cell.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/property-name-cell.tsx
@@ -40,7 +40,9 @@ export const createRenderPropertyNameCell = (
       } = cell.data.propertyRow;
 
       const yCenter = getYCenter(args);
-      const columnPadding = getCellHorizontalPadding(true);
+      const columnPadding = getCellHorizontalPadding(
+        !!children.length || depth > 0,
+      );
 
       const indentMultiplier = 16;
       const indentWidth = indent * indentMultiplier;
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/use-create-get-cell-content.ts b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/use-create-get-cell-content.ts
index ef841ba6b8a..dae854ded3c 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/use-create-get-cell-content.ts
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/use-create-get-cell-content.ts
@@ -169,7 +169,7 @@ export const useCreateGetCellContent = (
 
                   return {
                     text: type.title,
-                    icon: editorSpec.gridIcon,
+                    icon: { inbuiltIcon: editorSpec.gridIcon },
                     faIconDefinition: { icon: editorSpec.icon },
                   };
                 }),
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/types-section.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/types-section.tsx
index 5fe3277d6b1..793ae6367f8 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/types-section.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/types-section.tsx
@@ -8,6 +8,7 @@ import {
   zeroedGraphResolveDepths,
 } from "@local/hash-isomorphic-utils/graph-queries";
 import type { EntityTypeRootType } from "@local/hash-subgraph";
+import { linkEntityTypeUrl } from "@local/hash-subgraph";
 import { getEntityTypeById, getRoots } from "@local/hash-subgraph/stdlib";
 import { Box, Stack } from "@mui/material";
 import { useMemo, useState } from "react";
@@ -139,6 +140,10 @@ export const TypeButton = ({
   const isNotYetInDb = entity.metadata.recordId.entityId.includes("draft");
   const canChangeTypes = !readonly && !isNotYetInDb;
 
+  const isLink = !!currentEntityType.schema.allOf?.some(
+    (allOf) => allOf.$ref === linkEntityTypeUrl,
+  );
+
   /** @todo H-3363 take account of inherited icons */
   return (
     <>
@@ -146,6 +151,7 @@ export const TypeButton = ({
         disableClick={disableTypeClick}
         LinkComponent={Link}
         icon={currentEntityType.schema.icon}
+        isLink={isLink}
         onDelete={canChangeTypes ? onDeleteClicked : undefined}
         url={entityTypeId}
         title={entityTypeTitle}
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/types-section/entity-type-change-modal.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/types-section/entity-type-change-modal.tsx
index 0969c5afca2..97899a97a67 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/types-section/entity-type-change-modal.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/types-section/entity-type-change-modal.tsx
@@ -1,6 +1,6 @@
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { AlertModal, FontAwesomeIcon } from "@hashintel/design-system";
-import { Box, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useMemo } from "react";
 
 export type EntityTypeChangeDetails = {
@@ -179,7 +179,7 @@ const ModalHeader = ({
   proposedChange: EntityTypeChangeDetails["proposedChange"];
 }) => {
   return (
-    <>
+    <Stack direction="row" alignItems="center" gap={0.6}>
       {proposedChange.type}
       <strong> {proposedChange.entityTypeTitle}</strong>
       {" entity type "}
@@ -187,12 +187,12 @@ const ModalHeader = ({
       {proposedChange.type === "Update" && (
         <>
           <FontAwesomeIcon icon={faArrowRight} sx={{ color: "gray.50" }} />
-          <Box component="span" fontWeight={600} color="gray.90">
+          <Box component="span" fontWeight={700} color="gray.90">
             v{proposedChange.newVersion}
           </Box>
         </>
       )}
-    </>
+    </Stack>
   );
 };
 
diff --git a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-page-wrapper/entity-page-header.tsx b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-page-wrapper/entity-page-header.tsx
index c4fd54bfda2..d36b641d469 100644
--- a/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-page-wrapper/entity-page-header.tsx
+++ b/apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-page-wrapper/entity-page-header.tsx
@@ -1,13 +1,13 @@
-import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@hashintel/design-system";
+import { EntityOrTypeIcon } from "@hashintel/design-system";
 import type { Entity } from "@local/hash-graph-sdk/entity";
 import type { EntityRootType, Subgraph } from "@local/hash-subgraph";
 import { extractDraftIdFromEntityId } from "@local/hash-subgraph";
+import { getEntityTypeById } from "@local/hash-subgraph/stdlib";
 import { Box, Collapse, Stack, Typography } from "@mui/material";
 import { Container } from "@mui/system";
 import { useRouter } from "next/router";
 import type { ReactNode } from "react";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 
 import { NotificationsWithLinksContextProvider } from "../../../../shared/notifications-with-links-context";
 import { TopContextBar } from "../../../../shared/top-context-bar";
@@ -43,6 +43,25 @@ export const EntityPageHeader = ({
 
   const shortname = paramsShortname?.slice(1) ?? activeWorkspace?.shortname;
 
+  /**
+   * @todo H-3363 use the closed schema to get the first icon
+   */
+  const entityTypes = useMemo(
+    () =>
+      entity && entitySubgraph
+        ? entity.metadata.entityTypeIds.toSorted().map((entityTypeId) => {
+            const entityType = getEntityTypeById(entitySubgraph, entityTypeId);
+
+            if (!entityType) {
+              throw new Error(`Cannot find entity type ${entityTypeId}`);
+            }
+
+            return entityType;
+          })
+        : [],
+    [entity, entitySubgraph],
+  );
+
   if (!shortname) {
     throw new Error("Cannot render before workspace is available");
   }
@@ -62,7 +81,15 @@ export const EntityPageHeader = ({
             title: entityLabel,
             href: "#",
             id: "entityId",
-            icon: <FontAwesomeIcon icon={faAsterisk} />,
+            icon: (
+              <EntityOrTypeIcon
+                entity={entity ?? null}
+                icon={entityTypes[0]?.schema.icon}
+                isLink={!!entity?.linkData}
+                fill={({ palette }) => palette.gray[50]}
+                fontSize="inherit"
+              />
+            ),
           },
         ]}
         scrollToTop={() => {}}
@@ -99,8 +126,14 @@ export const EntityPageHeader = ({
             spacing={2}
             sx={{ color: lightTitle ? "gray.50" : "gray.90", marginTop: 2 }}
           >
-            <FontAwesomeIcon icon={faAsterisk} sx={{ fontSize: 40 }} />
-            <Typography variant="h1" fontWeight="bold">
+            <EntityOrTypeIcon
+              entity={entity ?? null}
+              fill={({ palette }) => palette.gray[50]}
+              icon={entityTypes[0]?.schema.icon}
+              isLink={!!entity?.linkData}
+              fontSize={40}
+            />
+            <Typography variant="h1" fontWeight="bold" sx={{ lineHeight: 1 }}>
               {entityLabel}
             </Typography>
           </Stack>
diff --git a/apps/hash-frontend/src/pages/actions.page/draft-entity/draft-entity-type.tsx b/apps/hash-frontend/src/pages/actions.page/draft-entity/draft-entity-type.tsx
index e1c505bcf02..4a9f01127f3 100644
--- a/apps/hash-frontend/src/pages/actions.page/draft-entity/draft-entity-type.tsx
+++ b/apps/hash-frontend/src/pages/actions.page/draft-entity/draft-entity-type.tsx
@@ -1,9 +1,7 @@
-import {
-  ArrowUpRegularIcon,
-  AsteriskRegularIcon,
-} from "@hashintel/design-system";
+import { ArrowUpRegularIcon, EntityOrTypeIcon } from "@hashintel/design-system";
 import type { Entity } from "@local/hash-graph-sdk/entity";
 import type { EntityRootType, Subgraph } from "@local/hash-subgraph";
+import { linkEntityTypeUrl } from "@local/hash-subgraph";
 import { getEntityTypeById } from "@local/hash-subgraph/stdlib";
 import { Box, Typography } from "@mui/material";
 import type { FunctionComponent } from "react";
@@ -79,16 +77,20 @@ export const DraftEntityType: FunctionComponent<{
         }}
       >
         <Typography sx={{ fontWeight: 500, fontSize: 12 }}>
-          {entityType.schema.icon ?? (
-            <AsteriskRegularIcon
-              sx={{
-                fontSize: 12,
-                color: ({ palette }) => palette.blue[70],
-                position: "relative",
-                top: 1,
-              }}
-            />
-          )}{" "}
+          <EntityOrTypeIcon
+            entity={null}
+            fill={({ palette }) => palette.gray[50]}
+            fontSize={12}
+            icon={entityType.schema.icon}
+            isLink={
+              /**
+               * @todo H-3363 use closed schema to take account of indirectly inherited link status
+               */
+              !!entityType.schema.allOf?.some(
+                (allOf) => allOf.$ref === linkEntityTypeUrl,
+              )
+            }
+          />
           {entityType.schema.title}
         </Typography>
       </Box>
diff --git a/apps/hash-frontend/src/pages/entities.page.tsx b/apps/hash-frontend/src/pages/entities.page.tsx
index 41743f497f9..7f7c2219cf3 100644
--- a/apps/hash-frontend/src/pages/entities.page.tsx
+++ b/apps/hash-frontend/src/pages/entities.page.tsx
@@ -2,6 +2,7 @@ import type { VersionedUrl } from "@blockprotocol/type-system";
 import { extractVersion } from "@blockprotocol/type-system";
 import {
   AsteriskRegularIcon,
+  EntityOrTypeIcon,
   EyeIconSolid,
   PenToSquareIconSolid,
 } from "@hashintel/design-system";
@@ -9,6 +10,7 @@ import type { EntityTypeWithMetadata } from "@local/hash-graph-types/ontology";
 import { isBaseUrl } from "@local/hash-graph-types/ontology";
 import { systemEntityTypes } from "@local/hash-isomorphic-utils/ontology-type-ids";
 import { pluralize } from "@local/hash-isomorphic-utils/pluralize";
+import { linkEntityTypeUrl } from "@local/hash-subgraph";
 import { extractBaseUrl } from "@local/hash-subgraph/type-system-patch";
 import type { SxProps, Theme } from "@mui/material";
 import {
@@ -32,7 +34,6 @@ import { useEntityTypeEntitiesContextValue } from "../shared/entity-type-entitie
 import { useLatestEntityTypesOptional } from "../shared/entity-types-context/hooks";
 import { useEntityTypesContextRequired } from "../shared/entity-types-context/hooks/use-entity-types-context-required";
 import { generateLinkParameters } from "../shared/generate-link-parameters";
-import { AsteriskLightIcon } from "../shared/icons/asterisk-light-icon";
 import { CanvasNewIcon } from "../shared/icons/canvas-new-icon";
 import { FileCirclePlusRegularIcon } from "../shared/icons/file-circle-plus-regular-icon";
 import { FilesLightIcon } from "../shared/icons/files-light-icon";
@@ -265,7 +266,20 @@ const EntitiesPage: NextPageWithLayout = () => {
         icon: isViewAllPagesPage ? (
           <FilesRegularIcon />
         ) : (
-          <AsteriskRegularIcon />
+          <EntityOrTypeIcon
+            entity={null}
+            fill={({ palette }) => palette.gray[50]}
+            fontSize="inherit"
+            icon={entityType.schema.icon}
+            isLink={
+              /**
+               * @todo H-3363 use closed schema to take account of indirectly inherited link status
+               */
+              !!entityType.schema.allOf?.some(
+                (allOf) => allOf.$ref === linkEntityTypeUrl,
+              )
+            }
+          />
         ),
       });
     }
@@ -293,26 +307,29 @@ const EntitiesPage: NextPageWithLayout = () => {
       >
         <Container sx={{ maxWidth }}>
           <Stack direction="row" justifyContent="space-between">
-            <Typography variant="h1" fontWeight="bold" my={3}>
-              <Box
-                display="inline-flex"
-                sx={({ palette }) => ({
-                  svg: {
-                    fontSize: 40,
-                    mr: 2,
-                    color: palette.gray[70],
-                    verticalAlign: "middle",
-                  },
-                })}
-              >
-                {isViewAllPagesPage ? (
-                  <FilesLightIcon />
-                ) : (
-                  <AsteriskLightIcon />
-                )}
-              </Box>
-              {pageTitle}
-            </Typography>
+            <Stack direction="row" alignItems="center" gap={2} my={3}>
+              {isViewAllPagesPage ? (
+                <FilesLightIcon />
+              ) : (
+                <EntityOrTypeIcon
+                  entity={null}
+                  fill={({ palette }) => palette.gray[70]}
+                  fontSize={40}
+                  icon={entityType?.schema.icon}
+                  isLink={
+                    /**
+                     * @todo H-3363 use closed schema to take account of indirectly inherited link status
+                     */
+                    !!entityType?.schema.allOf?.some(
+                      (allOf) => allOf.$ref === linkEntityTypeUrl,
+                    )
+                  }
+                />
+              )}
+              <Typography variant="h1" fontWeight="bold" my={3}>
+                {pageTitle}
+              </Typography>
+            </Stack>
             {entityType && (
               <Button
                 href={generateLinkParameters(entityType.schema.$id).href}
@@ -351,7 +368,6 @@ const EntitiesPage: NextPageWithLayout = () => {
         <EntityTypeEntitiesContext.Provider value={entityTypeEntitiesValue}>
           <EntitiesTable
             hideColumns={entityTypeId ? ["entityTypeVersion"] : []}
-            hidePropertiesColumns
           />
         </EntityTypeEntitiesContext.Provider>
       </Container>
diff --git a/apps/hash-frontend/src/pages/shared/block-collection/mention-view/mention-display.tsx b/apps/hash-frontend/src/pages/shared/block-collection/mention-view/mention-display.tsx
index 739b9197775..d4fcc142a98 100644
--- a/apps/hash-frontend/src/pages/shared/block-collection/mention-view/mention-display.tsx
+++ b/apps/hash-frontend/src/pages/shared/block-collection/mention-view/mention-display.tsx
@@ -1,3 +1,4 @@
+import { EntityOrTypeIcon } from "@hashintel/design-system";
 import { generateEntityLabel } from "@local/hash-isomorphic-utils/generate-entity-label";
 import { zeroedGraphResolveDepths } from "@local/hash-isomorphic-utils/graph-queries";
 import { systemEntityTypes } from "@local/hash-isomorphic-utils/ontology-type-ids";
@@ -252,14 +253,15 @@ export const MentionDisplay: FunctionComponent<MentionDisplayProps> = ({
       {loading ? (
         "Loading..."
       ) : (
-        <>
-          {["user", "page", "entity"].includes(mention.kind) ? (
-            <Box component="span" marginRight={0.5}>
-              {entityIcon}
-            </Box>
-          ) : null}
-          {title}
-        </>
+        <Box component="span" marginRight={0.5}>
+          <EntityOrTypeIcon
+            entity={entity ?? null}
+            icon={entityIcon}
+            fill={({ palette }) => palette.gray[50]}
+            fontSize={12}
+            isLink={!!entity?.linkData}
+          />
+        </Box>
       )}
     </Box>
   );
diff --git a/apps/hash-frontend/src/pages/shared/block-collection/shared/mention-suggester/mention-suggester-entity.tsx b/apps/hash-frontend/src/pages/shared/block-collection/shared/mention-suggester/mention-suggester-entity.tsx
index d2151298131..2bea435a020 100644
--- a/apps/hash-frontend/src/pages/shared/block-collection/shared/mention-suggester/mention-suggester-entity.tsx
+++ b/apps/hash-frontend/src/pages/shared/block-collection/shared/mention-suggester/mention-suggester-entity.tsx
@@ -1,5 +1,9 @@
 import type { EntityPropertyValue } from "@blockprotocol/graph";
-import { AsteriskRegularIcon, IconButton } from "@hashintel/design-system";
+import {
+  AsteriskRegularIcon,
+  EntityOrTypeIcon,
+  IconButton,
+} from "@hashintel/design-system";
 import type { Entity } from "@local/hash-graph-sdk/entity";
 import type {
   EntityTypeWithMetadata,
@@ -127,7 +131,15 @@ export const MentionSuggesterEntity = forwardRef<
     return (
       <>
         <ListItemButton ref={buttonRef} {...listItemButtonProps}>
-          <ListItemIcon sx={{ minWidth: "unset" }}>{entityIcon}</ListItemIcon>
+          <ListItemIcon sx={{ minWidth: "unset" }}>
+            <EntityOrTypeIcon
+              entity={entity}
+              fontSize={14}
+              isLink={!!entity.linkData}
+              icon={entityIcon}
+              fill={({ palette }) => palette.gray[50]}
+            />
+          </ListItemIcon>
           <ListItemPrimaryText>
             {generateEntityLabel(entitiesSubgraph, entity)}
           </ListItemPrimaryText>
diff --git a/apps/hash-frontend/src/pages/shared/chip-cell.tsx b/apps/hash-frontend/src/pages/shared/chip-cell.tsx
index 3015c2988b0..de66de5864b 100644
--- a/apps/hash-frontend/src/pages/shared/chip-cell.tsx
+++ b/apps/hash-frontend/src/pages/shared/chip-cell.tsx
@@ -7,8 +7,9 @@ import { customColors } from "@hashintel/design-system/theme";
 import { generateUuid } from "@local/hash-isomorphic-utils/generate-uuid";
 import { Box } from "@mui/material";
 
-import type { CustomIcon } from "../../components/grid/utils/custom-grid-icons";
+import { getCellHorizontalPadding } from "../../components/grid/utils";
 import { drawCellFadeOutGradient } from "../../components/grid/utils/draw-cell-fade-out-gradient";
+import type { DrawChipWithIconProps } from "../../components/grid/utils/draw-chip-with-icon";
 import { drawChipWithIcon } from "../../components/grid/utils/draw-chip-with-icon";
 import { InteractableManager } from "../../components/grid/utils/interactable-manager";
 import type { Interactable } from "../../components/grid/utils/interactable-manager/types";
@@ -20,7 +21,8 @@ export interface ChipCellProps {
   readonly kind: "chip-cell";
   chips: {
     text: string;
-    icon?: CustomIcon;
+    icon?: DrawChipWithIconProps["icon"];
+    iconFill?: DrawChipWithIconProps["iconFill"];
     onClick?: () => void;
     faIconDefinition?: Pick<IconDefinition, "icon">;
   }[];
@@ -67,47 +69,77 @@ export const getChipColors = (
   }
 };
 
-export const renderChipCell: CustomRenderer<ChipCell> = {
+export const createRenderChipCell = (params?: {
+  firstColumnLeftPadding?: number;
+}): CustomRenderer<ChipCell> => ({
   kind: GridCellKind.Custom,
   isMatch: (cell: CustomCell): cell is ChipCell =>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (cell.data as any).kind === "chip-cell",
   draw: (args, cell) => {
-    const { theme, rect } = args;
+    const { theme, rect, ctx } = args;
     const { chips, color = "gray", variant } = cell.data;
 
     const chipGap = 8;
-    let chipLeft = rect.x + theme.cellHorizontalPadding;
+
+    const columnPadding =
+      typeof params?.firstColumnLeftPadding !== "undefined" && args.col === 1
+        ? params.firstColumnLeftPadding
+        : getCellHorizontalPadding();
+
+    let chipLeft = rect.x + columnPadding;
 
     const interactables: Interactable[] = [];
 
     for (let i = 0; i < chips.length; i++) {
-      const { icon, text = "", onClick } = chips[i] ?? {};
+      const { icon, iconFill, text = "", onClick } = chips[i] ?? {};
+
       const { width, height, top } = drawChipWithIcon({
         args,
         color,
         text,
         left: chipLeft,
         icon,
+        iconFill,
         variant,
       });
 
       if (onClick) {
+        const arrowSpacing = 4;
+        const arrowLeft = chipLeft + width + arrowSpacing;
+        const arrowSize = 12;
+
+        args.spriteManager.drawSprite(
+          "arrowUpRightRegular",
+          "normal",
+          ctx,
+          arrowLeft,
+          top + 6,
+          12,
+          {
+            ...theme,
+            bgIconHeader: "white",
+            fgIconHeader: customColors.blue[70],
+          },
+        );
+
         interactables.push(
           InteractableManager.createCellInteractable(args, {
             id: generateUuid(),
             pos: {
               left: chipLeft,
-              right: chipLeft + width,
+              right: chipLeft + width + arrowSize + arrowSpacing,
               top,
               bottom: top + height,
             },
             onClick,
           }),
         );
+
+        chipLeft += arrowSpacing + arrowSize;
       }
 
-      chipLeft += width + chipGap;
+      chipLeft += chipGap + width;
     }
 
     InteractableManager.setInteractablesForCell(args, interactables);
@@ -147,4 +179,4 @@ export const renderChipCell: CustomRenderer<ChipCell> = {
       },
     };
   },
-};
+});
diff --git a/apps/hash-frontend/src/pages/shared/clickable-cell-chip.tsx b/apps/hash-frontend/src/pages/shared/clickable-cell-chip.tsx
index adb537b5998..3ede5a0579b 100644
--- a/apps/hash-frontend/src/pages/shared/clickable-cell-chip.tsx
+++ b/apps/hash-frontend/src/pages/shared/clickable-cell-chip.tsx
@@ -1,14 +1,17 @@
 import { ArrowUpRightIcon } from "@hashintel/design-system";
 import { Box } from "@mui/material";
+import type { ReactElement } from "react";
 
 import { ValueChip } from "./value-chip";
 
 export const ClickableCellChip = ({
   fontSize,
+  icon,
   label,
   onClick,
 }: {
   fontSize: number;
+  icon?: ReactElement;
   label: string;
   onClick: () => void;
 }) => {
@@ -28,6 +31,7 @@ export const ClickableCellChip = ({
       }}
     >
       <ValueChip
+        icon={icon}
         sx={{
           fontSize,
           fontWeight: 500,
diff --git a/apps/hash-frontend/src/pages/shared/entities-table.tsx b/apps/hash-frontend/src/pages/shared/entities-table.tsx
index e7c279f24ed..f5bf4de2381 100644
--- a/apps/hash-frontend/src/pages/shared/entities-table.tsx
+++ b/apps/hash-frontend/src/pages/shared/entities-table.tsx
@@ -50,7 +50,7 @@ import type {
 } from "../[shortname]/entities/[entity-uuid].page/entity-editor";
 import { useAuthenticatedUser } from "./auth-info-context";
 import type { ChipCellProps } from "./chip-cell";
-import { renderChipCell } from "./chip-cell";
+import { createRenderChipCell } from "./chip-cell";
 import { GridView } from "./entities-table/grid-view";
 import type { TextIconCell } from "./entities-table/text-icon-cell";
 import { createRenderTextIconCell } from "./entities-table/text-icon-cell";
@@ -96,6 +96,8 @@ const allFileEntityTypeBaseUrl = allFileEntityTypeOntologyIds.map(
 
 const noneString = "none";
 
+const firstColumnLeftPadding = 16;
+
 export const EntitiesTable: FunctionComponent<{
   customColumns?: CustomColumn[];
   defaultFilter?: FilterState;
@@ -359,20 +361,33 @@ export const EntitiesTable: FunctionComponent<{
               copyData: row.entityLabel,
               cursor: "pointer",
               data: {
-                kind: "text-icon-cell",
-                icon: "bpAsterisk",
-                value: row.entityLabel,
-                onClick: () => {
-                  if (isViewingOnlyPages) {
-                    void router.push(
-                      `/${row.web}/${extractEntityUuidFromEntityId(
-                        row.entityId,
-                      )}`,
-                    );
-                  } else {
-                    handleEntityClick(row.entityId);
-                  }
-                },
+                kind: "chip-cell",
+                chips: [
+                  {
+                    text: row.entityLabel,
+                    icon: row.entityIcon
+                      ? { entityTypeIcon: row.entityIcon }
+                      : {
+                          inbuiltIcon: row.sourceEntity
+                            ? "bpLink"
+                            : "bpAsterisk",
+                        },
+                    iconFill: theme.palette.gray[50],
+                    onClick: () => {
+                      if (isViewingOnlyPages) {
+                        void router.push(
+                          `/${row.web}/${extractEntityUuidFromEntityId(
+                            row.entityId,
+                          )}`,
+                        );
+                      } else {
+                        handleEntityClick(row.entityId);
+                      }
+                    },
+                  },
+                ],
+                color: "white",
+                variant: "outlined",
               },
             };
           } else if (columnId === "entityTypes") {
@@ -386,20 +401,20 @@ export const EntitiesTable: FunctionComponent<{
                 kind: "chip-cell",
                 chips: row.entityTypes.map((value) => ({
                   text: value.title,
-                  /**
-                   * @todo H-1978: support custom icons in cell renderers, including URLs to SVGs, and emojis
-                   */
-                  icon: undefined,
-                  onClick: () => {
-                    if (!disableTypeClick) {
-                      setSelectedEntityType({
-                        entityTypeId: value.entityTypeId,
-                      });
-                    }
-                  },
+                  icon: value.icon
+                    ? { entityTypeIcon: value.icon }
+                    : { inbuiltIcon: value.isLink ? "bpLink" : "bpAsterisk" },
+                  iconFill: theme.palette.blue[70],
+                  onClick: disableTypeClick
+                    ? undefined
+                    : () => {
+                        setSelectedEntityType({
+                          entityTypeId: value.entityTypeId,
+                        });
+                      },
                 })),
-                color: "gray",
-                variant: "filled",
+                color: "white",
+                variant: "outlined",
               } satisfies ChipCellProps,
             };
           } else if (columnId === "webId") {
@@ -447,12 +462,23 @@ export const EntitiesTable: FunctionComponent<{
               copyData: entity.label,
               cursor: "pointer",
               data: {
-                kind: "text-icon-cell",
-                icon: "bpAsterisk",
-                value: entity.label,
-                onClick: () => {
-                  handleEntityClick(entity.entityId);
-                },
+                kind: "chip-cell",
+                chips: [
+                  {
+                    icon: entity.icon
+                      ? { entityTypeIcon: entity.icon }
+                      : {
+                          inbuiltIcon: entity.isLink ? "bpLink" : "bpAsterisk",
+                        },
+                    iconFill: theme.palette.gray[50],
+                    text: entity.label,
+                    onClick: () => {
+                      handleEntityClick(entity.entityId);
+                    },
+                  },
+                ],
+                color: "white",
+                variant: "outlined",
               },
             };
           }
@@ -516,13 +542,15 @@ export const EntitiesTable: FunctionComponent<{
                   ? [
                       {
                         text: actorName,
-                        icon: actorIcon,
+                        icon: actorIcon
+                          ? { inbuiltIcon: actorIcon }
+                          : undefined,
                       },
                     ]
                   : [],
                 color: "gray",
                 variant: "filled",
-              },
+              } satisfies ChipCellProps,
             };
           }
 
@@ -1126,7 +1154,7 @@ export const EntitiesTable: FunctionComponent<{
               setSelectedRows(updatedSelectedRows)
             }
             sortRows={sortRows}
-            firstColumnLeftPadding={16}
+            firstColumnLeftPadding={firstColumnLeftPadding}
             height={`
                min(
                  ${maximumTableHeight},
@@ -1137,9 +1165,9 @@ export const EntitiesTable: FunctionComponent<{
                )`}
             createGetCellContent={createGetCellContent}
             customRenderers={[
-              createRenderTextIconCell({ firstColumnLeftPadding: 16 }),
-              createRenderUrlCell({ firstColumnLeftPadding: 16 }),
-              renderChipCell,
+              createRenderTextIconCell({ firstColumnLeftPadding }),
+              createRenderUrlCell({ firstColumnLeftPadding }),
+              createRenderChipCell({ firstColumnLeftPadding }),
             ]}
             freezeColumns={1}
             currentlyDisplayedRowsRef={currentlyDisplayedRowsRef}
diff --git a/apps/hash-frontend/src/pages/shared/entities-table/use-entities-table.tsx b/apps/hash-frontend/src/pages/shared/entities-table/use-entities-table.tsx
index 22a00796d57..bfa6d2ff1d1 100644
--- a/apps/hash-frontend/src/pages/shared/entities-table/use-entities-table.tsx
+++ b/apps/hash-frontend/src/pages/shared/entities-table/use-entities-table.tsx
@@ -21,6 +21,7 @@ import { simplifyProperties } from "@local/hash-isomorphic-utils/simplify-proper
 import { stringifyPropertyValue } from "@local/hash-isomorphic-utils/stringify-property-value";
 import type { PageProperties } from "@local/hash-isomorphic-utils/system-types/shared";
 import type { EntityRootType, Subgraph } from "@local/hash-subgraph";
+import { linkEntityTypeUrl } from "@local/hash-subgraph";
 import {
   getEntityRevision,
   getEntityTypeById,
@@ -94,10 +95,12 @@ export interface TypeEntitiesRow {
   rowId: string;
   entityId: EntityId;
   entity: Entity;
+  entityIcon?: string;
   entityLabel: string;
   entityTypes: {
     entityTypeId: VersionedUrl;
     icon?: string;
+    isLink: boolean;
     title: string;
   }[];
   archived?: boolean;
@@ -108,10 +111,14 @@ export interface TypeEntitiesRow {
   sourceEntity?: {
     entityId: EntityId;
     label: string;
+    icon?: string;
+    isLink: boolean;
   };
   targetEntity?: {
     entityId: EntityId;
     label: string;
+    icon?: string;
+    isLink: boolean;
   };
   web: string;
   properties?: {
@@ -200,9 +207,11 @@ export const useEntitiesTable = (params: {
           const entityType = getEntityTypeById(subgraph, entityTypeId);
 
           if (!entityType) {
-            throw new Error(
-              `Could not find entityType with id ${entityTypeId} in subgraph`,
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Could not find entityType with id ${entityTypeId}, it may be loading...`,
             );
+            return [entityTypeId, []];
           }
 
           return [
@@ -292,6 +301,8 @@ export const useEntitiesTable = (params: {
               entity.metadata.entityTypeIds.includes(type.$id),
             );
 
+            const entityIcon = currentEntitysTypes[0]?.icon;
+
             const { shortname: entityNamespace } = getOwnerForEntity({
               entityId: entity.metadata.recordId.entityId,
             });
@@ -359,9 +370,18 @@ export const useEntitiesTable = (params: {
                   ? generateLinkEntityLabel(subgraph, source)
                   : generateEntityLabel(subgraph, source);
 
+              /**
+               * @todo H-3363 use closed schema to get entity's icon
+               */
+              const sourceEntityType = source
+                ? getEntityTypeById(subgraph, source.metadata.entityTypeIds[0])
+                : undefined;
+
               sourceEntity = {
                 entityId: entity.linkData.leftEntityId,
                 label: sourceEntityLabel,
+                icon: sourceEntityType?.schema.icon,
+                isLink: !!source?.linkData,
               };
 
               const targetEntityLabel = !target
@@ -370,9 +390,18 @@ export const useEntitiesTable = (params: {
                   ? generateLinkEntityLabel(subgraph, target)
                   : generateEntityLabel(subgraph, target);
 
+              /**
+               * @todo H-3363 use closed schema to get entity's icon
+               */
+              const targetEntityType = target
+                ? getEntityTypeById(subgraph, target.metadata.entityTypeIds[0])
+                : undefined;
+
               targetEntity = {
                 entityId: entity.linkData.rightEntityId,
                 label: targetEntityLabel,
+                icon: targetEntityType?.schema.icon,
+                isLink: !!target?.linkData,
               };
             }
 
@@ -381,7 +410,15 @@ export const useEntitiesTable = (params: {
               entityId,
               entity,
               entityLabel,
+              entityIcon,
               entityTypes: currentEntitysTypes.map((entityType) => {
+                /**
+                 * @todo H-3363 use closed schema to take account of indirectly inherited link entity types
+                 */
+                const isLink = !!entityType.allOf?.some(
+                  (allOf) => allOf.$ref === linkEntityTypeUrl,
+                );
+
                 let entityTypeLabel = entityType.title;
                 if (
                   entityTypesWithMultipleVersionsPresent.includes(
@@ -394,6 +431,8 @@ export const useEntitiesTable = (params: {
                 return {
                   title: entityTypeLabel,
                   entityTypeId: entityType.$id,
+                  icon: entityType.icon,
+                  isLink,
                 };
               }),
               web: `@${entityNamespace}`,
diff --git a/apps/hash-frontend/src/pages/shared/entity-selector.tsx b/apps/hash-frontend/src/pages/shared/entity-selector.tsx
index 215ab9076b8..aeee95a6c9d 100644
--- a/apps/hash-frontend/src/pages/shared/entity-selector.tsx
+++ b/apps/hash-frontend/src/pages/shared/entity-selector.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@apollo/client";
+import { mustHaveAtLeastOne } from "@blockprotocol/type-system";
 import type {
   SelectorAutocompleteProps,
   TypeListSelectorDropdownProps,
@@ -20,7 +21,7 @@ import {
   extractDraftIdFromEntityId,
   splitEntityId,
 } from "@local/hash-subgraph";
-import { getRoots } from "@local/hash-subgraph/stdlib";
+import { getEntityTypeById, getRoots } from "@local/hash-subgraph/stdlib";
 import { useMemo, useState } from "react";
 
 import type {
@@ -175,14 +176,32 @@ export const EntitySelector = <Multiple extends boolean>({
       onInputChange={(_, value) => setQuery(value)}
       options={sortedAndFilteredEntities}
       optionToRenderData={(entity) => {
+        /**
+         * @todo H-3363 use the closed schema to get the first icon
+         */
+        const entityTypes = entity.metadata.entityTypeIds
+          .toSorted()
+          .map((entityTypeId) => {
+            const entityType = getEntityTypeById(
+              entitiesSubgraph!,
+              entityTypeId,
+            );
+
+            if (!entityType) {
+              throw new Error(`Cannot find entity type ${entityTypeId}`);
+            }
+
+            return entityType.schema;
+          });
+
         return {
           entityProperties: entity.properties,
           uniqueId: entity.metadata.recordId.entityId,
-          icon: null,
+          icon: entityTypes[0]?.icon ?? null,
           /**
            * @todo update SelectorAutocomplete to show an entity's namespace as well as / instead of its entityTypeId
            * */
-          typeIds: entity.metadata.entityTypeIds,
+          types: mustHaveAtLeastOne(entityTypes),
           title: generateEntityLabel(entitiesSubgraph!, entity),
           draft: !!extractDraftIdFromEntityId(
             entity.metadata.recordId.entityId,
diff --git a/apps/hash-frontend/src/pages/shared/entity-type-page.tsx b/apps/hash-frontend/src/pages/shared/entity-type-page.tsx
index c00c22dd5bb..4a34d4273a3 100644
--- a/apps/hash-frontend/src/pages/shared/entity-type-page.tsx
+++ b/apps/hash-frontend/src/pages/shared/entity-type-page.tsx
@@ -1,11 +1,7 @@
 import type { EntityTypeWithMetadata } from "@blockprotocol/graph";
 import { atLeastOne, extractVersion } from "@blockprotocol/type-system";
 import type { VersionedUrl } from "@blockprotocol/type-system/slim";
-import {
-  EntityTypeIcon,
-  LinkTypeIcon,
-  OntologyChip,
-} from "@hashintel/design-system";
+import { EntityOrTypeIcon, OntologyChip } from "@hashintel/design-system";
 import type { EntityTypeEditorFormData } from "@hashintel/type-editor";
 import {
   EntityTypeFormProvider,
@@ -287,21 +283,15 @@ export const EntityTypePage = ({
                     title: entityType.schema.title,
                     href: "#",
                     id: entityType.schema.$id,
-                    icon:
-                      icon ??
-                      (isLink ? (
-                        <LinkTypeIcon
-                          sx={({ palette }) => ({
-                            stroke: palette.gray[50],
-                          })}
-                        />
-                      ) : (
-                        <EntityTypeIcon
-                          sx={({ palette }) => ({
-                            fill: palette.gray[50],
-                          })}
-                        />
-                      )),
+                    icon: (
+                      <EntityOrTypeIcon
+                        entity={null}
+                        fill={({ palette }) => palette.blue[70]}
+                        fontSize={24}
+                        icon={icon}
+                        isLink={isLink}
+                      />
+                    ),
                   },
                 ]}
                 scrollToTop={() => {}}
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 19655dff2c8..d06ed7226cc 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
@@ -86,28 +86,51 @@ export const EntityTypeHeader = ({
               <Controller
                 control={control}
                 name="icon"
-                render={({ field }) => (
-                  <EditEmojiIconButton
-                    icon={field.value}
-                    disabled={isReadonly}
-                    onChange={(updatedIcon) => field.onChange(updatedIcon)}
-                    defaultIcon={
-                      isLink ? (
-                        <LinkTypeIcon
-                          sx={({ palette }) => ({
-                            stroke: palette.gray[50],
-                          })}
-                        />
-                      ) : (
-                        <EntityTypeIcon
-                          sx={({ palette }) => ({
-                            fill: palette.gray[50],
-                          })}
-                        />
-                      )
-                    }
-                  />
-                )}
+                render={({ field }) => {
+                  const iconImgUrl = field.value?.startsWith("/")
+                    ? new URL(field.value, window.location.origin).href
+                    : field.value;
+
+                  /**
+                   * @todo allow uploading new SVG icons
+                   */
+                  if (iconImgUrl?.startsWith("http")) {
+                    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,
+                        })}
+                      />
+                    );
+                  }
+
+                  return (
+                    <EditEmojiIconButton
+                      icon={field.value}
+                      disabled={isReadonly}
+                      onChange={(updatedIcon) => field.onChange(updatedIcon)}
+                      defaultIcon={
+                        isLink ? (
+                          <LinkTypeIcon
+                            sx={({ palette }) => ({
+                              stroke: palette.gray[50],
+                            })}
+                          />
+                        ) : (
+                          <EntityTypeIcon
+                            sx={({ palette }) => ({
+                              fill: palette.gray[50],
+                            })}
+                          />
+                        )
+                      }
+                    />
+                  );
+                }}
               />
               <Typography variant="h1" fontWeight="bold" marginLeft={2}>
                 {entityTypeSchema.title}
diff --git a/apps/hash-frontend/src/pages/shared/entity-type-page/type-slide-over-stack/type-slide-over-slide.tsx b/apps/hash-frontend/src/pages/shared/entity-type-page/type-slide-over-stack/type-slide-over-slide.tsx
index 89adc14f19c..7bf6e935767 100644
--- a/apps/hash-frontend/src/pages/shared/entity-type-page/type-slide-over-stack/type-slide-over-slide.tsx
+++ b/apps/hash-frontend/src/pages/shared/entity-type-page/type-slide-over-stack/type-slide-over-slide.tsx
@@ -233,7 +233,7 @@ export const TypeSlideOverSlide: FunctionComponent<TypeSlideOverSlideProps> = ({
                   isLink={
                     !!entityTypesContext.isSpecialEntityTypeLookup?.[
                       remoteEntityType.schema.$id
-                    ]?.isFile
+                    ]?.isLink
                   }
                   ontologyChip={
                     <CopyableOntologyChip entityType={remoteEntityType} />
diff --git a/apps/hash-frontend/src/pages/shared/entity-type-selector.tsx b/apps/hash-frontend/src/pages/shared/entity-type-selector.tsx
index 143de697f26..f5659ea9034 100644
--- a/apps/hash-frontend/src/pages/shared/entity-type-selector.tsx
+++ b/apps/hash-frontend/src/pages/shared/entity-type-selector.tsx
@@ -1,10 +1,5 @@
 import type { VersionedUrl } from "@blockprotocol/type-system";
-import {
-  Chip,
-  EntityTypeIcon,
-  LinkTypeIcon,
-  SelectorAutocomplete,
-} from "@hashintel/design-system";
+import { Chip, SelectorAutocomplete } from "@hashintel/design-system";
 import type { EntityTypeWithMetadata } from "@local/hash-graph-types/ontology";
 import type { BoxProps } from "@mui/material";
 import { useMemo, useRef, useState } from "react";
@@ -103,14 +98,8 @@ export const EntityTypeSelector = <Multiple extends boolean = false>({
       }}
       optionToRenderData={({ schema: { $id, title, description, icon } }) => ({
         uniqueId: $id,
-        icon:
-          icon ??
-          (isSpecialEntityTypeLookup?.[$id]?.isLink ? (
-            <LinkTypeIcon />
-          ) : (
-            <EntityTypeIcon />
-          )),
-        typeIds: [$id],
+        icon: icon ?? null,
+        types: [{ $id, title, icon }],
         title,
         description,
       })}
diff --git a/apps/hash-frontend/src/pages/shared/link-label-with-source-and-destination.tsx b/apps/hash-frontend/src/pages/shared/link-label-with-source-and-destination.tsx
index 2abb63d01a4..69237f3085b 100644
--- a/apps/hash-frontend/src/pages/shared/link-label-with-source-and-destination.tsx
+++ b/apps/hash-frontend/src/pages/shared/link-label-with-source-and-destination.tsx
@@ -1,5 +1,8 @@
 import type { EntityPropertyValue } from "@blockprotocol/graph";
-import { EyeSlashIconRegular } from "@hashintel/design-system";
+import {
+  EntityOrTypeIcon,
+  EyeSlashIconRegular,
+} from "@hashintel/design-system";
 import { typedEntries } from "@local/advanced-types/typed-entries";
 import type { Entity, LinkEntity } from "@local/hash-graph-sdk/entity";
 import type { EntityId } from "@local/hash-graph-types/entity";
@@ -28,12 +31,9 @@ import { Fragment, useMemo, useRef } from "react";
 
 import { useGetOwnerForEntity } from "../../components/hooks/use-get-owner-for-entity";
 import { generateLinkParameters } from "../../shared/generate-link-parameters";
-import { LinkRegularIcon } from "../../shared/icons/link-regular-icon";
 import { Link } from "../../shared/ui";
-import { useEntityIcon } from "../../shared/use-entity-icon";
 import { useEntityEditor } from "../[shortname]/entities/[entity-uuid].page/entity-editor/entity-editor-context";
 import { TooltipChip } from "./tooltip-chip";
-import { TypeIcon } from "./type-icon";
 
 const ContentTypography = styled(Typography)(({ theme }) => ({
   fontSize: 14,
@@ -93,7 +93,11 @@ const LeftOrRightEntity: FunctionComponent<{
     });
   }, [entity, subgraph]);
 
-  const icon = useEntityIcon({ entity, entityTypes });
+  /**
+   * @todo H-3363 account for multitype and inheritance here (use closed schema)
+   */
+  const firstTypeIcon = entityTypes?.find((type) => type.schema.icon)?.schema
+    .icon;
 
   const getOwnerForEntity = useGetOwnerForEntity();
 
@@ -137,12 +141,14 @@ const LeftOrRightEntity: FunctionComponent<{
           },
         }}
       >
-        {icon ? (
-          typeof icon === "string" ? (
-            <TypeIcon fontSize={12} icon={icon} />
-          ) : (
-            icon
-          )
+        {entity ? (
+          <EntityOrTypeIcon
+            entity={entity}
+            fontSize={12}
+            icon={firstTypeIcon}
+            isLink={!!entity.linkData}
+            fill={({ palette }) => palette.gray[50]}
+          />
         ) : (
           <EyeSlashIconRegular sx={{ fontSize: 14 }} />
         )}
@@ -361,10 +367,12 @@ const LeftOrRightEntity: FunctionComponent<{
                       <TooltipChip
                         label={rightEntityLabel}
                         icon={
-                          <TypeIcon
-                            fill={theme.palette.gray[30]}
+                          <EntityOrTypeIcon
+                            entity={rightEntity}
+                            fill={theme.palette.gray[50]}
                             fontSize={11}
                             icon={rightEntityEntityType?.schema.icon}
+                            isLink={!!rightEntity.linkData}
                           />
                         }
                         key={rightEntity.metadata.recordId.entityId}
@@ -435,12 +443,14 @@ const LeftOrRightEntity: FunctionComponent<{
 const LinkTypeInner = ({
   amongMultipleTypes,
   linkEntityType,
+  clickable,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   elementRef,
 }: {
   amongMultipleTypes: boolean;
   linkEntityType: EntityTypeWithMetadata;
   elementRef: HTMLDivElement;
+  clickable: boolean;
 }) => (
   <Box
     ref={(el) => {
@@ -448,11 +458,13 @@ const LinkTypeInner = ({
       elementRef = el as HTMLDivElement;
     }}
     sx={{
-      "&:hover": {
-        [`.${typographyClasses.root}, svg`]: {
-          color: ({ palette }) => palette.blue[70],
-        },
-      },
+      "&:hover": clickable
+        ? {
+            [`.${typographyClasses.root}, svg`]: {
+              color: ({ palette }) => palette.blue[70],
+            },
+          }
+        : {},
       background: ({ palette }) =>
         amongMultipleTypes ? palette.common.white : palette.gray[5],
       display: "flex",
@@ -469,16 +481,13 @@ const LinkTypeInner = ({
     }}
   >
     <Box display="flex">
-      {/* @todo H-3363 account for inherited icons, and SVG URL icons */}
-      {linkEntityType.schema.icon ?? (
-        <LinkRegularIcon
-          sx={{
-            color: ({ palette }) => palette.common.black,
-            fontSize: 16,
-            transition: ({ transitions }) => transitions.create("color"),
-          }}
-        />
-      )}
+      <EntityOrTypeIcon
+        entity={null}
+        fontSize={13}
+        isLink
+        fill={({ palette }) => palette.blue[70]}
+        icon={linkEntityType.schema.icon}
+      />
     </Box>
     <ContentTypography>
       {linkEntityType.schema.title}
@@ -602,6 +611,7 @@ export const LinkLabelWithSourceAndDestination: FunctionComponent<{
               <Box>
                 <LinkTypeInner
                   amongMultipleTypes={linkEntityTypes.length > 1}
+                  clickable={false}
                   linkEntityType={linkEntityType}
                   elementRef={linkTypeRefs.current[index]!}
                 />
@@ -614,6 +624,7 @@ export const LinkLabelWithSourceAndDestination: FunctionComponent<{
               >
                 <LinkTypeInner
                   amongMultipleTypes={linkEntityTypes.length > 1}
+                  clickable
                   linkEntityType={linkEntityType}
                   elementRef={linkTypeRefs.current[index]!}
                 />
diff --git a/apps/hash-frontend/src/pages/shared/type-icon.tsx b/apps/hash-frontend/src/pages/shared/type-icon.tsx
deleted file mode 100644
index c49fd011b1c..00000000000
--- a/apps/hash-frontend/src/pages/shared/type-icon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { AsteriskRegularIcon } from "@hashintel/design-system";
-import { Box } from "@mui/material";
-
-export const TypeIcon = ({
-  fill,
-  fontSize,
-  icon,
-}: {
-  fill?: string;
-  fontSize: number;
-  icon?: string | null;
-}) => {
-  if (!icon) {
-    return <AsteriskRegularIcon sx={{ fill, fontSize }} />;
-  }
-  if (
-    icon.startsWith("http://") ||
-    icon.startsWith("https://") ||
-    icon.startsWith("/")
-  ) {
-    return (
-      <Box
-        sx={({ palette }) => ({
-          backgroundColor: fill ?? palette.common.black,
-          "-webkit-mask": `url(${icon}) no-repeat center / contain`,
-          mask: `url(${icon}) no-repeat center / contain`,
-          width: fontSize,
-          height: fontSize,
-        })}
-      />
-    );
-  }
-
-  return icon;
-};
diff --git a/apps/hash-frontend/src/pages/shared/value-chip.tsx b/apps/hash-frontend/src/pages/shared/value-chip.tsx
index e0416710672..89172ae5ca3 100644
--- a/apps/hash-frontend/src/pages/shared/value-chip.tsx
+++ b/apps/hash-frontend/src/pages/shared/value-chip.tsx
@@ -1,14 +1,16 @@
 import type { SxProps, Theme } from "@mui/material";
-import { Stack, Tooltip } from "@mui/material";
-import type { PropsWithChildren } from "react";
+import { Box, Stack, Tooltip } from "@mui/material";
+import type { PropsWithChildren, ReactElement } from "react";
 
 export const ValueChip = ({
   children,
+  icon,
   type,
   showInFull,
   sx,
   tooltip,
 }: PropsWithChildren<{
+  icon?: ReactElement;
   type?: boolean;
   showInFull?: boolean;
   sx?: SxProps<Theme>;
@@ -31,19 +33,29 @@ export const ValueChip = ({
           px: 1.2,
           py: 0.8,
           whiteSpace: "nowrap",
-          ...(showInFull
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {icon && (
+        <Box component="span" sx={{ mr: 0.8, height: 14 }}>
+          {icon}
+        </Box>
+      )}
+      <Box
+        sx={
+          showInFull
             ? {}
             : {
                 display: "block",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 width: "fit-content",
-              }),
-        }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      {children}
+              }
+        }
+      >
+        {children}
+      </Box>
     </Stack>
   </Tooltip>
 );
diff --git a/apps/hash-frontend/src/pages/types/[[...type-kind]].page/types-table.tsx b/apps/hash-frontend/src/pages/types/[[...type-kind]].page/types-table.tsx
index b111efc8049..60626550338 100644
--- a/apps/hash-frontend/src/pages/types/[[...type-kind]].page/types-table.tsx
+++ b/apps/hash-frontend/src/pages/types/[[...type-kind]].page/types-table.tsx
@@ -29,7 +29,6 @@ import { useOrgs } from "../../../components/hooks/use-orgs";
 import { useUsers } from "../../../components/hooks/use-users";
 import { extractOwnedById } from "../../../lib/user-and-org";
 import { useEntityTypesContextRequired } from "../../../shared/entity-types-context/hooks/use-entity-types-context-required";
-import { generateLinkParameters } from "../../../shared/generate-link-parameters";
 import { isTypeArchived } from "../../../shared/is-archived";
 import { HEADER_HEIGHT } from "../../../shared/layout/layout-with-header/page-header";
 import type { FilterState } from "../../../shared/table-header";
@@ -41,7 +40,7 @@ import {
 } from "../../../shared/use-actors";
 import { useAuthenticatedUser } from "../../shared/auth-info-context";
 import type { ChipCell } from "../../shared/chip-cell";
-import { renderChipCell } from "../../shared/chip-cell";
+import { createRenderChipCell } from "../../shared/chip-cell";
 import type { TextIconCell } from "../../shared/entities-table/text-icon-cell";
 import { createRenderTextIconCell } from "../../shared/entities-table/text-icon-cell";
 import { TypeSlideOverStack } from "../../shared/entity-type-page/type-slide-over-stack";
@@ -71,6 +70,7 @@ export type TypesTableRow = {
   kind: "entity-type" | "property-type" | "link-type" | "data-type";
   lastEdited: string;
   lastEditedBy?: MinimalActor;
+  icon?: string;
   typeId: VersionedUrl;
   title: string;
   external: boolean;
@@ -103,6 +103,8 @@ const typesTablesToTitle: Record<TypeTableKind, string> = {
   "data-type": "Data Types",
 };
 
+const firstColumnLeftPadding = 16;
+
 export const TypesTable: FunctionComponent<{
   types?: (
     | EntityTypeWithMetadata
@@ -267,6 +269,7 @@ export const TypesTable: FunctionComponent<{
           rowId: type.schema.$id,
           typeId: type.schema.$id,
           title: type.schema.title,
+          icon: "icon" in type.schema ? type.schema.icon : undefined,
           lastEdited,
           lastEditedBy,
           kind:
@@ -328,6 +331,8 @@ export const TypesTable: FunctionComponent<{
     });
   }, []);
 
+  const theme = useTheme();
+
   const createGetCellContent = useCallback(
     (rows: TypesTableRow[]) =>
       ([colIndex, rowIndex]: Item): TextCell | TextIconCell | ChipCell => {
@@ -344,26 +349,51 @@ export const TypesTable: FunctionComponent<{
         }
 
         switch (column.id) {
-          case "title":
-            return {
-              kind: GridCellKind.Custom,
-              readonly: true,
-              allowOverlay: false,
-              copyData: row.title,
-              cursor: "pointer",
-              data: {
-                kind: "text-icon-cell",
-                icon: "bpAsterisk",
-                value: row.title,
-                onClick: () => {
-                  if (row.kind === "entity-type") {
-                    setSelectedEntityType({ entityTypeId: row.typeId });
-                  } else {
-                    void router.push(generateLinkParameters(row.typeId).href);
-                  }
+          case "title": {
+            if (row.kind === "entity-type" || row.kind === "link-type") {
+              return {
+                kind: GridCellKind.Custom,
+                readonly: true,
+                allowOverlay: false,
+                copyData: row.title,
+                cursor: "pointer",
+                data: {
+                  kind: "chip-cell",
+                  chips: [
+                    {
+                      icon: row.icon
+                        ? { entityTypeIcon: row.icon }
+                        : {
+                            inbuiltIcon:
+                              row.kind === "link-type"
+                                ? "bpLink"
+                                : "bpAsterisk",
+                          },
+                      text: row.title,
+                      onClick: () => {
+                        setSelectedEntityType({ entityTypeId: row.typeId });
+                      },
+                      iconFill: theme.palette.blue[70],
+                    },
+                  ],
+                  color: "white",
+                  variant: "outlined",
                 },
-              },
-            };
+              };
+            } else {
+              return {
+                kind: GridCellKind.Custom,
+                readonly: true,
+                allowOverlay: false,
+                copyData: row.title,
+                data: {
+                  kind: "text-icon-cell",
+                  icon: "bpAsterisk",
+                  value: row.title,
+                },
+              };
+            }
+          }
           case "kind":
             return {
               kind: GridCellKind.Text,
@@ -436,7 +466,9 @@ export const TypesTable: FunctionComponent<{
                   ? [
                       {
                         text: actorName,
-                        icon: actorIcon,
+                        icon: actorIcon
+                          ? { inbuiltIcon: actorIcon }
+                          : undefined,
                       },
                     ]
                   : [],
@@ -447,11 +479,9 @@ export const TypesTable: FunctionComponent<{
           }
         }
       },
-    [typesTableColumns, router],
+    [typesTableColumns, router, theme],
   );
 
-  const theme = useTheme();
-
   const maxTableHeight = `calc(100vh - (${
     HEADER_HEIGHT + TOP_CONTEXT_BAR_HEIGHT + 170 + tableHeaderHeight
   }px + ${theme.spacing(5)}) - ${theme.spacing(5)})`;
@@ -519,7 +549,7 @@ export const TypesTable: FunctionComponent<{
             }
             sortable
             sortRows={sortRows}
-            firstColumnLeftPadding={16}
+            firstColumnLeftPadding={firstColumnLeftPadding}
             createGetCellContent={createGetCellContent}
             // define max height if there are lots of rows
             height={`
@@ -534,8 +564,8 @@ export const TypesTable: FunctionComponent<{
             )
           )`}
             customRenderers={[
-              createRenderTextIconCell({ firstColumnLeftPadding: 16 }),
-              renderChipCell,
+              createRenderTextIconCell({ firstColumnLeftPadding }),
+              createRenderChipCell({ firstColumnLeftPadding }),
             ]}
             freezeColumns={1}
           />
diff --git a/apps/hash-frontend/src/shared/layout/layout-with-sidebar/sidebar/shared/entity-or-type-sidebar-item.tsx b/apps/hash-frontend/src/shared/layout/layout-with-sidebar/sidebar/shared/entity-or-type-sidebar-item.tsx
index 0e5e4cd447c..a84a7177a67 100644
--- a/apps/hash-frontend/src/shared/layout/layout-with-sidebar/sidebar/shared/entity-or-type-sidebar-item.tsx
+++ b/apps/hash-frontend/src/shared/layout/layout-with-sidebar/sidebar/shared/entity-or-type-sidebar-item.tsx
@@ -1,9 +1,5 @@
 import type { EntityType } from "@blockprotocol/type-system";
-import {
-  EntityTypeIcon,
-  IconButton,
-  LinkTypeIcon,
-} from "@hashintel/design-system";
+import { EntityOrTypeIcon, IconButton } from "@hashintel/design-system";
 import { pluralize } from "@local/hash-isomorphic-utils/pluralize";
 import { extractBaseUrl } from "@local/hash-subgraph/type-system-patch";
 import type { BoxProps } from "@mui/material";
@@ -100,7 +96,8 @@ export const EntityOrTypeSidebarItem: FunctionComponent<{
         <Typography
           variant="smallTextLabels"
           sx={{
-            display: "block",
+            alignItems: "center",
+            display: "flex",
             color: ({ palette }) => palette.gray[70],
             fontWeight: 500,
           }}
@@ -114,26 +111,15 @@ export const EntityOrTypeSidebarItem: FunctionComponent<{
               justifyContent: "center",
             }}
           >
-            {icon ??
-              (isLink ? (
-                <LinkTypeIcon
-                  sx={({ palette }) => ({
-                    position: "relative",
-                    top: 2,
-                    fontSize: 16,
-                    stroke: palette.gray[50],
-                  })}
-                />
-              ) : (
-                <EntityTypeIcon
-                  sx={({ palette }) => ({
-                    position: "relative",
-                    top: 2,
-                    fontSize: 16,
-                    fill: palette.gray[50],
-                  })}
-                />
-              ))}
+            <EntityOrTypeIcon
+              entity={null}
+              icon={icon}
+              isLink={!!isLink}
+              fontSize={16}
+              fill={({ palette }) =>
+                variant === "entity-type" ? palette.blue[70] : palette.gray[50]
+              }
+            />
           </Box>
           {title}
         </Typography>
diff --git a/apps/hash-frontend/src/shared/use-entity-icon.tsx b/apps/hash-frontend/src/shared/use-entity-icon.tsx
index ad9d3bb0149..d62c63af92d 100644
--- a/apps/hash-frontend/src/shared/use-entity-icon.tsx
+++ b/apps/hash-frontend/src/shared/use-entity-icon.tsx
@@ -7,7 +7,7 @@ import { includesPageEntityTypeId } from "@local/hash-isomorphic-utils/page-enti
 import { simplifyProperties } from "@local/hash-isomorphic-utils/simplify-properties";
 import type { PageProperties } from "@local/hash-isomorphic-utils/system-types/shared";
 import { Box } from "@mui/material";
-import type { ReactNode } from "react";
+import type { ReactElement } from "react";
 import { useMemo } from "react";
 
 import { CanvasIcon } from "./icons/canvas-icon";
@@ -16,9 +16,9 @@ import { UserIcon } from "./icons/user-icon";
 import { UsersRegularIcon } from "./icons/users-regular-icon";
 
 /**
- * @todo H-2014 support URL icons on entity types and remove these overrides
+ * @todo H-1978 set SVG icons on system entity types and remove these overrides
  */
-export const entityTypeIcons: Record<VersionedUrl, ReactNode> = {
+export const entityTypeIcons: Record<VersionedUrl, ReactElement> = {
   [systemEntityTypes.user.entityTypeId]: <UserIcon sx={{ fontSize: 12 }} />,
   [systemEntityTypes.organization.entityTypeId]: (
     <UsersRegularIcon sx={{ fontSize: 14, position: "relative", top: 1 }} />
diff --git a/libs/@hashintel/design-system/package.json b/libs/@hashintel/design-system/package.json
index 26e46da4268..ec69cc02990 100644
--- a/libs/@hashintel/design-system/package.json
+++ b/libs/@hashintel/design-system/package.json
@@ -45,6 +45,7 @@
     "@blockprotocol/type-system": "0.1.2-canary.0",
     "@fortawesome/free-regular-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@local/hash-isomorphic-utils": "0.0.0-private",
     "clsx": "1.2.1",
     "echarts": "5.5.1",
     "react-loading-skeleton": "3.5.0"
diff --git a/libs/@hashintel/design-system/src/components.ts b/libs/@hashintel/design-system/src/components.ts
index d66cc47b2ee..75e5d40e556 100644
--- a/libs/@hashintel/design-system/src/components.ts
+++ b/libs/@hashintel/design-system/src/components.ts
@@ -7,6 +7,7 @@ export * from "./callout";
 export * from "./chip";
 export * from "./chip-group";
 export * from "./e-chart";
+export * from "./entity-or-type-icon";
 export * from "./fa-icons/icons";
 export * from "./fontawesome-icon";
 export * from "./form-inline";
diff --git a/libs/@hashintel/design-system/src/entity-or-type-icon.tsx b/libs/@hashintel/design-system/src/entity-or-type-icon.tsx
new file mode 100644
index 00000000000..4411054cde9
--- /dev/null
+++ b/libs/@hashintel/design-system/src/entity-or-type-icon.tsx
@@ -0,0 +1,94 @@
+import { AsteriskRegularIcon, LinkTypeIcon } from "@hashintel/design-system";
+// eslint-disable-next-line no-restricted-imports -- TODO fix this to make package publishable again
+import type { Entity } from "@local/hash-graph-sdk/entity";
+// eslint-disable-next-line no-restricted-imports -- TODO fix this to make package publishable again
+import { systemPropertyTypes } from "@local/hash-isomorphic-utils/ontology-type-ids";
+import type { SxProps, Theme } from "@mui/material";
+import { Box, Typography } from "@mui/material";
+import type { ReactElement } from "react";
+
+export const EntityOrTypeIcon = ({
+  entity,
+  fill,
+  fontSize,
+  icon,
+  isLink,
+  sx,
+}: {
+  entity: Entity | null;
+  fill?: string | ((theme: Theme) => string);
+  fontSize: number | string;
+  icon?: string | ReactElement | null;
+  isLink: boolean;
+  sx?: SxProps<Theme>;
+}) => {
+  if (!icon) {
+    if (isLink) {
+      return (
+        <LinkTypeIcon
+          sx={[
+            { stroke: fill ?? "inherit", fontSize },
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
+        />
+      );
+    }
+    return (
+      <AsteriskRegularIcon
+        sx={[
+          { fill: fill ?? "inherit", fontSize },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      />
+    );
+  }
+
+  /**
+   * @todo H-1978 remove hardcoded ReactElement overrides when system types have icons assigned to schema
+   */
+  if (typeof icon !== "string") {
+    return icon;
+  }
+
+  if (
+    icon.startsWith("http://") ||
+    icon.startsWith("https://") ||
+    icon.startsWith("/")
+  ) {
+    const iconUrl = icon.startsWith("/")
+      ? new URL(icon, window.location.origin).href
+      : icon;
+
+    return (
+      <Box
+        sx={[
+          {
+            backgroundColor: fill ?? "inherit",
+            webkitMask: `url(${iconUrl}) no-repeat center / contain`,
+            mask: `url(${iconUrl}) no-repeat center / contain`,
+            width: fontSize,
+            height: fontSize,
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      />
+    );
+  }
+
+  /**
+   * Pages at least can have an emoji set for the 'icon' property, overriding the type's icon
+   */
+  const emojiIcon =
+    (entity?.properties[systemPropertyTypes.icon.propertyTypeBaseUrl] as
+      | string
+      | undefined) ?? icon;
+
+  return (
+    <Typography
+      fontSize={fontSize}
+      sx={[{ lineHeight: 1 }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      {emojiIcon}
+    </Typography>
+  );
+};
diff --git a/libs/@hashintel/design-system/src/icon-asterisk-regular.tsx b/libs/@hashintel/design-system/src/icon-asterisk-regular.tsx
index 1d5509acfd6..c7b3f49e78d 100644
--- a/libs/@hashintel/design-system/src/icon-asterisk-regular.tsx
+++ b/libs/@hashintel/design-system/src/icon-asterisk-regular.tsx
@@ -4,7 +4,7 @@ import type { FunctionComponent } from "react";
 
 export const AsteriskRegularIcon: FunctionComponent<SvgIconProps> = (props) => {
   return (
-    <SvgIcon {...props} viewBox="0 0 384 512" fill="none">
+    <SvgIcon viewBox="0 0 384 512" fill="currentColor" {...props}>
       <path d="M192 32c13.3 0 24 10.7 24 24V212.9l131.4-81.3c11.3-7 26.1-3.5 33 7.8s3.5 26.1-7.8 33L237.6 256l135 83.6c11.3 7 14.8 21.8 7.8 33s-21.8 14.7-33 7.8L216 299.1V456c0 13.3-10.7 24-24 24s-24-10.7-24-24V299.1L36.6 380.4c-11.3 7-26.1 3.5-33-7.8s-3.5-26.1 7.8-33l135-83.6-135-83.6c-11.3-7-14.8-21.8-7.8-33s21.8-14.8 33-7.8L168 212.9V56c0-13.3 10.7-24 24-24z" />
     </SvgIcon>
   );
diff --git a/libs/@hashintel/design-system/src/selector-autocomplete.tsx b/libs/@hashintel/design-system/src/selector-autocomplete.tsx
index c9931f37af8..84d23339638 100644
--- a/libs/@hashintel/design-system/src/selector-autocomplete.tsx
+++ b/libs/@hashintel/design-system/src/selector-autocomplete.tsx
@@ -99,9 +99,10 @@ const TypeListSelectorDropdown = ({
                 sx={(theme) => ({
                   color: theme.palette.gray[60],
                   fontWeight: 600,
+                  textTransform: "capitalize",
                 })}
               >
-                {query}
+                {query.toLowerCase()}
               </Typography>
             </>
           ) : null}
@@ -109,25 +110,25 @@ const TypeListSelectorDropdown = ({
             <Chip
               color="teal"
               label={creationProps.variant.toUpperCase()}
-              sx={{ ml: 1.5 }}
+              sx={{ "& span": { fontSize: 13 }, fontSize: 13, ml: 1.5 }}
             />
           ) : creationProps.variant === "entity" ? (
             <Chip
               color="teal"
               label={creationProps.variant.toUpperCase()}
-              sx={{ ml: 1.5 }}
+              sx={{ "& span": { fontSize: 13 }, ml: 1.5 }}
             />
           ) : creationProps.variant === "link type" ? (
             <Chip
               color="aqua"
               label={creationProps.variant.toUpperCase()}
-              sx={{ ml: 1.5 }}
+              sx={{ "& span": { fontSize: 13 }, ml: 1.5 }}
             />
           ) : (
             <Chip
               color="purple"
               label={creationProps.variant.toUpperCase()}
-              sx={{ ml: 1.5 }}
+              sx={{ "& span": { fontSize: 13 }, ml: 1.5 }}
             />
           )}
         </Button>
diff --git a/libs/@hashintel/design-system/src/selector-autocomplete/selector-autocomplete-option.tsx b/libs/@hashintel/design-system/src/selector-autocomplete/selector-autocomplete-option.tsx
index f9ae7986a23..53f1ff9c5dd 100644
--- a/libs/@hashintel/design-system/src/selector-autocomplete/selector-autocomplete-option.tsx
+++ b/libs/@hashintel/design-system/src/selector-autocomplete/selector-autocomplete-option.tsx
@@ -2,15 +2,15 @@ import type { EntityPropertiesObject } from "@blockprotocol/graph";
 import type { BaseUrl, VersionedUrl } from "@blockprotocol/type-system/slim";
 import { Box, Paper, Popper, Stack, Tooltip, Typography } from "@mui/material";
 import clsx from "clsx";
-import type { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactElement } from "react";
 import { useRef, useState } from "react";
 
 import { Chip } from "../chip";
 import { GRID_CLICK_IGNORE_CLASS } from "../constants";
+import { EntityOrTypeIcon } from "../entity-or-type-icon";
 import { FeatherRegularIcon } from "../icon-feather-regular";
 import { ImageWithCheckedBackground } from "../image-with-checked-background";
 import { OntologyChip } from "../ontology-chip";
-import { EntityTypeIcon } from "../ontology-icons";
 import { parseUrlForOntologyChip } from "../parse-url-for-ontology-chip";
 
 const descriptionPropertyKey: BaseUrl =
@@ -24,32 +24,25 @@ const mimeTypePropertyKey: BaseUrl =
 
 const imageThumbnailWidth = 90;
 
+type TypeDisplayData = { $id: VersionedUrl; icon?: string; title: string };
+
 export type SelectorAutocompleteOptionProps = {
   liProps: HTMLAttributes<HTMLLIElement>;
   description?: string;
   entityProperties?: EntityPropertiesObject;
-  icon: ReactNode | null;
+  icon: string | ReactElement | null;
   title: string;
-  /** the typeId associated with this entity type or entity, displayed as a chip in the option */
-  typeIds: [VersionedUrl, ...VersionedUrl[]];
+  types: [TypeDisplayData, ...TypeDisplayData[]];
   draft?: boolean;
 };
 
-const slugToTitleCase = (slug?: string) =>
-  slug
-    ? slug
-        .split("-")
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(" ")
-    : undefined;
-
 export const SelectorAutocompleteOption = ({
   liProps,
   description,
   entityProperties,
   icon,
   title,
-  typeIds,
+  types,
   draft = false,
 }: SelectorAutocompleteOptionProps) => {
   const optionRef = useRef<HTMLLIElement>(null);
@@ -116,9 +109,24 @@ export const SelectorAutocompleteOption = ({
             </Stack>
             <Stack direction="row" mt={1}>
               <Chip
-                color="gray"
-                icon={<EntityTypeIcon />}
-                label={slugToTitleCase(typeIds[0].split("/").slice(-3, -2)[0])}
+                variant="outlined"
+                icon={
+                  typeof icon === "string" || !icon ? (
+                    <EntityOrTypeIcon
+                      entity={null}
+                      fill={({ palette }) =>
+                        entityProperties ? palette.gray[50] : palette.blue[70]
+                      }
+                      fontSize={12}
+                      icon={icon}
+                      /* @todo H-3363 set this using closed schema */
+                      isLink={false}
+                    />
+                  ) : (
+                    icon
+                  )
+                }
+                label={types[0].title}
               />
             </Stack>
           </Paper>
@@ -138,89 +146,100 @@ export const SelectorAutocompleteOption = ({
               alignItems="center"
               maxWidth="50%"
             >
-              {icon ? (
-                <Stack
-                  direction="row"
+              <Stack
+                direction="row"
+                sx={({ palette }) => ({
+                  alignItems: "center",
+                  background: palette.gray[10],
+                  border: `1px solid ${palette.gray[30]}`,
+                  borderRadius: 4,
+                  height: 26,
+                })}
+              >
+                <Box
                   sx={({ palette }) => ({
                     alignItems: "center",
-                    background: palette.gray[10],
-                    border: `1px solid ${palette.gray[30]}`,
+                    background: "white",
+                    borderRight: `1px solid ${palette.gray[30]}`,
                     borderRadius: 4,
-                    height: 26,
+                    display: "flex",
+                    px: 1.2,
+                    height: "100%",
                   })}
                 >
-                  <Box
-                    sx={({ palette }) => ({
-                      alignItems: "center",
-                      background: "white",
-                      borderRight: `1px solid ${palette.gray[30]}`,
-                      borderRadius: 4,
-                      display: "flex",
-                      px: 1.2,
-                      height: "100%",
-                      fontSize: 14,
-                      "> svg": {
-                        fontSize: 14,
-                      },
-                    })}
-                  >
-                    {icon}
-                  </Box>
-                  <Typography
-                    variant="smallTextLabels"
-                    sx={({ palette }) => ({
-                      color: palette.black,
-                      fontSize: 12,
-                      fontWeight: 500,
-                      px: 1.2,
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                    })}
-                  >
-                    {title}
-                  </Typography>
-                </Stack>
-              ) : (
+                  {typeof icon === "string" || !icon ? (
+                    <EntityOrTypeIcon
+                      entity={null}
+                      fill={({ palette }) =>
+                        entityProperties ? palette.gray[50] : palette.blue[70]
+                      }
+                      fontSize={12}
+                      icon={icon}
+                      /* @todo H-3363 set this using closed schema */
+                      isLink={false}
+                    />
+                  ) : (
+                    icon
+                  )}
+                </Box>
                 <Typography
                   variant="smallTextLabels"
-                  sx={{
+                  sx={({ palette }) => ({
+                    color: palette.black,
+                    fontSize: 12,
+                    fontWeight: 500,
+                    px: 1.2,
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
-                    mr: 0.5,
-                    fontWeight: 500,
-                  }}
+                  })}
                 >
                   {title}
                 </Typography>
-              )}
+              </Stack>
             </Box>
-            {typeIds.map((typeId) => (
-              <Tooltip title={typeId} key={typeId}>
-                {entityProperties ? (
-                  <Chip
-                    icon={<EntityTypeIcon />}
-                    color="gray"
-                    label={slugToTitleCase(typeId.split("/").slice(-3, -2)[0])}
-                    sx={{
-                      ml: 1,
-                    }}
-                  />
-                ) : (
-                  <OntologyChip
-                    {...parseUrlForOntologyChip(typeId)}
-                    sx={({ palette }) => ({
-                      border: `1px solid ${palette.gray[30]}`,
-                      flexShrink: 1,
-                      minWidth: 150,
-                      ml: 1.25,
-                      mr: 2,
-                    })}
-                  />
-                )}
-              </Tooltip>
-            ))}
+            <Stack direction="row" gap={0.5} ml={2}>
+              {types.map((type) => (
+                <Tooltip title={type.$id} key={type.$id}>
+                  {entityProperties ? (
+                    <Stack
+                      direction="row"
+                      alignItems="center"
+                      sx={{
+                        fontSize: 12,
+                        px: 1,
+                        py: 0.5,
+                        border: ({ palette }) =>
+                          `1px solid ${palette.gray[30]}`,
+                        borderRadius: 4,
+                      }}
+                    >
+                      <EntityOrTypeIcon
+                        entity={null}
+                        icon={type.icon}
+                        fontSize={12}
+                        fill={({ palette }) => palette.blue[70]}
+                        /* @todo H-3363 set this using closed schema */
+                        isLink={false}
+                        sx={{ mr: 0.8 }}
+                      />
+                      {type.title}
+                    </Stack>
+                  ) : (
+                    <OntologyChip
+                      {...parseUrlForOntologyChip(type.$id)}
+                      sx={({ palette }) => ({
+                        border: `1px solid ${palette.gray[30]}`,
+                        flexShrink: 1,
+                        minWidth: 150,
+                        ml: 1.25,
+                        mr: 2,
+                      })}
+                    />
+                  )}
+                </Tooltip>
+              ))}
+            </Stack>
             {draft ? (
               <Chip
                 icon={<FeatherRegularIcon />}
diff --git a/libs/@hashintel/design-system/src/type-card.tsx b/libs/@hashintel/design-system/src/type-card.tsx
index 9fb9b97f5ee..90f70893ab0 100644
--- a/libs/@hashintel/design-system/src/type-card.tsx
+++ b/libs/@hashintel/design-system/src/type-card.tsx
@@ -3,8 +3,8 @@ import { Box, Collapse, Tooltip, Typography } from "@mui/material";
 import type { ElementType } from "react";
 import { useState } from "react";
 
+import { EntityOrTypeIcon } from "./entity-or-type-icon";
 import { FontAwesomeIcon } from "./fontawesome-icon";
-import { AsteriskRegularIcon } from "./icon-asterisk-regular";
 import { IconButton } from "./icon-button";
 import { CloseIcon } from "./icon-close";
 import { WhiteCard } from "./white-card";
@@ -14,6 +14,7 @@ interface TypeCardProps {
   onDelete?: () => void;
   LinkComponent?: ElementType;
   icon?: string | null;
+  isLink: boolean;
   url: string;
   title: string;
   version: number;
@@ -23,26 +24,12 @@ interface TypeCardProps {
   };
 }
 
-const TypeIcon = ({ icon }: { icon?: string | null }) => {
-  if (!icon) {
-    return <AsteriskRegularIcon sx={{ fontSize: 16 }} />;
-  }
-  if (
-    icon.startsWith("http://") ||
-    icon.startsWith("https://") ||
-    icon.startsWith("/")
-  ) {
-    return <img alt="" src={icon} style={{ width: 16, height: 16 }} />;
-  }
-
-  return icon;
-};
-
 export const TypeCard = ({
   disableClick,
   onDelete,
   LinkComponent,
   icon,
+  isLink,
   url,
   title,
   version,
@@ -75,8 +62,14 @@ export const TypeCard = ({
           whiteSpace: "nowrap",
         }}
       >
-        <TypeIcon icon={icon} />
-        <Typography variant="smallTextLabels" fontWeight={600} ml={1.5}>
+        <EntityOrTypeIcon
+          entity={null}
+          fontSize={14}
+          fill={({ palette }) => palette.blue[70]}
+          isLink={isLink}
+          icon={icon}
+        />
+        <Typography variant="smallTextLabels" fontWeight={600} ml={1}>
           {title}
           <Typography variant="microText" color="gray.50" ml={0.5}>
             {` v${version}`}
diff --git a/libs/@hashintel/design-system/theme-override.d.ts b/libs/@hashintel/design-system/theme-override.d.ts
index 3d13bb45c6c..2ea5f91d5a5 100644
--- a/libs/@hashintel/design-system/theme-override.d.ts
+++ b/libs/@hashintel/design-system/theme-override.d.ts
@@ -228,6 +228,7 @@ declare module "@mui/material/Chip" {
     green: true;
     navy: true;
     aqua: true;
+    white: true;
     // Disable defaults
     default: false;
     primary: false;
diff --git a/libs/@hashintel/type-editor/package.json b/libs/@hashintel/type-editor/package.json
index b496cebe380..fe3fb0270ef 100644
--- a/libs/@hashintel/type-editor/package.json
+++ b/libs/@hashintel/type-editor/package.json
@@ -25,6 +25,7 @@
     "@fortawesome/free-regular-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@hashintel/design-system": "0.0.8",
+    "@local/hash-subgraph": "0.0.0-private",
     "clsx": "1.2.1",
     "lodash.memoize": "4.1.2",
     "lodash.uniqueid": "4.0.1",
diff --git a/libs/@hashintel/type-editor/src/entity-type-editor/inheritance-row/inherited-type-card.tsx b/libs/@hashintel/type-editor/src/entity-type-editor/inheritance-row/inherited-type-card.tsx
index eaba499109f..4dabef0c2a1 100644
--- a/libs/@hashintel/type-editor/src/entity-type-editor/inheritance-row/inherited-type-card.tsx
+++ b/libs/@hashintel/type-editor/src/entity-type-editor/inheritance-row/inherited-type-card.tsx
@@ -4,6 +4,8 @@ import {
   extractVersion,
 } from "@blockprotocol/type-system/slim";
 import { TypeCard } from "@hashintel/design-system";
+// eslint-disable-next-line no-restricted-imports -- TODO remove this dependency to make package publishable
+import { linkEntityTypeUrl } from "@local/hash-subgraph";
 import { useFormContext, useWatch } from "react-hook-form";
 
 import { useEntityTypesOptions } from "../../shared/entity-types-options-context";
@@ -52,9 +54,13 @@ export const InheritedTypeCard = ({
     );
   };
 
+  /** @todo H-3363 take account of inheritance by using closed schema */
+  const isLink = directParentEntityTypeIds.includes(linkEntityTypeUrl);
+
   return (
     <TypeCard
       onDelete={isReadOnly ? undefined : onRemove}
+      isLink={isLink}
       LinkComponent={Link}
       newVersionConfig={
         !isReadOnly && newVersion
diff --git a/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/destination-entity-type-selector.tsx b/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/destination-entity-type-selector.tsx
index 5eebe227cf9..e0d81543456 100644
--- a/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/destination-entity-type-selector.tsx
+++ b/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/destination-entity-type-selector.tsx
@@ -1,6 +1,5 @@
 import type { VersionedUrl } from "@blockprotocol/type-system";
 import {
-  EntityTypeIcon,
   popperPlacementInputNoRadius,
   popperPlacementPopperNoRadius,
   popperPlacementSelectors,
@@ -279,10 +278,10 @@ export const DestinationEntityTypeSelector = ({
             }}
             isOptionEqualToValue={(option, value) => option.$id === value.$id}
             options={entityTypeOptions}
-            optionToRenderData={({ $id, title, description }) => ({
+            optionToRenderData={({ $id, title, icon, description }) => ({
               uniqueId: $id,
-              icon: <EntityTypeIcon />,
-              typeIds: [$id],
+              icon: icon ?? null,
+              types: [{ $id, title, icon }],
               title,
               description,
             })}
diff --git a/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/destination-entity-type.tsx b/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/destination-entity-type.tsx
index ba98eec6ffc..04059c7a252 100644
--- a/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/destination-entity-type.tsx
+++ b/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/destination-entity-type.tsx
@@ -32,6 +32,7 @@ export const DestinationEntityType = ({
       label={
         <TypeChipLabel
           currentVersion={currentVersion}
+          icon={entityTypeSchema.icon}
           latestVersion={latestVersion}
           onUpdate={
             updateVersion
diff --git a/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/type-chip-label.tsx b/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/type-chip-label.tsx
index e9642028b90..69fabffdadf 100644
--- a/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/type-chip-label.tsx
+++ b/libs/@hashintel/type-editor/src/entity-type-editor/link-list-card/type-chip-label.tsx
@@ -1,8 +1,7 @@
 import type { VersionedUrl } from "@blockprotocol/type-system";
-import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
 import {
   ArrowUpRightRegularIcon,
-  FontAwesomeIcon,
+  EntityOrTypeIcon,
 } from "@hashintel/design-system";
 import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import type { ReactNode } from "react";
@@ -15,12 +14,14 @@ import { VersionUpgradeIndicator } from "../shared/version-upgrade-indicator";
 export const TypeChipLabel = ({
   children,
   currentVersion,
+  icon,
   latestVersion,
   onUpdate,
   versionedUrl,
 }: {
   children: ReactNode;
   currentVersion?: number;
+  icon?: string;
   latestVersion?: number;
   versionedUrl?: VersionedUrl;
   onUpdate?: () => void;
@@ -29,7 +30,13 @@ export const TypeChipLabel = ({
 
   return (
     <Stack direction="row" spacing={0.75} fontSize={14} alignItems="center">
-      <FontAwesomeIcon icon={faAsterisk} sx={{ fontSize: "inherit" }} />
+      <EntityOrTypeIcon
+        entity={null}
+        fontSize="inherit"
+        icon={icon}
+        isLink
+        fill={({ palette }) => palette.blue[70]}
+      />
       <Box component="span">{children}</Box>
 
       {!readonly &&
diff --git a/libs/@hashintel/type-editor/src/entity-type-editor/shared/insert-property-field/type-selector.tsx b/libs/@hashintel/type-editor/src/entity-type-editor/shared/insert-property-field/type-selector.tsx
index 41b520ef7aa..e715e2752ce 100644
--- a/libs/@hashintel/type-editor/src/entity-type-editor/shared/insert-property-field/type-selector.tsx
+++ b/libs/@hashintel/type-editor/src/entity-type-editor/shared/insert-property-field/type-selector.tsx
@@ -50,8 +50,8 @@ export const TypeSelector = <T extends TypeSelectorType>({
       inputRef={inputRef}
       isOptionEqualToValue={(option, value) => option.$id === value.$id}
       optionToRenderData={({ $id, Icon, title, description }) => ({
-        typeIds: [$id],
-        icon: Icon ? <Icon /> : null,
+        types: [{ $id, title }],
+        icon: Icon ? <Icon sx={{ fontSize: 13 }} /> : null,
         uniqueId: $id,
         title,
         description,
diff --git a/libs/@hashintel/type-editor/src/entity-type-editor/shared/version-upgrade-indicator.tsx b/libs/@hashintel/type-editor/src/entity-type-editor/shared/version-upgrade-indicator.tsx
index 9c23a8518df..a0ed6d753bf 100644
--- a/libs/@hashintel/type-editor/src/entity-type-editor/shared/version-upgrade-indicator.tsx
+++ b/libs/@hashintel/type-editor/src/entity-type-editor/shared/version-upgrade-indicator.tsx
@@ -33,6 +33,7 @@ export const VersionUpgradeIndicator = ({
         fontSize: 11,
         fontWeight: 700,
         textTransform: "uppercase",
+        width: "auto",
         gap: 0.625,
         lineHeight: "18px",
         ":hover": {
diff --git a/libs/@local/hash-subgraph/src/stdlib/subgraph/element/entity-type.ts b/libs/@local/hash-subgraph/src/stdlib/subgraph/element/entity-type.ts
index c14c10796b0..bf2602483ac 100644
--- a/libs/@local/hash-subgraph/src/stdlib/subgraph/element/entity-type.ts
+++ b/libs/@local/hash-subgraph/src/stdlib/subgraph/element/entity-type.ts
@@ -88,7 +88,7 @@ export const getBreadthFirstEntityTypesAndParents = (
   entityTypeIds: VersionedUrl[],
 ): EntityTypeWithMetadata[] => {
   const visited = new Set<VersionedUrl>();
-  const queue: VersionedUrl[] = [...entityTypeIds];
+  const queue: VersionedUrl[] = [...entityTypeIds].toSorted();
   const result: EntityTypeWithMetadata[] = [];
 
   while (queue.length > 0) {