diff --git a/js/ui/panel.js b/js/ui/panel.js
index e9c171c20d..3f7f90de17 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -43,6 +43,7 @@ const PANEL_PEEK_TIME = 1500;
 
 const EDIT_MODE_MIN_BOX_SIZE = 25;
 const VALID_ICON_SIZE_VALUES = [-1, 0, 16, 22, 24, 32, 48];
+const MIN_ICON_PADDING_PX = 4;
 
 /*** These are defaults for a new panel added */
 const DEFAULT_PANEL_VALUES = {"panels-autohide": "false",
@@ -58,7 +59,6 @@ const DEFAULT_SYMBOLIC_ICON_SIZE_VALUES = {"left":   28,
                                            "center": 28,
                                            "right":  28};
 const MIN_SYMBOLIC_SIZE_PX = 10;
-const MAX_SYMBOLIC_SIZE_PX = 50;
 
 const DEFAULT_TEXT_SIZE_VALUES = {"left":   0.0,
                                   "center": 0.0,
@@ -3080,8 +3080,8 @@ Panel.prototype = {
         let oldZoneSizes = this._panelZoneSizes;
 
         let sizeSets = [
-            ["fullcolor", PANEL_ZONE_ICON_SIZES, (a,b,c,d) => this._clampPanelZoneColorIconSize(a,b,c,d), DEFAULT_FULLCOLOR_ICON_SIZE_VALUES],
-            ["symbolic", PANEL_ZONE_SYMBOLIC_ICON_SIZES, (a,b,c,d) => this._clampPanelZoneSymbolicIconSize(a,b,c,d), DEFAULT_SYMBOLIC_ICON_SIZE_VALUES],
+            ["fullcolor", PANEL_ZONE_ICON_SIZES, (a,b,c,d) => this._clampPanelZoneIconSize(a,b,c,d), DEFAULT_FULLCOLOR_ICON_SIZE_VALUES],
+            ["symbolic", PANEL_ZONE_SYMBOLIC_ICON_SIZES, (a,b,c,d) => this._clampPanelZoneIconSize(a,b,c,d), DEFAULT_SYMBOLIC_ICON_SIZE_VALUES],
             ["text", PANEL_ZONE_TEXT_SIZES, (a,b,c,d) => this._clampPanelZoneTextSize(a,b,c,d), DEFAULT_TEXT_SIZE_VALUES]
         ];
 
@@ -3184,37 +3184,29 @@ Panel.prototype = {
         return iconSize;
     },
 
-    _clampPanelZoneColorIconSize: function(panelZoneSizeSet, typeString, zoneString, defaults) {
+    _clampPanelZoneIconSize: function(panelZoneSizeSet, typeString, zoneString, defaults) {
         let iconSize = panelZoneSizeSet.maybeGet(zoneString);
 
         if (iconSize == undefined) {
             iconSize = defaults[zoneString];
         }
 
-        let height = this.height / global.ui_scale;
-
+        // always keep at some padding pixels
+        let optimalSize = (this.height - (MIN_ICON_PADDING_PX * 2)) / global.ui_scale;
+        
         if (iconSize === -1) { // Legacy: Scale to panel size
-            iconSize = height;
-        } else if (iconSize === 0 || iconSize > height) { // To best fit within the panel size
-            iconSize = toStandardIconSize(height);
+            iconSize = this.height / global.ui_scale;
+        } else if (iconSize === 0 || iconSize > optimalSize) { // To best fit within the panel size
+            iconSize = toStandardIconSize(optimalSize);
+            if (typeString == "symbolic") {
+                // symbolic icons appear larger than colored ones
+                iconSize = Math.max(MIN_SYMBOLIC_SIZE_PX, Math.floor(iconSize * 0.875));
+            }
         }
 
         return iconSize; // Always return a value above 0 or St will spam the log.
     },
 
-    _clampPanelZoneSymbolicIconSize: function(panelZoneSizeSet, typeString, zoneString, defaults) {
-        let iconSize = panelZoneSizeSet.maybeGet(zoneString);
-
-        if (iconSize == undefined) {
-            iconSize = defaults[zoneString];
-        }
-
-        let panelHeight = this.height / global.ui_scale;
-
-        let new_size = iconSize.clamp(MIN_SYMBOLIC_SIZE_PX, Math.min(MAX_SYMBOLIC_SIZE_PX, panelHeight));
-        return new_size;
-    },
-
     getPanelZoneIconSize: function(locationLabel, iconType) {
         let zoneConfig = this._panelZoneSizes;
         let typeString = "fullcolor";