diff --git a/addons/web/static/src/core/commands/command_palette.scss b/addons/web/static/src/core/commands/command_palette.scss
index 3225f4015a7..93c5d5df4dd 100644
--- a/addons/web/static/src/core/commands/command_palette.scss
+++ b/addons/web/static/src/core/commands/command_palette.scss
@@ -90,8 +90,19 @@
       }
 
       .o_app_icon {
+        position: relative;
         border-radius: 4%;
         height: 1.8em;
+        width: 1.8em;
+
+        &> i.fa {
+          text-align: center;
+          position: absolute;
+          top: 25%;
+          left: 0;
+          bottom: auto;
+          right: 0;
+        }
       }
     }
   }
diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index 2fba31da594..e79c5654735 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/addons/web/static/src/core/commands/command_palette.xml
@@ -56,7 +56,10 @@
   <t t-name="web.AppIconCommand" owl="1">
     <div class="o_command_default">
         <span t-esc="props.name"/>
-        <img class="o_app_icon" t-attf-src="{{props.webIconData}}"/>
+        <img t-if="props.webIconData" class="o_app_icon" t-attf-src="{{props.webIconData}}"/>
+        <div t-else="" class="o_app_icon" t-attf-style="background-color:{{props.webIcon.backgroundColor}}" >
+          <i t-att-class="props.webIcon.iconClass" t-attf-style="color:{{props.webIcon.color}}"></i>
+        </div>
     </div>
   </t>
 
diff --git a/addons/web/static/src/webclient/menus/menu_providers.js b/addons/web/static/src/webclient/menus/menu_providers.js
index d43f7c45882..3a4e3789f1e 100644
--- a/addons/web/static/src/webclient/menus/menu_providers.js
+++ b/addons/web/static/src/webclient/menus/menu_providers.js
@@ -41,10 +41,15 @@ commandProviderRegistry.add("menu", {
         }
 
         apps.forEach((menu) => {
-            const prefix = "data:image/png;base64,";
-            const webIconData = menu.webIconData.startsWith(prefix)
-                ? menu.webIconData
-                : prefix + menu.webIconData.replace(/\s/g, "");
+            const props = {};
+            if (menu.webIconData) {
+                const prefix = "data:image/png;base64,";
+                props.webIconData = menu.webIconData.startsWith(prefix)
+                    ? menu.webIconData
+                    : prefix + menu.webIconData.replace(/\s/g, "");
+            } else {
+                props.webIcon = menu.webIcon;
+            }
             result.push({
                 Component: AppIconCommand,
                 action() {
@@ -52,9 +57,7 @@ commandProviderRegistry.add("menu", {
                 },
                 category: "apps",
                 name: menu.label,
-                props: {
-                    webIconData: webIconData,
-                },
+                props,
             });
         });