diff --git a/dev/Styles/User/Attachments.less b/dev/Styles/User/Attachments.less
index 23ac69f99..c5963befe 100644
--- a/dev/Styles/User/Attachments.less
+++ b/dev/Styles/User/Attachments.less
@@ -31,7 +31,7 @@
 		}
 	}
 
-	.attachmentIconParent {
+	.attachmentIcon {
 		position: absolute;
 		height: 48px;
 		width: 48px;
@@ -85,7 +85,9 @@
 	.iconMain, .iconPreview {
 		padding: 6px 0 0;
 		font-size: 36px;
-		color: #aaa;
+		color: var(--main-color);
+		filter: invert(33%);
+		mix-blend-mode: difference;
 
 		&.icon-none {
 			display: none;
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
index 97e081b82..3f5473aef 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
@@ -231,7 +231,7 @@
 							<ul class="attachmentList" data-bind="foreach: listAttachments">
 								<li class="attachmentItem" draggable="true"
 										data-bind="event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
-									<div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }, attr: { 'style': thumbnailStyle() }">
+									<div class="attachmentIcon" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }, attr: { 'style': thumbnailStyle() }">
 										<i class="hidePreview iconMain" data-bind="css: iconClass()"></i>
 										<div class="showPreview">
 											<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
index d7c8dc503..821e3fdd9 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
@@ -175,7 +175,7 @@
 			data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
 		<ul class="attachmentList" data-bind="foreach: attachments">
 			<li class="attachmentItem" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
-				<div class="attachmentIconParent">
+				<div class="attachmentIcon">
 					<i class="iconMain" data-bind="css: iconClass, visible: !uploading() || 0 === progress()"></i>
 					<div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div>
 					<div class="iconBG" data-bind="text: progressText, visible: uploading"></div>