diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 9bfcfecbf4e19..acf4d6446f483 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -14,11 +14,6 @@
 	.searchbox input[type="search"] {
 		background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
 	}
-	#appmenu li a img {
-		-webkit-filter: invert(1);
-		filter: invert(1);
-		filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
-	}
 	#contactsmenu .icon-contacts {
 		background-image: url('../../../core/img/places/contacts-dark.svg');
 	}
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 50ed08761ae46..d54a6fe114ffa 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -66,8 +66,14 @@
 							<a href="<?php print_unescaped($entry['href']); ?>"
 							   tabindex="3"
 								<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
-								<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
-									 class="app-icon"/>
+								<?php if ($_['themingInvertMenu']) { ?>
+									<svg width="20" height="20" viewBox="0 0 20 20">
+									<defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>
+									<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMain-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon" /></svg>
+								<?php } else { ?>
+									<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
+										 class="app-icon" alt="<?php p($entry['name']); ?>" />
+								<?php } ?>
 								<div class="icon-loading-small-dark"
 									 style="display:none;"></div>
 							</a>
@@ -94,8 +100,8 @@ class="app-icon"/>
 									<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
 										<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
 										<svg width="16" height="16" viewBox="0 0 16 16">
-											<defs><filter id="invert-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
-											<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invert-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon"></image>
+											<defs><filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
+											<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon"></image>
 										</svg>
 										<div class="icon-loading-small-dark" style="display:none;"></div>
 										<span><?php p($entry['name']); ?></span>
diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php
index f7bb23cd3de27..dcc0fd3ba67a8 100644
--- a/lib/private/TemplateLayout.php
+++ b/lib/private/TemplateLayout.php
@@ -105,6 +105,15 @@ public function __construct( $renderAs, $appId = '' ) {
 				$this->assign('userAvatarVersion', \OC::$server->getConfig()->getUserValue(\OC_User::getUser(), 'avatar', 'version', 0));
 			}
 
+			// check if app menu icons should be inverted
+			try {
+				/** @var \OCA\Theming\Util $util */
+				$util = \OC::$server->query(\OCA\Theming\Util::class);
+				$this->assign('themingInvertMenu', $util->invertTextColor(\OC::$server->getThemingDefaults()->getColorPrimary()));
+			} catch (\OCP\AppFramework\QueryException $e) {
+				$this->assign('themingInvertMenu', false);
+			}
+
 		} else if ($renderAs == 'error') {
 			parent::__construct('core', 'layout.guest', '', false);
 			$this->assign('bodyid', 'body-login');
diff --git a/settings/css/settings.css b/settings/css/settings.css
index 324582caeffcc..9922c52ce7655 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -1050,6 +1050,7 @@ form.section {
 
 #apps-list.installed .app-image {
 	width: 44px;
+	height: auto;
 	text-align: right;
 }
 
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 278c307b1f307..818d119a0ae79 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -233,8 +233,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 
 		var page = $('#app-' + app.id);
 
-		// image loading kung-fu (IE doesn't properly scale SVGs, so disable app icons)
-		if (app.preview && !OC.Util.isIE()) {
+		if (app.preview) {
 			var currentImage = new Image();
 			currentImage.src = app.preview;
 
@@ -286,8 +285,10 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			img = '<svg viewBox="0 0 72 72">';
 			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url  + '"  class="app-icon" /></svg>';
 		} else {
+			var rnd = Math.floor((Math.random() * 100 )) + new Date().getSeconds() + new Date().getMilliseconds();
 			img = '<svg width="32" height="32" viewBox="0 0 32 32">';
-			img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
+			img += '<defs><filter id="invertIconApps-' + rnd + '"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>'
+			img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invertIconApps-' + rnd + ')" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
 		}
 		return img;
 	},
@@ -631,24 +632,29 @@ OC.Settings.Apps = OC.Settings.Apps || {
 					}
 
 					if ($('#appmenu').children('li[data-id="' + entry.id + '"]').length === 0) {
-							var li = $('<li></li>');
-							li.attr('data-id', entry.id);
-							var img = '<img src="' + entry.icon + '" class="app-icon">';
-							var a = $('<a></a>').attr('href', entry.href);
-							var filename = $('<span></span>');
-							var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
-							filename.text(entry.name);
-							a.prepend(filename);
-							a.prepend(loading);
-							a.prepend(img);
-							li.append(a);
-							$('#appmenu li[data-id='+ previousEntry.id+']').after(li);
-							if(addedApps[entry.id]) {
-								li.animate({opacity: 0.5})
-									.animate({opacity: 1})
-									.animate({opacity: 0.5})
-									.animate({opacity: 1});
-							}
+						var li = $('<li></li>');
+						li.attr('data-id', entry.id);
+						var img = '<img src="' + entry.icon + '" class="app-icon">';
+						if (OCA.Theming && OCA.Theming.inverted) {
+							img = '<svg width="20" height="20" viewBox="0 0 20 20">';
+							img += '<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>';
+							img += '<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + entry.icon + '"  class="app-icon" /></svg>';
+						}
+						var a = $('<a></a>').attr('href', entry.href);
+						var filename = $('<span></span>');
+						var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
+						filename.text(entry.name);
+						a.prepend(filename);
+						a.prepend(loading);
+						a.prepend(img);
+						li.append(a);
+						$('#appmenu li[data-id='+ previousEntry.id+']').after(li);
+						if(addedApps[entry.id]) {
+							li.animate({opacity: 0.5})
+								.animate({opacity: 1})
+								.animate({opacity: 0.5})
+								.animate({opacity: 1});
+						}
 					}
 					previousEntry = entry;
 				}
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index e32a524f78af4..16de6151206f6 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -201,9 +201,6 @@
 	</ul>
 </div>
 <div id="app-content" class="icon-loading">
-	<svg class="app-filter">
-		<defs><filter id="invertIcon"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
-	</svg>
 	<div id="apps-list"></div>
 	<div id="apps-list-empty" class="hidden emptycontent emptycontent-search">
 		<div class="icon-search"></div>