diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java
index f569920bff..ead1cc0036 100644
--- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java
+++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java
@@ -63,9 +63,10 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer {
     private static final String ICON_SOURCE_MATERIAL = "material";
     private static final String ICON_SOURCE_FRAMEWORK7 = "f7";
     private static final String ICON_SET_OH_CLASSIC = "classic";
+    private static final String ICON_NAME_NONE = "none";
     private static final String DEFAULT_ICON_SOURCE = ICON_SOURCE_OH;
     private static final String DEFAULT_ICON_SET = ICON_SET_OH_CLASSIC;
-    private static final String DEFAULT_ICON_NAME = "none";
+    private static final String DEFAULT_ICON_NAME = ICON_NAME_NONE;
 
     public static final String ICON_TYPE = "svg";
 
@@ -166,7 +167,11 @@ protected String preprocessIcon(String originalSnippet, @Nullable String icon, b
         try {
             switch (iconSource.toLowerCase()) {
                 case ICON_SOURCE_OH:
-                    iconSnippet = getSnippet(ignoreState ? "icon_oh_no_state" : "icon_oh");
+                    if (ICON_NAME_NONE.equals(iconName)) {
+                        iconSnippet = getSnippet("icon_none");
+                    } else {
+                        iconSnippet = getSnippet(ignoreState ? "icon_oh_no_state" : "icon_oh");
+                    }
                     break;
                 case ICON_SOURCE_IF:
                 case ICON_SOURCE_ICONIFY:
@@ -182,10 +187,10 @@ protected String preprocessIcon(String originalSnippet, @Nullable String icon, b
                     break;
             }
             if (iconSnippet == null) {
-                iconSnippet = getSnippet("icon_oh_no_state");
-                iconSource = DEFAULT_ICON_SOURCE;
-                iconSet = DEFAULT_ICON_SET;
-                iconName = DEFAULT_ICON_NAME;
+                iconSnippet = getSnippet("icon_none");
+                iconSource = ICON_SOURCE_OH;
+                iconSet = ICON_SET_OH_CLASSIC;
+                iconName = ICON_NAME_NONE;
             }
         } catch (RenderException e) {
             iconSnippet = "";
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_none.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_none.html
new file mode 100644
index 0000000000..86cb901647
--- /dev/null
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_none.html
@@ -0,0 +1 @@
+<svg data-icon="%icon_set%:%icon_name%" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" />
\ No newline at end of file
diff --git a/bundles/org.openhab.ui.basic/web-src/smarthome.js b/bundles/org.openhab.ui.basic/web-src/smarthome.js
index a138821017..0cf68bbb04 100644
--- a/bundles/org.openhab.ui.basic/web-src/smarthome.js
+++ b/bundles/org.openhab.ui.basic/web-src/smarthome.js
@@ -349,8 +349,7 @@
 	function Control(parentNode) {
 		var
 			_t = this,
-			suppress = false,
-			noneImageSrc = "images/none.png";
+			suppress = false;
 
 		_t.parentNode = parentNode;
 		if (_t.formRow === undefined) {
@@ -438,7 +437,10 @@
 		_t.replaceImageWithNone = function() {
 			this.removeEventListener("load", _t.convertToInlineSVG);
 			this.removeEventListener("error", _t.replaceImageWithNone);
-			this.src = noneImageSrc;
+			if (this === _t.icon) {
+				_t.iconError = true;
+			}
+			_t.replaceIconWithInlineSVG(this, "<svg viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\" />");
 		};
 
 		_t.replaceIconWithInlineSVG = function(iconElement, svgText) {
@@ -497,16 +499,18 @@
 			doc = parser.parseFromString(htmlText, "text/html");
 			newIconElement = doc.body.firstChild;
 
-			if (_t.iconSource === "oh") {
+			if (_t.icon.tagName.toLowerCase() === "img" && _t.iconSource === "oh") {
 				_t.icon.removeEventListener("load", _t.convertToInlineSVG);
 				_t.icon.removeEventListener("error", _t.replaceImageWithNone);
 			}
 
+			_t.iconError = false;
+
 			// Replace the current icon element
 			_t.iconContainer.replaceChild(newIconElement, _t.icon);
 
 			_t.findIcon();
-			if (_t.iconSource === "oh") {
+			if (_t.icon.tagName.toLowerCase() === "img" && _t.iconSource === "oh") {
 				_t.icon.addEventListener("load", _t.convertToInlineSVG);
 				_t.icon.addEventListener("error", _t.replaceImageWithNone);
 			}
@@ -567,13 +571,19 @@
 			if (iconSrc === _t.iconSource) {
 				if (iconSrc === "oh") {
 					if (iconSet !== _t.iconSet || iconName !== _t.iconName) {
-						src = "<img data-icon=\"" + iconSet + ":" + iconName + "\" src=\".." + imgURL + "\" />";
+						if (iconName === "none") {
+							src = "<svg data-icon=\"" + iconSet + ":" + iconName + "\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\" />";
+						} else {
+							src = "<img data-icon=\"" + iconSet + ":" + iconName + "\" src=\".." + imgURL + "\" />";
+						}
 						_t.replaceIcon(src);
-					} else if (_t.icon.tagName.toLowerCase() === "img" && !_t.icon.src.endsWith(noneImageSrc)) {
-						_t.icon.addEventListener("error", _t.replaceImageWithNone);
-						_t.icon.setAttribute("src", imgURL);
-					} else if (_t.icon.tagName.toLowerCase() === "svg" && smarthome.UI.inlineSVG) {
-						_t.getSVGIconAndReplaceWithInline(_t.icon, imgURL, false, "<svg/>");
+					} else if (iconName !== "none" && !_t.iconError) {
+						if (_t.icon.tagName.toLowerCase() === "img") {
+							_t.icon.addEventListener("error", _t.replaceImageWithNone);
+							_t.icon.setAttribute("src", imgURL);
+						} else if (_t.icon.tagName.toLowerCase() === "svg" && smarthome.UI.inlineSVG) {
+							_t.getSVGIconAndReplaceWithInline(_t.icon, imgURL, false, "<svg viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\" />");
+						}
 					}
 				} else if (iconSrc === "if") {
 					_t.icon.setAttribute("icon", encodeURIComponent(iconSet) + ":" + encodeURIComponent(iconName));
@@ -584,7 +594,11 @@
 				// Different icon source => DOM element to be be replaced
 
 				if (iconSrc === "oh") {
-					src = "<img data-icon=\"" + iconSet + ":" + iconName + "\" src=\".." + imgURL + "\" />";
+					if (iconName === "none") {
+						src = "<svg data-icon=\"" + iconSet + ":" + iconName + "\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\" />";
+					} else {
+						src = "<img data-icon=\"" + iconSet + ":" + iconName + "\" src=\".." + imgURL + "\" />";
+					}
 				} else if (iconSrc === "if") {
 					src = "<iconify-icon icon=\"" +
 						encodeURIComponent(iconSet) + ":" + encodeURIComponent(iconName) +
@@ -701,7 +715,7 @@
 		_t.applyLocalSettingsPrivate = function() {};
 
 		_t.destroy = function() {
-			if (_t.icon !== null && _t.iconSource === "oh") {
+			if (_t.icon !== null && _t.icon.tagName.toLowerCase() === "img" && _t.iconSource === "oh") {
 				_t.icon.removeEventListener("load", _t.convertToInlineSVG);
 				_t.icon.removeEventListener("error", _t.replaceImageWithNone);
 			}
@@ -716,8 +730,9 @@
 		setCellSize(smarthome.UI.cellSizeTablet, smarthome.UI.cellSizeDesktop);
 
 		_t.findIcon();
+		_t.iconError = false;
 		_t.iconifyIconReplaced = false;
-		if (_t.icon !== null && _t.iconSource === "oh") {
+		if (_t.icon !== null && _t.icon.tagName.toLowerCase() === "img" && _t.iconSource === "oh") {
 			_t.icon.addEventListener("load", _t.convertToInlineSVG);
 			_t.icon.addEventListener("error", _t.replaceImageWithNone);
 		} else if (_t.icon !== null && _t.iconSource === "if" && !smarthome.UI.iconify) {