diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js
index bb4c8c2a08..6d6872c1e7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js
@@ -30,7 +30,11 @@
         };
 
         vm.$onChanges = function () {
-            vm.icon = vm.elementTypeModel ? vm.elementTypeModel.icon.split(" ")[0] : 'icon-block';
+            vm.icon = vm.elementTypeModel ? vm.elementTypeModel.icon : 'icon-block';
+            if (vm.blockConfigModel.iconColor) {
+                // enforce configured icon color for catalogue appearance instead of icon color from element type
+                vm.icon = vm.icon.split(" ")[0];
+            }
         };
 
         vm.$onDestroy = function () {