diff --git a/pages/menu_order/mzta-menu-order.css b/pages/menu_order/mzta-menu-order.css
index 2fb990f5..fbb64a68 100644
--- a/pages/menu_order/mzta-menu-order.css
+++ b/pages/menu_order/mzta-menu-order.css
@@ -193,6 +193,10 @@
     background: transparent;
 }
 
+.item_icon_preview_editable {
+    border-color: #b0c4de;
+}
+
 .item_icon_preview_special {
     cursor: default;
 }
@@ -348,6 +352,10 @@
         color: #ffb74d;
     }
 
+    .item_icon_preview_editable {
+        border-color: #556;
+    }
+
     .item_icon_preview:hover {
         background: #3a3a44;
         border-color: #409df3;
diff --git a/pages/menu_order/mzta-menu-order.js b/pages/menu_order/mzta-menu-order.js
index 9e02d7dc..fa8b89b3 100644
--- a/pages/menu_order/mzta-menu-order.js
+++ b/pages/menu_order/mzta-menu-order.js
@@ -304,7 +304,7 @@ function buildSpecialIconDisplay(prompt) {
 
 function buildIconPicker(prompt) {
     const preview = document.createElement('img');
-    preview.classList.add('item_icon_preview');
+    preview.classList.add('item_icon_preview', 'item_icon_preview_editable');
     preview.alt = '';
     preview.title = browser.i18n.getMessage('menu_order_icon_label');
     applyIconToPreview(preview, prompt.custom_icon || '');