diff --git a/app/src/modules/collections/routes/collection.vue b/app/src/modules/collections/routes/collection.vue
index 3307a4f14d..63559e5ddf 100644
--- a/app/src/modules/collections/routes/collection.vue
+++ b/app/src/modules/collections/routes/collection.vue
@@ -3,7 +3,7 @@
 	<private-view v-else :title="bookmark ? bookmarkTitle : currentCollection.name">
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon secondary disabled>
-				<v-icon :name="currentCollection.icon" :color="currentCollection.meta.color" />
+				<v-icon :name="currentCollection.icon" :color="currentCollection.color" />
 			</v-button>
 		</template>
 
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index 0c04a61afa..2ec4e33c52 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -45,7 +45,7 @@
 							unmanaged: item.meta === null && item.collection.startsWith('directus_') === false,
 						}"
 						:name="item.icon"
-						:color="item.meta.color"
+						:color="item.color"
 					/>
 				</template>
 
diff --git a/app/src/stores/collections.ts b/app/src/stores/collections.ts
index 000f08d8de..80d56b2f92 100644
--- a/app/src/stores/collections.ts
+++ b/app/src/stores/collections.ts
@@ -33,6 +33,7 @@ export const useCollectionsStore = createStore({
 
 			this.state.collections = collections.map((collection: CollectionRaw) => {
 				const icon = collection.meta?.icon || 'label';
+				const color = collection.meta?.color;
 				const name = formatTitle(collection.collection);
 
 				if (collection.meta && notEmpty(collection.meta.translations)) {
@@ -57,6 +58,7 @@ export const useCollectionsStore = createStore({
 					...collection,
 					name,
 					icon,
+					color,
 				};
 			});
 
diff --git a/app/src/types/collections.ts b/app/src/types/collections.ts
index 0c40ce6251..67b31f737b 100644
--- a/app/src/types/collections.ts
+++ b/app/src/types/collections.ts
@@ -29,4 +29,6 @@ export interface CollectionRaw {
 
 export interface Collection extends CollectionRaw {
 	name: string | VueI18n.TranslateResult;
+	icon: string;
+	color: string | null;
 }