diff --git a/.gitignore b/.gitignore
index d16324e1..db224d77 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,8 +3,8 @@
 ######################
 /css/src/sprites-bw.scss
 /css/src/sprites-color.scss
-/img/bw.svg
-/img/color.svg
+/img/sprt-bw.svg
+/img/sprt-color.svg
 /js/
 
 #################
diff --git a/css/src/style.scss b/css/src/style.scss
index 797c8da5..52e25859 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -5,17 +5,13 @@
 #app-navigation {
 	> ul {
 		> li {
-			&.collection .app-navigation-entry-icon {
-				background-image: unset;
-
-				&::before {
-					content: '';
-					position: absolute;
-					width: 16px;
-					height: 16px;
-					background: var(--icon-tasks-bw-000) no-repeat;
-					background-position: inherit;
-				}
+			&.collection .app-navigation-entry-icon::before {
+				content: '';
+				position: absolute;
+				width: 16px;
+				height: 16px;
+				background: var(--icon-tasks-sprt-bw-000) no-repeat;
+				background-position: inherit;
 			}
 
 			&.list {
@@ -202,7 +198,7 @@
 					content: '';
 					width: 16px;
 					height: 16px;
-					background: var(--icon-tasks-bw-000) no-repeat;
+					background: var(--icon-tasks-sprt-bw-000) no-repeat;
 					background-position: inherit;
 				}
 			}
@@ -559,7 +555,7 @@
 							.icon {
 								vertical-align: unset;
 
-								&.icon-add {
+								&.sprt-add {
 									&:hover {
 										opacity: 1;
 									}
@@ -895,7 +891,7 @@
 							.icon {
 								display: block;
 
-								&.icon-color {
+								&.sprt-color {
 									opacity: 1;
 									cursor: unset;
 								}
@@ -1123,7 +1119,7 @@
 				}
 			}
 
-			&.date:hover .icon.icon-trash {
+			&.date:hover .icon.sprt-trash {
 				display: none;
 			}
 		}
@@ -1202,9 +1198,9 @@ input[type='checkbox'].checkbox {
 		opacity: .7;
 	}
 
-	&.icon-checkmark,
-	&.icon-tag-active,
-	&[class*=' icon-task-star-'] {
+	&.sprt-checkmark,
+	&.sprt-tag-active,
+	&[class*=' sprt-task-star-'] {
 		opacity: 1 !important;
 	}
 
@@ -1227,8 +1223,8 @@ input[type='checkbox'].checkbox {
 	height: 16px;
 
 	&.success {
-		@extend .icon-color;
-		@extend .icon-checkmark-color;
+		@extend .sprt-color;
+		@extend .sprt-checkmark-color;
 	}
 
 	&.refresh {
diff --git a/lib/Service/CollectionsService.php b/lib/Service/CollectionsService.php
index 8a3c33ad..76e3a0b7 100644
--- a/lib/Service/CollectionsService.php
+++ b/lib/Service/CollectionsService.php
@@ -71,32 +71,32 @@ class CollectionsService {
 				'id' => "starred",
 				'displayName' => (string)$this->l10n->t('Important'),
 				'show' => 2,
-				'icon' => 'icon-task-star'),
+				'icon' => 'sprt-task-star'),
 			array(
 				'id' => "today",
 				'displayName' => (string)$this->l10n->t('Today'),
 				'show' => 2,
-				'icon' => 'icon-calendar'),
+				'icon' => 'sprt-calendar'),
 			array(
 				'id' => "week",
 				'displayName' => (string)$this->l10n->t('Week'),
 				'show' => 2,
-				'icon' => 'icon-calendar'),
+				'icon' => 'sprt-calendar'),
 			array(
 				'id' => "all",
 				'displayName' => (string)$this->l10n->t('All'),
 				'show' => 2,
-				'icon' => 'icon-all'),
+				'icon' => 'sprt-all'),
 			array(
 				'id' => "current",
 				'displayName' => (string)$this->l10n->t('Current'),
 				'show' => 2,
-				'icon' => 'icon-current'),
+				'icon' => 'sprt-current'),
 			array(
 				'id' => "completed",
 				'displayName' => (string)$this->l10n->t('Completed'),
 				'show' => 2,
-				'icon' => 'icon-checkmark')
+				'icon' => 'sprt-checkmark')
 		);
 		foreach ($collections as $key => $collection){
 			$tmp = $this->settings->getUserValue($this->userId, $this->appName,'show_'.$collection['id']);
diff --git a/src/components/AppNavigation/List.vue b/src/components/AppNavigation/List.vue
index a1ad5b67..048cdbc8 100644
--- a/src/components/AppNavigation/List.vue
+++ b/src/components/AppNavigation/List.vue
@@ -47,7 +47,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			:calendar="calendar" />
 		<AppNavigationItem v-click-outside="cancelCreate"
 			:title="$t('tasks', 'Add List…')"
-			icon="icon-add"
+			icon="sprt-add"
 			:class="{edit: creating}"
 			class="collection reactive"
 			@click="startCreate($event)">
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index c19656ea..00407d5a 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -77,31 +77,31 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					{{ dueDateString }}
 				</div>
 				<div v-if="task.pinned">
-					<span class="icon icon-bw icon-pinned" />
+					<span class="icon icon-sprt-bw sprt-pinned" />
 				</div>
 				<div v-if="task.note!=''">
-					<span class="icon icon-bw icon-note" />
+					<span class="icon icon-sprt-bw sprt-note" />
 				</div>
 				<button v-if="hasCompletedSubtasks"
 					class="inline reactive no-nav"
 					:title="$t('tasks', 'Toggle visibility of completed subtasks.')"
 					@click="toggleCompletedSubtasksVisibility(task)">
 					<span :class="{'active': !task.hideCompletedSubtasks}"
-						class="icon icon-bw icon-toggle toggle-completed-subtasks" />
+						class="icon icon-sprt-bw sprt-toggle toggle-completed-subtasks" />
 				</button>
 				<button v-if="Object.values(task.subTasks).length"
 					class="inline reactive no-nav"
 					:title="$t('tasks', 'Toggle visibility of all subtasks.')"
 					@click="toggleSubtasksVisibility(task)">
-					<span :class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
-						class="icon icon-bw subtasks" />
+					<span :class="task.hideSubtasks ? 'sprt-subtasks-hidden' : 'sprt-subtasks-visible'"
+						class="icon icon-sprt-bw" />
 				</button>
 				<button v-if="!task.calendar.readOnly"
 					class="inline task-addsubtask add-subtask reactive no-nav"
 					:taskId="task.uri"
 					:title="subtasksCreationPlaceholder"
 					@click="showSubtaskInput = true">
-					<span class="icon icon-bw icon-add" :taskId="task.uri" />
+					<span class="icon icon-sprt-bw sprt-add" :taskId="task.uri" />
 				</button>
 				<button class="inline task-star reactive no-nav" @click="toggleStarred(task)">
 					<span :class="[iconStar, {'disabled': task.calendar.readOnly}]" class="icon" />
@@ -210,13 +210,13 @@ export default {
 
 		iconStar: function() {
 			if (+this.task.priority > 5) {
-				return 'icon-color icon-task-star-low'
+				return 'sprt-color sprt-task-star-low'
 			} else if (+this.task.priority === 5) {
-				return 'icon-color icon-task-star-medium'
+				return 'sprt-color sprt-task-star-medium'
 			} else if (+this.task.priority > 0 && +this.task.priority < 5) {
-				return 'icon-color icon-task-star-high'
+				return 'sprt-color sprt-task-star-high'
 			} else {
-				return 'icon-bw icon-task-star'
+				return 'icon-sprt-bw sprt-task-star'
 			}
 		},
 
diff --git a/src/components/TheDetails.vue b/src/components/TheDetails.vue
index 1416d07d..0b81caed 100644
--- a/src/components/TheDetails.vue
+++ b/src/components/TheDetails.vue
@@ -102,10 +102,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="section-utils">
 							<button class="inline reactive">
-								<span class="icon icon-color icon-checkmark-color" />
+								<span class="icon sprt-color sprt-checkmark-color" />
 							</button>
 							<button class="delete inline reactive" @click="setProperty('start', null)">
-								<span class="icon icon-bw icon-trash" />
+								<span class="icon icon-sprt-bw sprt-trash" />
 							</button>
 						</div>
 					</li>
@@ -146,10 +146,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="section-utils">
 							<button class="inline reactive">
-								<span class="icon icon-color icon-checkmark-color" />
+								<span class="icon sprt-color sprt-checkmark-color" />
 							</button>
 							<button class="delete inline reactive" @click="setProperty('due', null)">
-								<span class="icon icon-bw icon-trash" />
+								<span class="icon icon-sprt-bw sprt-trash" />
 							</button>
 						</div>
 					</li>
@@ -199,7 +199,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 							class="section-content"
 							@click="editProperty('class')">
 							<span class="section-icon">
-								<span class="icon icon-color icon-privacy" />
+								<span class="icon sprt-color sprt-privacy" />
 							</span>
 							<div class="detail-multiselect-container blue">
 								<Multiselect
@@ -272,10 +272,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="section-utils">
 							<button class="inline reactive">
-								<span class="icon icon-color icon-checkmark-color" />
+								<span class="icon sprt-color sprt-checkmark-color" />
 							</button>
 							<button class="delete inline reactive" @click="setProperty('priority', 0)">
-								<span class="icon icon-bw icon-trash" />
+								<span class="icon icon-sprt-bw sprt-trash" />
 							</button>
 						</div>
 					</li>
@@ -308,10 +308,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="section-utils">
 							<button class="inline reactive">
-								<span class="icon icon-color icon-checkmark-color" />
+								<span class="icon sprt-color sprt-checkmark-color" />
 							</button>
 							<button class="delete inline reactive" @click="setProperty('complete', 0)">
-								<span class="icon icon-bw icon-trash" />
+								<span class="icon icon-sprt-bw sprt-trash" />
 							</button>
 						</div>
 					</li>
@@ -362,7 +362,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				<button :style="{visibility: task.calendar.readOnly ? 'hidden' : 'visible'}"
 					class="close-all reactive inline"
 					@click="removeTask">
-					<span class="icon icon-bw icon-trash" />
+					<span class="icon icon-sprt-bw sprt-trash" />
 				</button>
 				<span v-tooltip="{
 						content: taskInfo,
@@ -372,7 +372,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					<span class="icon icon-info" />
 				</span>
 				<button class="close-all reactive inline" @click="closeDetails">
-					<span class="icon icon-bw icon-hide" />
+					<span class="icon icon-sprt-bw sprt-hide" />
 				</button>
 			</div>
 		</div>
@@ -613,37 +613,37 @@ export default {
 		},
 		iconStar: function() {
 			if (+this.task.priority) {
-				return 'icon-color icon-task-star-' + this.priorityClass
+				return 'sprt-color sprt-task-star-' + this.priorityClass
 			} else {
-				return 'icon-bw icon-task-star'
+				return 'icon-sprt-bw sprt-task-star'
 			}
 		},
 		iconPinned: function() {
 			if (this.task.pinned) {
-				return 'icon-bw icon-pinned'
+				return 'icon-sprt-bw sprt-pinned'
 			} else {
-				return 'icon-bw icon-pinned-off'
+				return 'icon-sprt-bw sprt-pinned-off'
 			}
 		},
 		iconPercent: function() {
 			if (this.task.complete > 0) {
-				return 'icon-color icon-percent-active'
+				return 'sprt-color sprt-percent-active'
 			} else {
-				return 'icon-bw icon-percent'
+				return 'icon-sprt-bw sprt-percent'
 			}
 		},
 		iconCategories: function() {
 			if (this.task.categories.length > 0) {
-				return 'icon-color icon-tag-active'
+				return 'sprt-color sprt-tag-active'
 			} else {
-				return 'icon-bw icon-tag'
+				return 'icon-sprt-bw sprt-tag'
 			}
 		},
 		iconStatus: function() {
 			if (this.task.status) {
-				return 'icon-color icon-status'
+				return 'sprt-color sprt-status'
 			} else {
-				return 'icon-bw icon-current'
+				return 'icon-sprt-bw sprt-current'
 			}
 		},
 		...mapGetters({
@@ -741,17 +741,17 @@ export default {
 
 		startDateIcon: function(date) {
 			if (date.isValid()) {
-				return `icon-color icon-startdate-${overdue(date) ? 'overdue' : 'due'}`
+				return `sprt-color sprt-startdate-${overdue(date) ? 'overdue' : 'due'}`
 			} else {
-				return 'icon-bw icon-startdate'
+				return 'icon-sprt-bw sprt-startdate'
 			}
 		},
 
 		dueDateIcon: function(date) {
 			if (date.isValid()) {
-				return `icon-color icon-duedate-${overdue(date) ? 'overdue' : 'due'}`
+				return `sprt-color sprt-duedate-${overdue(date) ? 'overdue' : 'due'}`
 			} else {
-				return 'icon-bw icon-duedate'
+				return 'icon-sprt-bw sprt-duedate'
 			}
 		},
 
diff --git a/svg-sprite-bw.json b/svg-sprite-bw.json
index b4d778de..d176a03f 100644
--- a/svg-sprite-bw.json
+++ b/svg-sprite-bw.json
@@ -8,9 +8,9 @@
 	"mode": {
 		"css": {
 			"bust": false,
-			"common": "icon-bw",
-			"prefix": ".icon-%s",
-			"sprite": "../img/bw.svg",
+			"common": "icon-sprt-bw",
+			"prefix": ".sprt-%s",
+			"sprite": "../img/sprt-bw.svg",
 			"render": {
 				"scss": {
 					"template": "svg-sprite-bw.tmpl",
diff --git a/svg-sprite-bw.tmpl b/svg-sprite-bw.tmpl
index 6926de95..ee3442b6 100644
--- a/svg-sprite-bw.tmpl
+++ b/svg-sprite-bw.tmpl
@@ -3,7 +3,7 @@
 	@include {{mixinName}};
 }
 {{/hasCommon}}{{/hasMixin}}{{^hasMixin}}{{#hasCommon}}{{/hasCommon}}{{^hasCommon}}%{{/hasCommon}}
-@include icon-black-white('bw', 'tasks', 1, false);
+@include icon-black-white('sprt-bw', 'tasks', 1, false);
 
 {{/hasMixin}}{{#shapes}}{{#selector.shape}}{{expression}}{{^last}},
 {{/last}}{{/selector.shape}} {
diff --git a/svg-sprite-color.json b/svg-sprite-color.json
index ad6f0948..9f7acc85 100644
--- a/svg-sprite-color.json
+++ b/svg-sprite-color.json
@@ -8,9 +8,9 @@
 	"mode": {
 		"css": {
 			"bust": false,
-			"common": "icon-color",
-			"prefix": ".icon-%s",
-			"sprite": "../img/color.svg",
+			"common": "sprt-color",
+			"prefix": ".sprt-%s",
+			"sprite": "../img/sprt-color.svg",
 			"render": {
 				"scss": {
 					"template": "svg-sprite-color.tmpl",
diff --git a/tests/php/unit/Service/CollectionsServiceTest.php b/tests/php/unit/Service/CollectionsServiceTest.php
index 1c3a5a4a..3348e06c 100644
--- a/tests/php/unit/Service/CollectionsServiceTest.php
+++ b/tests/php/unit/Service/CollectionsServiceTest.php
@@ -61,32 +61,32 @@ class CollectionsServiceTest extends TestCase {
 				'id' => "starred",
 				'displayName' => 'Important',
 				'show' => 2,
-				'icon' => 'icon-task-star'),
+				'icon' => 'sprt-task-star'),
 			array(
 				'id' => "today",
 				'displayName' => 'Today',
 				'show' => 2,
-				'icon' => 'icon-calendar'),
+				'icon' => 'sprt-calendar'),
 			array(
 				'id' => "week",
 				'displayName' => 'Week',
 				'show' => 2,
-				'icon' => 'icon-calendar'),
+				'icon' => 'sprt-calendar'),
 			array(
 				'id' => "all",
 				'displayName' => 'All',
 				'show' => 2,
-				'icon' => 'icon-all'),
+				'icon' => 'sprt-all'),
 			array(
 				'id' => "current",
 				'displayName' => 'Current',
 				'show' => 2,
-				'icon' => 'icon-current'),
+				'icon' => 'sprt-current'),
 			array(
 				'id' => "completed",
 				'displayName' => 'Completed',
 				'show' => 2,
-				'icon' => 'icon-checkmark')
+				'icon' => 'sprt-checkmark')
 		);
 		
 		$map = [