better colored icon

packages/web/public/icon-colors.css

@@ -31,7 +31,7 @@
   color: var(--theme-icon-inv-red);
 }
 
-.color-icon-premium {
+.premium-background-gradient {
   background: linear-gradient(135deg, #1686c8, #8a25b1);
 }
 

packages/web/src/icons/FontIcon.svelte

@@ -353,8 +353,6 @@
     '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>
 

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -186,7 +186,15 @@
       data-testid={`WidgetIconPanel_${item.name}`}
       on:click={() => handleChangeWidget(item.name)}
     >
-      <FontIcon icon={item.isPremiumPromo ? ($promoWidget?.icon ?? item.icon) : item.icon} title={item.title} />
+      {#if item.isPremiumPromo && $promoWidget?.isColoredIcon}
+        <FontIcon
+          icon={item.icon}
+          title={item.title}
+          colorClass="premium-background-gradient widget-icon-panel-rounded"
+        />
+      {:else}
+        <FontIcon icon={item.icon} title={item.title} />
+      {/if}
       {#if item.isPremiumPromo}
         <div class="premium-promo">Premium</div>
         {#if $promoWidget?.identifier != $seenPremiumPromoWidget}
@@ -281,4 +289,9 @@
     top: -5px;
     right: 5px;
   }
+
+  :global(.widget-icon-panel-rounded) {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
 </style>