diff --git a/css/icons.scss b/css/icons.scss
index 15d5df34..fcc5cafc 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -33,7 +33,15 @@
 @include icon-black-white('sync', 'contacts', 2);
 @include icon-black-white('recent-actors', 'contacts', 1);
 @include icon-black-white('circles', 'contacts', 1);
-@include icon-black-white('contacts', 'contacts', 1);
+
+.icon-contacts {
+	&-dark {
+		@include icon-color('contacts', 'contacts', $color-black);
+	}
+	&-white {
+		@include icon-color('contacts', 'contacts', $color-white);
+	}
+}
 	
 // social network icons:
 @include icon-black-white('facebook', 'contacts', 2);	// “facebook (fab)” by fontawesome.com is licensed under CC BY 4.0. (https://fontawesome.com/icons/facebook?style=brands)
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index f22c73c1..489e01f2 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -23,7 +23,7 @@
 <template>
 	<AppContentDetails>
 		<!-- nothing selected or contact not found -->
-		<EmptyContent v-if="!contact" icon="icon-contacts">
+		<EmptyContent v-if="!contact" icon="icon-contacts-dark">
 			{{ t('contacts', 'No contact selected') }}
 			<template #desc>
 				{{ t('contacts', 'Select a contact on the list to begin') }}
@@ -423,7 +423,7 @@ export default {
 		groupsModel() {
 			return {
 				readableName: t('contacts', 'Groups'),
-				icon: 'icon-contacts',
+				icon: 'icon-contacts-dark',
 			}
 		},
 
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index 5c8e31ff..8ee4a6cb 100644
--- a/src/components/MemberList.vue
+++ b/src/components/MemberList.vue
@@ -26,11 +26,11 @@
 			{{ t('contacts', 'Loading members list …') }}
 		</EmptyContent>
 
-		<EmptyContent v-else-if="!circle.isMember" icon="icon-contacts">
+		<EmptyContent v-else-if="!circle.isMember" icon="icon-contacts-dark">
 			{{ t('contacts', 'The list of members is only visible to members of this circle') }}
 		</EmptyContent>
 
-		<EmptyContent v-else icon="icon-contacts">
+		<EmptyContent v-else icon="icon-contacts-dark">
 			{{ t('contacts', 'There is no member in this circle') }}
 		</EmptyContent>
 	</AppContentList>
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index b8f13183..a2df55bf 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -23,7 +23,7 @@
 <template>
 	<div v-if="propModel" class="property property--without-actions">
 		<PropertyTitle
-			icon="icon-contacts"
+			icon="icon-contacts-dark"
 			:readable-name="t('contacts', 'Groups')" />
 
 		<div class="property__row">
diff --git a/src/files-action.js b/src/files-action.js
index 08365744..d2aff3df 100644
--- a/src/files-action.js
+++ b/src/files-action.js
@@ -31,7 +31,7 @@ window.addEventListener('DOMContentLoaded', () => {
 			displayName: t('contacts', 'Import'),
 			mime,
 			permissions: OC.PERMISSION_READ,
-			iconClass: 'icon-contacts',
+			iconClass: 'icon-contacts-dark',
 			actionHandler(fileName, context) {
 				const absPath = `${context.dir === '/' ? '' : context.dir}/${fileName}`
 				window.location = generateUrl(`/apps/contacts/import?file=${absPath}`)
diff --git a/templates/main.php b/templates/main.php
index 0d27e7f3..65e811e6 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -3,7 +3,7 @@ if (\OC_Util::isIe()) {
 	?>
 <div id="app-content">
 	<div class="emptycontent">
-		<div class="icon-contacts"></div>
+		<div class="icon-contacts-dark"></div>
 		<h2><?php p($l->t('Your web browser is out of date')); ?></h2>
 		<p><?php p($l->t('This application is not compatible with Internet Explorer')); ?></p>
 	</div>