diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 78abe21b3e..f6f32fc2f9 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -43,7 +43,7 @@
 				<i
 					v-else-if="metadata.icon && !narrow"
 					class="icon"
-					:class="metadata.icon"
+					:class="icon(metadata.icon)"
 				></i>
 
 				<div class="title">
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index 0192a48c0d..6d2506a177 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -2,7 +2,7 @@
 	<div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
 		<template v-if="metadata">
 			<div class="titleContainer" @click="showTabsPopup">
-				<i v-if="metadata.icon" class="icon" :class="metadata.icon"></i>
+				<i v-if="metadata.icon" class="icon" :class="icon(metadata.icon)"></i>
 
 				<div class="title">
 					<div class="title">{{ metadata.title }}</div>
@@ -63,6 +63,7 @@ import { scrollToTop } from "@/scripts/scroll";
 import MkButton from "@/components/MkButton.vue";
 import { globalEvents } from "@/events";
 import { injectPageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon"
 
 interface Tab {
 	key?: string | null;