diff --git a/packages/web/public/icon-colors.css b/packages/web/public/icon-colors.css
index ccaf9fe61..8f2f6b0ff 100644
--- a/packages/web/public/icon-colors.css
+++ b/packages/web/public/icon-colors.css
@@ -30,3 +30,7 @@
 .color-icon-inv-red {
   color: var(--theme-icon-inv-red);
 }
+
+.color-icon-premium {
+  background: linear-gradient(135deg, #1686c8, #8a25b1);
+}
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte
index 72fcd7c41..e3135fee9 100644
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/packages/web/src/icons/FontIcon.svelte
@@ -353,6 +353,8 @@
     'img data-deploy': 'mdi mdi-database-settings color-icon-green',
     'img arrow-start-here': 'mdi mdi-arrow-down-bold-circle color-icon-green',
     'img team-file': 'mdi mdi-account-file color-icon-red',
+
+    'img premium': 'mdi mdi-star color-icon-premium',
   };
 </script>
 
diff --git a/packages/web/src/widgets/WidgetIconPanel.svelte b/packages/web/src/widgets/WidgetIconPanel.svelte
index e50217f70..808f2cd3c 100644
--- a/packages/web/src/widgets/WidgetIconPanel.svelte
+++ b/packages/web/src/widgets/WidgetIconPanel.svelte
@@ -186,7 +186,7 @@
       data-testid={`WidgetIconPanel_${item.name}`}
       on:click={() => handleChangeWidget(item.name)}
     >
-      <FontIcon icon={item.icon} title={item.title} />
+      <FontIcon icon={item.isPremiumPromo ? ($promoWidget?.icon ?? item.icon) : item.icon} title={item.title} />
       {#if item.isPremiumPromo}
         <div class="premium-promo">Premium</div>
         {#if $promoWidget?.identifier != $seenPremiumPromoWidget}