diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index bc907cdcc..bc0132551 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -86,11 +86,18 @@
 	}
 }
 
+.pageIconWrapper {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	width: 28px;
+	height: 28px;
+	animation: fadeInFull 200ms ease-out 150ms both;
+}
+
 .pageIcon {
 	width: 28px;
 	height: 28px;
-	flex-shrink: 0;
-	animation: fadeInFull 200ms ease-out 150ms both;
 	object-fit: cover;
 }
 
diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 134c5893e..b2067ed33 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -544,16 +544,26 @@ function PageIcon({ crumb }: { crumb: Breadcrumb }) {
 	const isExternal = crumb.imgPath.includes(".");
 	const iconClass = clsx(styles.pageIcon, "rounded");
 
-	return isExternal ? (
-		<img src={crumb.imgPath} alt="" className={iconClass} />
-	) : (
-		<Image
-			path={crumb.imgPath}
-			alt=""
-			className={iconClass}
-			width={20}
-			height={20}
-		/>
+	return (
+		<div className={styles.pageIconWrapper}>
+			{isExternal ? (
+				<img
+					src={crumb.imgPath}
+					alt=""
+					className={iconClass}
+					width={28}
+					height={28}
+				/>
+			) : (
+				<Image
+					path={crumb.imgPath}
+					alt=""
+					className={iconClass}
+					width={20}
+					height={20}
+				/>
+			)}
+		</div>
 	);
 }