diff --git a/dev/External/Admin/ko.js b/dev/External/Admin/ko.js
index be2278275..36aeecd82 100644
--- a/dev/External/Admin/ko.js
+++ b/dev/External/Admin/ko.js
@@ -11,8 +11,8 @@ ko.bindingHandlers.saveTrigger = {
 		if ('custom' === element.saveTriggerType) {
 			element.append(
 				'  ',
-				Element.fromHTML('<i class="icon-spinner animated"></i>'),
-				Element.fromHTML('<i class="icon-remove error"></i>'),
+				Element.fromHTML('<i class="icon-spinner"></i>'),
+				Element.fromHTML('<i class="fontastic error">✖</i>'),
 				Element.fromHTML('<i class="icon-ok success"></i>')
 			);
 			element.classList.add('settings-saved-trigger');
diff --git a/dev/Stores/User/Pgp.js b/dev/Stores/User/Pgp.js
index 31cbcc875..3e839333d 100644
--- a/dev/Stores/User/Pgp.js
+++ b/dev/Stores/User/Pgp.js
@@ -352,7 +352,7 @@ class PgpUserStore {
 			if (encrypted || signed) {
 				const domText = dom.textContent;
 
-				verControl = Element.fromHTML('<div class="b-openpgp-control"><i class="icon-lock"></i></div>'); // 🔒
+				verControl = Element.fromHTML('<div class="b-openpgp-control"><i class="fontastic">🔒</i></div>');
 				if (encrypted) {
 					verControl.title = i18n('MESSAGE/PGP_ENCRYPTED_MESSAGE_DESC');
 					verControl.addEventHandler('click', domControlEncryptedClickHelper(this, dom, domText, recipients));
diff --git a/dev/Styles/SettingsGeneral.less b/dev/Styles/SettingsGeneral.less
index 773a33bdb..fd3136366 100644
--- a/dev/Styles/SettingsGeneral.less
+++ b/dev/Styles/SettingsGeneral.less
@@ -5,20 +5,6 @@
 		margin-right: 15px;
 	}
 
-	.notification-desc-denied {
-		color: #999;
-		display: none;
-	}
-
-	.denied-by-browser {
-		.notification-desc-denied {
-			display: inline;
-		}
-		.notification-desc {
-			color: #999;
-		}
-	}
-
 	.flag-selector {
 		padding-top: 5px;
 	}
diff --git a/dev/Styles/_FontasticToBoot.less b/dev/Styles/_FontasticToBoot.less
index a6ce7812d..879a83b22 100644
--- a/dev/Styles/_FontasticToBoot.less
+++ b/dev/Styles/_FontasticToBoot.less
@@ -1,43 +1,36 @@
 
+.fontastic,
 [class^="icon-"],
 [class*=" icon-"] {
 	display: inline-block;
-	width: 16px;
-	height: 16px;
+	width: 1em;
+	height: 1em;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
 	line-height: 1;
 	font-size: 16px;
 	vertical-align: text-top;
 
-	.disabled &, .btn[disabled] &{
+	.disabled &:not(.icon-white),
+	.btn[disabled] &:not(.icon-white){
 		color: grey;
-		&.icon-white {
-			color: #fff;
-		}
 	}
 }
 
 .icon-folder, .icon-folder-add, .icon-list {
-	line-height: 18px;
 	font-size: 18px;
 	margin-top: -1px;
 	margin-left: -1px;
 	width: 17px;
 }
 
-.iconsize50 {
-	line-height: 50px;
-	font-size: 50px;
-	width: 50px;
-	height: 50px;
-}
-
 .iconsize24 {
-	line-height: 24px;
 	font-size: 24px;
 }
 
 .iconsize20 {
-	line-height: 20px;
 	font-size: 20px;
 }
 
@@ -89,45 +82,6 @@
 	color: red;
 }
 
-.iconcolor-white {
-	color: white;
-}
-
-.iconcolor-grey {
-	color: #aaa;
-}
-
-.denied-by-browser {
-	cursor: default;
-	.icon-checkbox-checked, icon-checkbox-unchecked {
-		cursor: default;
-	}
-}
-
-.right-mini, .down-mini {
-	width: 16px;
-	line-height: 20px;
-}
-
-/*
-@keyframes rotation {
-	to   {transform: rotate(1turn);}
-}
-
-.icon-spinner {
-    width: 16px;
-    height: 16px;
-
-	&:before {
-		transform-origin: 8px 8px;
-		margin-top: 1px;
-		display: inline-block;
-		font-size: 16px;
-		line-height: 100%;
-	}
-}
-*/
-
 @keyframes rotation {
 	to   {transform: rotate(1turn);}
 }
@@ -136,10 +90,6 @@
 
 	font-family: Arial;
 
-	&:before {
-		content: "";
-	}
-
 	height: 11px;
 	width: 11px;
 
@@ -150,15 +100,6 @@
 	border-top-color: #333;
 	border-radius: 100%;
 
-	animation: none;
-
-	&.animated {
-		border-color: transparent;
-		border-top-color: #999;
-
-		animation: rotation .8s infinite ease-in-out;
-	}
-
 	&.big {
 
 		height: 13px;
@@ -179,3 +120,14 @@
 		}
 	}
 }
+
+.icon-spinner:not(.not-animated) {
+	border-color: transparent;
+	border-top-color: #999;
+	animation: rotation .8s infinite ease-in-out;
+}
+
+.fontastic.icon-spinner {
+    text-indent: -1em;
+    overflow: hidden;
+}
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html
index df56b9647..79173317e 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html
@@ -14,7 +14,7 @@
 							autocomplete="username" autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]LOGIN/LABEL_LOGIN"
 							data-bind="textInput: login, disable: submitRequest" />
 						<span class="add-on">
-							<i class="icon-user"></i>
+							<i class="fontastic">👤</i>
 						</span>
 					</div>
 				</div>
@@ -25,7 +25,7 @@
 							autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]LOGIN/LABEL_PASSWORD"
 							data-bind="textInput: password, disable: submitRequest" />
 						<span class="add-on" tabindex="-1" data-bind="command: submitCommand, tooltip: 'LOGIN/BUTTON_LOGIN'">
-							<i class="icon-key" data-bind="visible: '' === password()"></i>
+							<i class="fontastic" data-bind="visible: '' === password()">🔑</i>
 							<button type="submit" class="btn-submit-icon-wrp" data-bind="visible: '' !== password()">
 								<i class="icon-right-middle login-submit-icon"></i>
 							</button>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
index bcaa28d0f..1ef76b237 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
@@ -2,7 +2,7 @@
 	<div class="b-toolbar g-ui-user-select-none">
 		<div class="btn-toolbar">
 			<h4 class="pull-left">
-				<i class="icon-spinner animated" style="margin-top: 2px" data-bind="style: {'visibility': adminManLoadingVisibility }"></i>
+				<i class="icon-spinner" style="margin-top: 2px" data-bind="style: {'visibility': adminManLoadingVisibility }"></i>
 				&nbsp;&nbsp;
 				SnappyMail
 				—
@@ -10,7 +10,7 @@
 			</h4>
 			<div class="btn-group pull-right">
 				<a class="btn single btn-narrow" data-bind="click: logoutClick">
-					<i class="icon-power"></i>
+					<i class="fontastic">⏻</i>
 				</a>
 			</div>
 		</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsContacts.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsContacts.html
index 92693b68c..c8bca08c2 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsContacts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsContacts.html
@@ -73,7 +73,7 @@ pgsql:host=127.0.0.1;port=5432;dbname=rainloop
 			<div class="control-group">
 				<div class="controls">
 					<a class="btn" data-bind="command: testContactsCommand, css: { 'btn-success': testContactsSuccess, 'btn-danger': testContactsError }">
-						<i data-bind="css: {'icon-info': !testing(), 'icon-spinner animated': testing(), 'icon-white': testContactsSuccess() || testContactsError() }"></i>
+						<i data-bind="css: {'icon-info': !testing(), 'icon-spinner': testing(), 'icon-white': testContactsSuccess() || testContactsError() }"></i>
 						&nbsp;&nbsp;
 						<span data-i18n="TAB_CONTACTS/BUTTON_TEST"></span>
 					</a>
@@ -93,7 +93,7 @@ pgsql:host=127.0.0.1;port=5432;dbname=rainloop
 			<div class="control-group">
 				<div class="controls">
 					<a class="btn" data-bind="command: testContactsCommand, css: { 'btn-success': testContactsSuccess, 'btn-danger': testContactsError }">
-						<i data-bind="css: {'icon-info': !testing(), 'icon-spinner animated': testing(), 'icon-white': testContactsSuccess() || testContactsError() }"></i>
+						<i data-bind="css: {'icon-info': !testing(), 'icon-spinner': testing(), 'icon-white': testContactsSuccess() || testContactsError() }"></i>
 						&nbsp;&nbsp;
 						<span data-i18n="TAB_CONTACTS/BUTTON_TEST"></span>
 					</a>
@@ -108,4 +108,4 @@ pgsql:host=127.0.0.1;port=5432;dbname=rainloop
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsDomainListItem.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsDomainListItem.html
index 6d32c4368..292499e25 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsDomainListItem.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsDomainListItem.html
@@ -10,7 +10,7 @@
 	</td>
 	<td>
 		<span class="delete-domain" data-bind="visible: !deleteAccess(), click: function (oDomain) { $root.domainForDeletion(oDomain); }">
-			<i class="icon-trash"></i>
+			<i class="fontastic">🗑</i>
 		</span>
 	</td>
 	<td>
@@ -18,4 +18,4 @@
 			<i data-bind="css: {'icon-checkbox-checked': !disabled(), 'icon-checkbox-unchecked': disabled}"></i>
 		</span>
 	</td>
-</tr>
\ No newline at end of file
+</tr>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsPackagesListItem.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsPackagesListItem.html
index cc15c6c2a..bc21d1ced 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsPackagesListItem.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsPackagesListItem.html
@@ -16,7 +16,7 @@
 	<td class="package-actions-parent">
 		<i class="icon-download e-action button-download" data-bind="visible: !loading() && canBeUpdated, click: function () { $root.installPackage($data); }"></i>
 		&nbsp;
-		<i class="icon-trash e-action button-delete" data-bind="visible: !loading() && canBeDeleted, click: function () { $root.deletePackage($data); }"></i>
-		<i class="icon-spinner animated" data-bind="visible: loading"></i>
+		<i class="fontastic e-action button-delete" data-bind="visible: !loading() && canBeDeleted, click: function () { $root.deletePackage($data); }">🗑</i>
+		<i class="icon-spinner" data-bind="visible: loading"></i>
 	</td>
 </tr>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html
index 47c21d4e7..9e24eb7e1 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html
@@ -32,7 +32,7 @@
 					<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 						data-bind="textInput: twoFactorDropperUser, hasfocus: twoFactorDropperUserFocused" placeholder="Email"/>
 					<button class="btn">
-						<i class="icon-spinner animated" data-bind="visible: true"></i>
+						<i class="icon-spinner" data-bind="visible: true"></i>
 						<span data-bind="visible: false">OK</span>
 					</button>
 				</div>
@@ -102,7 +102,7 @@
 		<div class="control-group">
 			<div class="controls">
 				<a class="btn" data-bind="command: saveNewAdminPasswordCommand, css: { 'btn-success': adminPasswordUpdateSuccess, 'btn-danger': adminPasswordUpdateError }">
-					<i class="icon-key" data-bind="css: {'icon-white': adminPasswordUpdateSuccess() || adminPasswordUpdateError() }"></i>
+					<i class="fontastic" data-bind="css: {'icon-white': adminPasswordUpdateSuccess() || adminPasswordUpdateError() }">🔑></i>
 					&nbsp;&nbsp;
 					<span data-i18n="TAB_SECURITY/BUTTON_UPDATE_PASSWORD"></span>
 				</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html
index b5de4ece7..b8071a793 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html
@@ -225,12 +225,12 @@
 		<a class="btn button-test-connection pull-left" data-bind="visible: 'main' === page(), command: testConnectionCommand, css: {
 		   'btn-success': testingDone() && !testingImapError() && !testingSmtpError(),
 		   'btn-danger': testingDone() && (testingImapError() || testingSmtpError()) }">
-			<i data-bind="css: {'icon-info': !testing(), 'icon-spinner animated': testing(), 'icon-white': testingDone()}"></i>
+			<i data-bind="css: {'icon-info': !testing(), 'icon-spinner': testing(), 'icon-white': testingDone()}"></i>
 			&nbsp;&nbsp;
 			<span data-i18n="POPUPS_DOMAIN/BUTTON_TEST"></span>
 		</a>
 		<a class="btn button-white-list pull-left" data-bind="command: whiteListCommand, visible: 'main' === page()">
-			<i class="icon-users"></i>
+			<i class="fontastic">👥</i>
 			&nbsp;&nbsp;
 			<span data-i18n="POPUPS_DOMAIN/BUTTON_WHITE_LIST"></span>
 		</a>
@@ -240,13 +240,13 @@
 			<span data-i18n="POPUPS_DOMAIN/BUTTON_BACK"></span>
 		</a>
 		<a class="btn buttonClose" data-bind="command: cancelCommand">
-			<i class="icon-remove"></i>
+			<i class="fontastic">✖</i>
 			&nbsp;&nbsp;
 			<span data-i18n="POPUPS_DOMAIN/BUTTON_CLOSE"></span>
 		</a>
 		<a class="btn buttonClear" data-bind="command: createOrAddCommand">
 			<i data-bind="css: edit() ? 'icon-ok' : 'icon-plus', visible: !saving()"></i>
-			<i class="icon-spinner animated" data-bind="visible: saving"></i>
+			<i class="icon-spinner" data-bind="visible: saving"></i>
 			&nbsp;&nbsp;
 			<span data-bind="visible: !edit()" data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span>
 			<span data-bind="visible: edit()" data-i18n="POPUPS_DOMAIN/BUTTON_UPDATE"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html
index 3342073d1..63aa1e16a 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html
@@ -37,13 +37,13 @@
 	</div>
 	<div class="modal-footer">
 		<a class="btn buttonClose" data-bind="command: cancelCommand">
-			<i class="icon-remove"></i>
+			<i class="fontastic">✖</i>
 			&nbsp;&nbsp;
 			<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span>
 		</a>
 		<a class="btn buttonClear" data-bind="command: createCommand">
 			<i class="icon-plus" data-bind="visible: !saving()"></i>
-			<i class="icon-spinner animated" data-bind="visible: saving"></i>
+			<i class="icon-spinner" data-bind="visible: saving"></i>
 			&nbsp;&nbsp;
 			<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_ADD"></span>
 		</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html
index 9b75e8f20..8a06b6c20 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html
@@ -24,7 +24,7 @@
 	</div>
 	<div class="modal-footer">
 		<a class="btn buttonClose" data-bind="command: cancelCommand">
-			<i class="icon-remove"></i>
+			<i class="fontastic">✖</i>
 			&nbsp;&nbsp;
 			<span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span>
 		</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html
index 1a4fc2287..8808f1f45 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html
@@ -15,7 +15,7 @@
 				<span data-bind="text: yesButton"></span>
 			</button>
 			<button class="btn buttonNo" data-bind="click: noClick">
-				<i class=" icon-remove"></i>
+				<i class="fontastic">✖</i>
 				&nbsp;&nbsp;
 				<span data-bind="text: noButton"></span>
 			</button>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Components/SaveTrigger.html b/snappymail/v/0.0.0/app/templates/Views/Components/SaveTrigger.html
index 44c2f1cb1..4a585b32b 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Components/SaveTrigger.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Components/SaveTrigger.html
@@ -1,3 +1,3 @@
 <div class="e-component settings-saved-trigger">
-	<i class="icon-spinner animated"></i><i class="icon-remove error"></i><i class="icon-ok success"></i>
-</div>
\ No newline at end of file
+	<i class="icon-spinner"></i><i class="fontastic error">✖</i><i class="icon-ok success"></i>
+</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/Login.html b/snappymail/v/0.0.0/app/templates/Views/User/Login.html
index e17e20b17..f9b0074bb 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/Login.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/Login.html
@@ -38,7 +38,7 @@
 							data-i18n="[placeholder]GLOBAL/PASSWORD" />
 						<span class="add-on" tabindex="-1"
 							data-bind="command: submitCommand, tooltip: 'LOGIN/BUTTON_SIGN_IN'">
-							<i class="icon-key" data-bind="visible: '' === password()"></i>
+							<i class="fontastic" data-bind="visible: '' === password()">🔑</i>
 							<button type="submit" class="btn-submit-icon-wrp" data-bind="visible: '' !== password()">
 								<i class="icon-right-middle login-submit-icon"></i>
 							</button>
@@ -53,7 +53,7 @@
 							data-bind="textInput: additionalCode, disable: submitRequest"
 							data-i18n="[placeholder]LOGIN/LABEL_VERIFICATION_CODE" />
 						<span class="add-on">
-							<i class="icon-key"></i>
+							<i class="fontastic">🔑</i>
 						</span>
 					</div>
 				</div>
@@ -76,7 +76,7 @@
 					<div class="pull-right language-buttons">
 						<a href="#" tabindex="-1" class="language-button"
 							data-bind="visible: allowLanguagesOnLogin, click: selectLanguage, tooltip: 'POPUPS_LANGUAGES/TITLE_LANGUAGES'">
-							<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
+							<i class="fontastic" data-bind="css: { 'icon-spinner' : langRequest }">🌍</i>
 						</a>
 					</div>
 
@@ -110,14 +110,14 @@
 		</div>
 		<div class="e-mobile-switcher thm-mobile-switcher">
 			<span data-bind="visible: !mobile">
-				<i class="icon-mobile"></i>
+				<i class="fontastic">📱</i>
 				&nbsp;
 				<a href="./?/MobileVersion/" tabindex="-1">
 					<span class="i18n" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></span>
 				</a>
 			</span>
 			<span data-bind="visible: mobile">
-				<i class="icon-laptop"></i>
+				<i class="fontastic">💻</i>
 				&nbsp;
 				<a href="./?/DesktopVersion/" tabindex="-1">
 					<span class="i18n" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
index bcf22ca83..58387838f 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
@@ -29,10 +29,10 @@
 		</div>
 		<div class="btn-group hide-on-panel-disabled">
 			<a class="btn first" data-bind="click: createFolder">
-				<i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner animated': foldersChanging()}"></i>
+				<i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner': foldersChanging()}"></i>
 			</a>
 			<a class="btn last" data-bind="click: configureFolders">
-				<i class="icon-cog"></i>
+				<i class="fontastic">⚙</i>
 			</a>
 		</div>
 	</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
index 776bab49e..1b305deb2 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
@@ -24,7 +24,7 @@
 				<div class="btn-group" data-bind="visible: mobileCheckedStateHide()">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">
 					<a class="btn single btn-dark-disabled-border buttonReload" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
-						<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottleForAnimation}"></i>
+						<i class="icon-spinner" data-bind="css: {'not-animated': !messageListCompleteLoadingThrottleForAnimation()}"></i>
 					</a>
 				</div>
 				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div>
@@ -59,7 +59,7 @@
 					<a class="btn btn-dark-disabled-border button-spam"
 						data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'GLOBAL/SPAM',
 							css: {'first': !isArchiveVisible()}">
-						<i class="icon-warning"></i>
+						<i class="fontastic">⚠</i>
 					</a>
 					<a class="btn btn-dark-disabled-border button-not-spam"
 						data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM',
@@ -69,7 +69,7 @@
 					<a class="btn last btn-dark-disabled-border button-delete"
 						data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE',
 							css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
-						<i class="icon-trash"></i>
+						<i class="fontastic">🗑</i>
 						<!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
 					</a>
 				</div>
@@ -117,21 +117,21 @@
 						</div>
 						<li class="e-item dividerbar" role="presentation" data-bind="visible: allowComposer, command: multyForwardCommand">
 							<a class="e-link menuitem" href="#" tabindex="-1">
-								<i class="icon-reply-all"></i>
+								<i class="fontastic">↞</i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
 							</a>
 						</li>
 						<li class="e-item dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
 							<a class="e-link menuitem" href="#" tabindex="-1">
-								<i class="icon-trash"></i>
+								<i class="fontastic">🗑</i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
 							</a>
 						</li>
 						<li class="e-item" role="presentation" data-bind="visible: allowDangerousActions, command: clearCommand">
 							<a class="e-link menuitem" href="#" tabindex="-1">
-								<i class="icon-fire"></i>
+								<i class="fontastic">🔥</i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
 							</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageListItem.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageListItem.html
index 615dcfd65..4caf50550 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageListItem.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageListItem.html
@@ -30,8 +30,8 @@
 			<i class="checkboxMessage" data-bind="css: checked() ? 'checkboxMessage icon-checkbox-checked' : 'checkboxMessage icon-checkbox-unchecked'"></i>
 		</div>
 		<div class="senderParent actionHandle">
-			<span class="replyFlag"><i class="icon-reply"></i>&nbsp;</span>
-			<span class="forwardFlag"><i class="icon-forward"></i>&nbsp;</span>
+			<span class="replyFlag"><i class="fontastic">←</i>&nbsp;</span>
+			<span class="forwardFlag"><i class="fontastic">→</i>&nbsp;</span>
 			<span class="sender" data-bind="text: senderEmailsString, attr: {'title': senderClearEmailsString}"></span>
 			&nbsp;
 		</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageListItemNoPreviewPane.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageListItemNoPreviewPane.html
index 0ef471ed5..06651c436 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageListItemNoPreviewPane.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageListItemNoPreviewPane.html
@@ -30,8 +30,8 @@
 			</span>
 		</div>
 		<div class="senderParent actionHandle">
-			<span class="replyFlag"><i class="icon-reply"></i>&nbsp;</span>
-			<span class="forwardFlag"><i class="icon-forward"></i>&nbsp;</span>
+			<span class="replyFlag"><i class="fontastic">←</i>&nbsp;</span>
+			<span class="forwardFlag"><i class="fontastic">→</i>&nbsp;</span>
 			<span class="sender" data-bind="text: senderEmailsString, attr: {'title': senderClearEmailsString}"></span>
 			&nbsp;
 		</div>
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 837221cc3..4776e66e2 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
@@ -4,13 +4,13 @@
 			<div class="messageButtons btn-toolbar">
 				<div class="btn-group" data-bind="tooltip: 'GLOBAL/CLOSE'">
 					<a class="btn single btn-dark-disabled-border buttonClose" data-bind="command: closeMessageCommand">
-						<i class="icon-remove"></i>
+						<i class="fontastic">✖</i>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
 					<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand">
-						<i class="icon-pencil icon-white"></i>
+						<i class="fontastic icon-white">🖉</i>
 					</a>
 				</div>
 				<div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div>
@@ -19,13 +19,13 @@
 						<i class="icon-archive"></i>
 					</a>
 					<a class="btn btn-dark-disabled-border button-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'GLOBAL/SPAM'">
-						<i class="icon-warning"></i>
+						<i class="fontastic">⚠</i>
 					</a>
 					<a class="btn btn-dark-disabled-border button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'">
 						<i class="icon-check-mark-circle-two"></i>
 					</a>
 					<a class="btn last btn-dark-disabled-border button-delete" data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'">
-						<i class="icon-trash"></i>
+						<i class="fontastic">🗑</i>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
@@ -70,42 +70,42 @@
 					<div class="btn-group pull-right" style="margin-right: -11px;">
 						<div class="btn-group pull-right" data-bind="registerBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions">
 							<a class="btn btn-thin-2 btn-transparent last btn-dark-disabled-border dropdown-toggle buttonMore" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand, css: {'first': !allowComposer}">
-									<span data-bind="visible: !allowComposer" class="icon-ellipsis-alt"></span>
+									<span data-bind="visible: !allowComposer" class="fontastic">⋮</span>
 									<span data-bind="visible: allowComposer" class="caret"></span>
 							</a>
 							<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-view-dropdown-id">
 								<div data-bind="visible: allowComposer && !isDraftFolder()">
 									<li class="e-item" role="presentation">
 										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyCommand">
-											<i class="icon-reply"></i>
+											<i class="fontastic">←</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="MESSAGE/BUTTON_REPLY"></span>
 										</a>
 									</li>
 									<li class="e-item" role="presentation">
 										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyAllCommand">
-											<i class="icon-reply-all"></i>
+											<i class="fontastic">↞</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="MESSAGE/BUTTON_REPLY_ALL"></span>
 										</a>
 									</li>
 									<li class="e-item" role="presentation">
 										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardCommand">
-											<i class="icon-forward"></i>
+											<i class="fontastic">→</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="MESSAGE/BUTTON_FORWARD"></span>
 										</a>
 									</li>
 									<li class="e-item" role="presentation">
 										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand">
-											<i class="icon-pencil"></i>
+											<i class="fontastic">🖉</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
 										</a>
 									</li>
 									<li class="e-item" role="presentation">
 										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
-											<i class="icon-forward"></i>
+											<i class="fontastic">→</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
 										</a>
@@ -121,7 +121,7 @@
 									</li>
 									<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
 										<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: spamCommand">
-											<i class="icon-warning"></i>
+											<i class="fontastic">⚠</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="GLOBAL/SPAM"></span>
 										</a>
@@ -135,14 +135,14 @@
 									</li>
 									<li class="e-item" role="presentation">
 										<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand">
-											<i class="icon-trash"></i>
+											<i class="fontastic">🗑</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="GLOBAL/DELETE"></span>
 										</a>
 									</li>
 									<li class="e-item" role="presentation" data-bind="visible: message() && message().hasUnsubsribeLinks()">
 										<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewUnsubscribeLink()">
-											<i class="icon-remove"></i>
+											<i class="fontastic">✖</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="MESSAGE/BUTTON_UNSUBSCRIBE"></span>
 										</a>
@@ -151,7 +151,7 @@
 								<div data-bind="visible: allowMessageActions" class="dividerbar">
 									<li class="e-item" role="presentation">
 										<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
-											<i class="icon-print"></i>
+											<i class="fontastic">🖨</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="MESSAGE/MENU_PRINT"></span>
 										</a>
@@ -182,21 +182,21 @@
 						</div>
 						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReply pull-right"
 							data-bind="visible: 'reply' === lastReplyAction() && allowComposer, command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
-							<i class="icon-reply"></i>
+							<i class="fontastic">←</i>
 						</a>
 						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReplyAll pull-right"
 							data-bind="visible: 'replyall' === lastReplyAction() && allowComposer, command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
-							<i class="icon-reply-all"></i>
+							<i class="fontastic">↞</i>
 						</a>
 						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonForward pull-right"
 							data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
-							<i class="icon-forward"></i>
+							<i class="fontastic">→</i>
 						</a>
 					</div>
 
 					<div class="btn-group pull-right hide-on-mobile" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'" style="margin-right: 5px">
 						<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand">
-							<i class="icon-pencil icon-white"></i>
+							<i class="fontastic icon-white">🖉</i>
 						</a>
 					</div>
 				</div>
@@ -309,7 +309,7 @@
 								<div class="g-ui-min-height-300 content-content" data-bind="visible: !messageLoadingThrottle()">
 									<div class="bodySubHeader">
 										<div class="showImages" data-bind="visible: message() && message().hasImages(), click: function() { showImages(message()); }">
-											<i class="icon-image"></i>
+											<i class="fontastic">🖼</i>
 											&nbsp;&nbsp;
 											<span class="i18n text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span>
 										</div>
@@ -338,7 +338,7 @@
 																</div>
 																<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
 																<div class="iconPreview">
-																	<i class="attachmentIcon icon-eye show-hover"></i>
+																	<i class="attachmentIcon fontastic show-hover">👁</i>
 																</div>
 															</a>
 														</div>
@@ -347,7 +347,7 @@
 																<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
 															</div>
 															<div class="iconPreview">
-																<i class="attachmentIcon icon-play show-hover"></i>
+																<i class="attachmentIcon fontastic show-hover">▶</i>
 															</div>
 														</div>
 													</div>
@@ -366,16 +366,16 @@
 													</div>
 												</li>
 											</ul>
-											<i class="icon-cog controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true); showAttachmnetControlsState(true); }"></i>
+											<i class="fontastic controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true); showAttachmnetControlsState(true); }">⚙</i>
 										</div>
 
 										<div class="attachmentsControls"
 											data-bind="visible: showAttachmnetControls() && message() && message().attachments().hasVisible()">
 
 											<span data-bind="visible: downloadAsZipAllowed">
-												<i class="icon-remove iconcolor-red" data-bind="visible: downloadAsZipError"></i>
+												<i class="fontastic iconcolor-red" data-bind="visible: downloadAsZipError">✖</i>
 												<i class="icon-file-zip" data-bind="visible: !downloadAsZipError(),
-													css: {'icon-file-zip': !downloadAsZipLoading(), 'icon-spinner animated': downloadAsZipLoading()}"></i>
+													css: {'icon-file-zip': !downloadAsZipLoading(), 'icon-spinner': downloadAsZipLoading()}"></i>
 												&nbsp;&nbsp;
 												<span class="g-ui-link" data-bind="click: downloadAsZip">
 													<span class="i18n" data-i18n="MESSAGE/LINK_DOWNLOAD_AS_ZIP"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsAccount.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsAccount.html
index 86cb97e2c..fa3716d34 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsAccount.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsAccount.html
@@ -37,8 +37,8 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn buttonAddAccount" data-bind="command: addAccountCommand">
-				<i data-bind="visible: isNew, css: {'icon-user-add': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
-				<i data-bind="visible: !isNew(), css: {'icon-ok': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
+				<i data-bind="visible: isNew, css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
+				<i data-bind="visible: !isNew(), css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 				&nbsp;&nbsp;
 				<span data-bind="visible: isNew" class="i18n" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_ADD_ACCOUNT"></span>
 				<span data-bind="visible: !isNew()" class="i18n" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_UPDATE_ACCOUNT"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html
index 5d549b991..5e0e803f7 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html
@@ -97,7 +97,7 @@
 	</div>
 	<div class="modal-footer">
 		<button type="submit" class="btn buttonAdvSearch" data-bind="command: searchCommand">
-			<i class="icon-search"></i>
+			<i class="fontastic">🔎</i>
 			&nbsp;&nbsp;
 			<span class="i18n" data-i18n="GLOBAL/SEARCH"></span>
 		</a>
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 9c1947974..645155f65 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
@@ -1,11 +1,11 @@
 <div class="modal fade b-compose" data-bind="modal: modalVisibility, css: {'loading': saving() || sending()}">
 	<div class="modal-header b-header-toolbar g-ui-user-select-none">
 		<a class="btn btn-large button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
-			<i class="icon-white" data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner animated big': sending()}"></i>
+			<i class="icon-white" data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner big': sending()}"></i>
 			<span class="i18n btn-text hide-on-mobile" data-i18n="COMPOSE/BUTTON_SEND"></span>
 		</a>
 		<a class="btn button-save" data-bind="visible: allowFolders, command: saveCommand, tooltipErrorTip: savedErrorDesc, css: {'btn-danger': savedError }">
-			<i data-bind="css: {'icon-floppy': !saving(), 'icon-spinner animated': saving(), 'icon-white': savedError()}"></i>
+			<i class="fontastic" data-bind="css: {'icon-spinner': saving(), 'icon-white': savedError()}">💾</i>
 			<span class="i18n btn-text hide-on-mobile" data-i18n="GLOBAL/SAVE"></span>
 		</a>
 
@@ -13,7 +13,7 @@
 		<a class="minimize-custom" data-bind="click: skipCommand, tooltip: 'COMPOSE/BUTTON_MINIMIZE'"></a>
 
 		<a class="btn btn-danger button-delete button-delete-transitions" data-bind="command: deleteCommand">
-			<i class="icon-trash icon-white"></i>
+			<i class="fontastic icon-white">🗑</i>
 		</a>
 		<span class="saved-text hide-on-mobile" data-bind="text: savedTimeText"></span>
 	</div>
@@ -73,7 +73,7 @@
 									</li>
 									<li class="e-item dividerbar" data-bind="visible: capaOpenPGP, click: openOpenPgpPopup, css: {'disabled': isHtml()}">
 										<a class="e-link">
-											<i class="icon-key"></i>
+											<i class="fontastic">🔑</i>
 											&nbsp;&nbsp;
 											<span class="i18n" data-i18n="COMPOSE/BUTTON_OPEN_PGP"></span>
 										</a>
@@ -163,7 +163,7 @@
 											<b data-bind="text: attachmentsCount"></b>
 											&nbsp;&nbsp;
 										</span>
-										<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner animated': 0 < attachmentsInProcessCount(), 'icon-white': 0 < attachmentsInErrorCount() }"></i>
+										<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount(), 'icon-white': 0 < attachmentsInErrorCount() }"></i>
 									</button>
 								</div>
 							</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsComposeOpenPgp.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsComposeOpenPgp.html
index 0562c85b6..b2fb0f545 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsComposeOpenPgp.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsComposeOpenPgp.html
@@ -59,7 +59,7 @@
 							<!-- ko foreach: encryptKeys -->
 								<div class="key-list__item row-fluid">
 									<div class="key-list__item-delete span1" data-bind="click: removable() ? $parent.deletePublickKey : null, css: {'disabled': !removable()}">
-										<i class="icon-trash"></i>
+										<i class="fontastic">🗑</i>
 									</div>
 									<div class="key-list__item-hash span3" data-bind="visible: !empty">
 										(<span data-bind="text: hash"></span>)
@@ -106,7 +106,7 @@
 		<div class="modal-footer">
 			<button class="btn buttonDo" data-bind="command: doCommand,
 				enable: (sign() || encrypt()) && (!encrypt() || encrypt() && encryptKeys().length > 0)">
-				<i data-bind="css: {'icon-key': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
+				<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-bind="visible: sign() && !encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_SIGN"></span>
 				<span class="i18n" data-bind="visible: !sign() && encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_ENCRYPT"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
index be7da896b..8d02e1fab 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
@@ -21,40 +21,40 @@
 
 			<div class="btn-group">
 				<a class="btn single button-delete" data-bind="command: deleteCommand">
-					<i class="icon-trash"></i>
+					<i class="fontastic">🗑</i>
 				</a>
 			</div>
 
 			<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true">
 				<a id="contacts-more-dropdown-id" class="btn single dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown">
 					<i data-bind="css: {'icon-list': !contacts.importing() && !contacts.syncing(),
-						'icon-spinner animated': contacts.importing() || contacts.syncing()}"></i>
+						'icon-spinner': contacts.importing() || contacts.syncing()}"></i>
 				</a>
 				<ul class="dropdown-menu g-ui-menu pull-right" role="menu" aria-labelledby="contacts-more-dropdown-id">
 					<li class="e-item" role="presentation">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="initDom: importUploaderButton">
-							<i data-bind="css: {'icon-import': !contacts.importing(), 'icon-spinner animated': contacts.importing}"></i>
+							<i data-bind="css: {'icon-import': !contacts.importing(), 'icon-spinner': contacts.importing}"></i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="CONTACTS/BUTTON_IMPORT"></span>
 						</a>
 					</li>
 					<li class="e-item dividerbar hide-mobile" role="presentation">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: exportCsv">
-							<i data-bind="css: {'icon-export': !contacts.exportingCsv(), 'icon-spinner animated': contacts.exportingCsv}"></i>
+							<i data-bind="css: {'icon-export': !contacts.exportingCsv(), 'icon-spinner': contacts.exportingCsv}"></i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="CONTACTS/BUTTON_EXPORT_CSV"></span>
 						</a>
 					</li>
 					<li class="e-item hide-mobile" role="presentation">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: exportVcf">
-							<i data-bind="css: {'icon-export': !contacts.exportingVcf(), 'icon-spinner animated': contacts.exportingVcf}"></i>
+							<i data-bind="css: {'icon-export': !contacts.exportingVcf(), 'icon-spinner': contacts.exportingVcf}"></i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="CONTACTS/BUTTON_EXPORT_VCARD"></span>
 						</a>
 					</li>
 					<li class="e-item dividerbar" role="presentation" data-bind="visible: enableContactsSync() && allowContactsSync()">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: syncCommand">
-							<i data-bind="css: {'icon-sync': !contacts.syncing(), 'icon-spinner animated': contacts.syncing}"></i>
+							<i data-bind="css: {'icon-sync': !contacts.syncing(), 'icon-spinner': contacts.syncing}"></i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="CONTACTS/BUTTON_SYNC"></span>
 						</a>
@@ -153,7 +153,7 @@
 			<div class="btn-group pull-right">&nbsp;</div>
 			<div class="btn-group pull-right">
 				<button class="btn single button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}">
-					<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner animated': viewSaving()}"></i>
+					<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner': viewSaving()}"></i>
 					&nbsp;&nbsp;
 					<span class="i18n" data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>
 					<span class="i18n" data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
@@ -170,7 +170,7 @@
 						<div class="form-horizontal top-part">
 							<div class="control-group" data-bind="visible: !viewReadOnly() || contactHasValidName()">
 								<label class="control-label remove-padding-top fix-width">
-									<i class="icon-user iconsize24"></i>
+									<i class="fontastic iconsize24">👤</i>
 								</label>
 								<div class="controls fix-width">
 									<div data-bind="foreach: viewPropertiesNames">
@@ -201,7 +201,7 @@
 							</div>
 							<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length">
 								<label class="control-label remove-padding-top fix-width">
-									<i class="icon-at iconsize24" data-bind="tooltip: 'GLOBAL/EMAIL'"></i>
+									<i class="fontastic iconsize24" data-bind="tooltip: 'GLOBAL/EMAIL'">@</i>
 								</label>
 								<div class="controls fix-width">
 									<div data-bind="foreach: viewPropertiesEmails">
@@ -232,7 +232,7 @@
 							</div>
 							<div class="control-group" data-bind="visible: 0 < viewPropertiesWeb().length">
 								<label class="control-label remove-padding-top fix-width">
-									<i class="icon-world iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_WEB'"></i>
+									<i class="fontastic iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_WEB'">🌍</i>
 								</label>
 								<div class="controls fix-width">
 									<div data-bind="foreach: viewPropertiesWeb">
@@ -254,7 +254,7 @@
 						</div>
 
 <!--						<div class="e-read-only-sign">
-							<i class="icon-lock iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
+							<i class="fontastic iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'">🔒</i>
 						</div>-->
 
 
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html
index 8bc8ce407..4592614f7 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html
@@ -9,7 +9,7 @@
 		</div>
 		<div class="modal-body">
 			<div>
-				<i class="icon-warning" style="color:red"></i>
+				<i class="fontastic" style="color:red">⚠</i>
 				&nbsp;&nbsp;
 				<strong>
 					<span class="i18n" data-i18n="[html]POPUPS_CLEAR_FOLDER/DANGER_DESC_WARNING"></span>
@@ -23,7 +23,7 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn btn-danger buttonClear" data-bind="command: clearCommand">
-				<i class="icon-fire" data-bind="css: {'icon-fire': !clearingProcess(), 'icon-spinner animated white': clearingProcess()}" ></i>
+				<i class="fontastic" data-bind="css: {'icon-spinner white': clearingProcess()}">🔥</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="GLOBAL/CLEAR"></span>
 			</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsIdentity.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsIdentity.html
index 7e482e5ca..638000ecc 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsIdentity.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsIdentity.html
@@ -86,8 +86,8 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn buttonAddIdentity" data-bind="command: addOrEditIdentityCommand">
-				<i data-bind="visible: !edit(), css: {'icon-user-add': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
-				<i data-bind="visible: edit, css: {'icon-ok': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
+				<i data-bind="visible: !edit(), css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
+				<i data-bind="visible: edit, css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 				&nbsp;&nbsp;
 				<span data-bind="visible: !edit()" class="i18n" data-i18n="POPUPS_IDENTITY/BUTTON_ADD_IDENTITY"></span>
 				<span data-bind="visible: edit" class="i18n" data-i18n="POPUPS_IDENTITY/BUTTON_UPDATE_IDENTITY"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsMessageOpenPgp.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsMessageOpenPgp.html
index 4b7dd77ab..59c4129bf 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsMessageOpenPgp.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsMessageOpenPgp.html
@@ -42,7 +42,7 @@
 		</div>
 		<div class="modal-footer">
 			<button class="btn buttonDo" data-bind="command: doCommand">
-				<i data-bind="css: {'icon-key': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
+				<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="POPUPS_MESSAGE_OPEN_PGP/BUTTON_DECRYPT"></span>
 			</button>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsNewOpenPgpKey.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsNewOpenPgpKey.html
index 5c9a85812..e30fafd3e 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsNewOpenPgpKey.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsNewOpenPgpKey.html
@@ -47,7 +47,7 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn buttonHenerateOpenPgpKey" data-bind="command: generateOpenPgpKeyCommand">
-				<i data-bind="css: {'icon-key': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
+				<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/BUTTON_GENERATE_OPEN_PGP_KEYS"></span>
 			</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html
index adf8fd5c2..bc0049609 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html
@@ -23,7 +23,7 @@
 			<div data-bind="visible: hasChanges">
 				<div class="span8 width100-on-mobile">
 					<div class="alert g-ui-user-select-none">
-						<i class="icon-warning"></i>
+						<i class="fontastic">⚠</i>
 						&nbsp;&nbsp;
 						<span class="i18n" data-i18n="POPUPS_SIEVE_SCRIPT/CHANGES_NEED_TO_BE_SAVED_DESC"></span>
 					</div>
@@ -32,7 +32,7 @@
 			<div data-bind="visible: $root.saveError">
 				<div class="span8 width100-on-mobile">
 					<div class="alert alert-error g-ui-user-select-none">
-						<i class="icon-warning"></i>
+						<i class="fontastic">⚠</i>
 						&nbsp;&nbsp;
 						<span data-bind="text: $root.saveErrorText"></span>
 					</div>
@@ -80,7 +80,7 @@
 							</td>
 							<td>
 								<span class="delete-filter" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">
-									<i class="icon-trash"></i>
+									<i class="fontastic">🗑</i>
 								</span>
 							</td>
 						</tr>
@@ -99,7 +99,7 @@
 				<i class="icon-file-code"></i>
 			</a>
 			<a class="btn buttonSave" data-bind="visible: hasChanges, click: function() { $root.saveScriptCommand(); }, css: {'btn-danger': $root.saveError}">
-				<i data-bind="css: {'icon-floppy': !$root.saving, 'icon-spinner animated': $root.saving}"></i>
+				<i class="fontastic" data-bind="css: {'icon-spinner': $root.saving}">💾</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="GLOBAL/SAVE"></span>
 			</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsTemplate.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsTemplate.html
index fff9965e4..dd1ab5a51 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsTemplate.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsTemplate.html
@@ -31,8 +31,8 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn buttonAddAccount" data-bind="command: addTemplateCommand">
-				<i data-bind="visible: '' == id(), css: {'icon-user-add': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
-				<i data-bind="visible: '' !== id(), css: {'icon-ok': !submitRequest(), 'icon-spinner animated': submitRequest()}"></i>
+				<i data-bind="visible: '' == id(), css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
+				<i data-bind="visible: '' !== id(), css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 				&nbsp;&nbsp;
 				<span data-bind="visible: '' == id()" class="i18n" data-i18n="POPUPS_ADD_TEMPLATE/BUTTON_ADD_TEMPLATE"></span>
 				<span data-bind="visible: '' !== id()" class="i18n" data-i18n="POPUPS_ADD_TEMPLATE/BUTTON_UPDATE_TEMPLATE"></span>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsTwoFactorConfiguration.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsTwoFactorConfiguration.html
index a1152b312..9fdd2ee4c 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsTwoFactorConfiguration.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsTwoFactorConfiguration.html
@@ -80,17 +80,17 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn pull-left" data-bind="visible: lock, click: logout">
-				<i class="icon-power"></i>
+				<i class="fontastic">⏻</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="GLOBAL/LOGOUT"></span>
 			</a>
 			<a class="btn btn-danger" data-bind="click: clearTwoFactor, visible: twoFactorStatus">
-				<i class="icon-remove" data-bind="css: {'icon-remove': !clearing(), 'icon-spinner animated': clearing()}" ></i>
+				<i class="fontastic" data-bind="css: {'icon-spinner': clearing()}">✖</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="GLOBAL/CLEAR"></span>
 			</a>
 			<a class="btn" data-bind="click: createTwoFactor, visible: !twoFactorStatus()">
-				<i class="icon-play" data-bind="css: {'icon-play': !processing(), 'icon-spinner animated': processing()}" ></i>
+				<i class="fontastic" data-bind="css: {'icon-spinner': processing()}">▶</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_ACTIVATE"></span>
 			</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsTwoFactorTest.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsTwoFactorTest.html
index 7c233abe0..dd2054e8a 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsTwoFactorTest.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsTwoFactorTest.html
@@ -23,7 +23,7 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn" data-bind="command: testCodeCommand, css: { 'btn-success': true === codeStatus(), 'btn-danger': false === codeStatus() }">
-				<i data-bind="css: {'icon-ok': !testing(), 'icon-spinner animated': testing(), 'icon-white': true === codeStatus() || false === codeStatus() }"></i>
+				<i data-bind="css: {'icon-ok': !testing(), 'icon-spinner': testing(), 'icon-white': true === codeStatus() || false === codeStatus() }"></i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="GLOBAL/TEST"></span>
 			</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsViewOpenPgpKey.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsViewOpenPgpKey.html
index 98fb5cd47..af44a7cb2 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsViewOpenPgpKey.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsViewOpenPgpKey.html
@@ -15,12 +15,12 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn buttonClose" data-bind="command: cancelCommand">
-				<i class="icon-remove"></i>
+				<i class="fontastic">✖</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="GLOBAL/CLOSE"></span>
 			</a>
 			<a class="btn buttonClose" data-bind="click: selectKey">
-				<i class="icon-key"></i>
+				<i class="fontastic">🔑</i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/BUTTON_SELECT"></span>
 			</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsAccounts.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsAccounts.html
index 2a14ca2e2..991ec500b 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsAccounts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsAccounts.html
@@ -4,7 +4,7 @@
 			<div class="legend">
 				<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/LEGEND_ACCOUNTS"></span>
 				&nbsp;&nbsp;&nbsp;
-				<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: accounts.loading"></i>
+				<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: accounts.loading"></i>
 			</div>
 		</div>
 		<a class="btn" data-bind="click: addNewAccount">
@@ -26,7 +26,7 @@
 				<tbody data-bind="foreach: accounts">
 					<tr class="account-item" draggable="true" data-bind="sortableItem: { list: $root.accounts, afterMove: $root.accountsAndIdentitiesAfterMove }">
 						<td class="e-action" data-bind="css: {'e-action': canBeEdit}">
-							<span class="account-img icon-user"></span>
+							<span class="account-img fontastic">👤</span>
 							<i class="icon-braille drag-handle"></i>
 							&nbsp;&nbsp;
 							<span class="account-name" data-bind="text: email"></span>
@@ -38,7 +38,7 @@
 						</td>
 						<td>
 							<span class="delete-account" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oAccount) { $root.accountForDeletion(oAccount); }">
-								<i class="icon-trash"></i>
+								<i class="fontastic">🗑</i>
 							</span>
 						</td>
 					</tr>
@@ -72,7 +72,7 @@
 				<tbody data-bind="foreach: identities">
 					<tr class="identity-item" draggable="true" data-bind="sortableItem: { list: $root.identities, afterMove: $root.accountsAndIdentitiesAfterMove }">
 						<td class="e-action">
-							<span class="identity-img icon-user"></span>
+							<span class="identity-img fontastic">👤</span>
 							<i class="icon-braille drag-handle"></i>
 							&nbsp;&nbsp;
 							<span class="identity-name" data-bind="text: formattedName()"></span>
@@ -88,7 +88,7 @@
 						</td>
 						<td>
 							<span class="delete-identity" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oIdentity) { $root.identityForDeletion(oIdentity); }">
-								<i class="icon-trash"></i>
+								<i class="fontastic">🗑</i>
 							</span>
 						</td>
 					</tr>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsChangePassword.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsChangePassword.html
index f0d08fe22..93d4702dd 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsChangePassword.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsChangePassword.html
@@ -35,7 +35,7 @@
 				<div class="control-group">
 					<div class="controls">
 						<a class="btn" data-bind="command: saveNewPasswordCommand, css: { 'btn-success': passwordUpdateSuccess, 'btn-danger': passwordUpdateError }">
-							<i data-bind="css: {'icon-spinner animated': changeProcess(), 'icon-key': !changeProcess(), 'icon-white': passwordUpdateSuccess() || passwordUpdateError() }"></i>
+							<i class="fontastic" data-bind="css: {'icon-spinner': changeProcess(), 'icon-white': passwordUpdateSuccess() || passwordUpdateError() }">🔑</i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="SETTINGS_CHANGE_PASSWORD/BUTTON_UPDATE_PASSWORD"></span>
 						</a>
@@ -45,4 +45,4 @@
 			<div class="span4 alert alert-error alert-null-left-margin" data-bind="visible: '' !== errorDescription(), text: errorDescription"></div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html
index 475d4ab51..28089e249 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html
@@ -3,13 +3,13 @@
 		<div class="legend">
 			<span class="i18n" data-i18n="SETTINGS_FILTERS/LEGEND_FILTERS"></span>
 			&nbsp;&nbsp;&nbsp;
-			<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: loading"></i>
+			<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
 		</div>
 	</div>
 	<div class="row" data-bind="visible: serverError">
 		<div class="span8 width100-on-mobile">
 			<div class="alert alert-error g-ui-user-select-none" style="margin-bottom: 0">
-				<i class="icon-warning"></i>
+				<i class="fontastic">⚠</i>
 				&nbsp;&nbsp;
 				<span data-bind="text: serverErrorDesc"></span>
 			</div>
@@ -40,7 +40,7 @@
 						</td>
 						<td>
 							<span class="delete-script" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oScript) { $root.scriptForDeletion(oScript); }">
-								<i class="icon-trash"></i>
+								<i class="fontastic">🗑</i>
 							</span>
 						</td>
 					</tr>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionBody.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionBody.html
index 3c4f5ada3..5b66a7fb4 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionBody.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionBody.html
@@ -7,6 +7,6 @@
 	&nbsp;
 	<span class="delete-action button-delete pull-right" style="margin-top: 5px;"
 		data-bind="click: function (oCondition) { $root.removeCondition(oCondition); }">
-		<i class="icon-trash"></i>
+		<i class="fontastic">🗑</i>
 	</span>
 </div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionDefault.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionDefault.html
index 0948e32bf..ae4fd08a8 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionDefault.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionDefault.html
@@ -7,6 +7,6 @@
 	&nbsp;
 	<span class="delete-action button-delete pull-right" style="margin-top: 5px;"
 		data-bind="click: function (oCondition) { $root.removeCondition(oCondition); }">
-		<i class="icon-trash"></i>
+		<i class="fontastic">🗑</i>
 	</span>
 </div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionMore.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionMore.html
index 1ce102281..4dd03c834 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionMore.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionMore.html
@@ -9,6 +9,6 @@
 	&nbsp;
 	<span class="delete-action button-delete pull-right" style="margin-top: 5px;"
 		data-bind="click: function (oCondition) { $root.removeCondition(oCondition); }">
-		<i class="icon-trash"></i>
+		<i class="fontastic">🗑</i>
 	</span>
 </div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionSize.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionSize.html
index 235ab0fbe..490435182 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionSize.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFiltersConditionSize.html
@@ -7,6 +7,6 @@
 	&nbsp;
 	<span class="delete-action button-delete pull-right" style="margin-top: 5px;"
 		data-bind="click: function (oCondition) { $root.removeCondition(oCondition); }">
-		<i class="icon-trash"></i>
+		<i class="fontastic">🗑</i>
 	</span>
 </div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolderItem.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolderItem.html
index 740682189..34f86da4d 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolderItem.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolderItem.html
@@ -14,15 +14,15 @@
 	</td>
 	<td class="delete-folder-parent">
 		<span class="delete-folder" data-bind="visible: canBeDeleted() && !deleteAccess(), click: function (oFolder) { $root.folderForDeletion(oFolder); }">
-			<i class="icon-trash"></i>
+			<i class="fontastic">🗑</i>
 		</span>
 	</td>
 	<td class="subscribe-folder-parent">
 		<span class="unsubscribe-folder" data-bind="visible: canBeSubscribed() && !subscribed(), click: function(oFolder) { $root.subscribeFolder(oFolder); }">
-			<i class="icon-eye"></i>
+			<i class="fontastic">👁</i>
 		</span>
 		<span class="subscribe-folder" data-bind="visible: canBeSubscribed() && subscribed(), click: function(oFolder) { $root.unSubscribeFolder(oFolder); }">
-			<i class="icon-eye"></i>
+			<i class="fontastic">👁</i>
 		</span>
 	</td>
 	<td class="check-folder-parent" data-bind="visible: $root.displaySpecSetting">
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolders.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolders.html
index 06451ec29..e8aad9875 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolders.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFolders.html
@@ -4,7 +4,7 @@
 			<div class="legend">
 				<span class="i18n" data-i18n="SETTINGS_FOLDERS/LEGEND_FOLDERS"></span>
 				&nbsp;&nbsp;&nbsp;
-				<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: loading"></i>
+				<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
 			</div>
 		</div>
 		<a class="btn" data-bind="click: createFolder">
@@ -14,7 +14,7 @@
 		</a>
 		&nbsp;&nbsp;
 		<a class="btn" data-bind="click: systemFolder">
-			<i class="icon-wrench"></i>
+			<i class="fontastic">🔧</i>
 			&nbsp;&nbsp;
 			<span class="i18n" data-i18n="SETTINGS_FOLDERS/BUTTON_SYSTEM"></span>
 		</a>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsOpenPGP.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsOpenPGP.html
index 14e6337ce..a41c86389 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsOpenPGP.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsOpenPGP.html
@@ -10,7 +10,7 @@
 	&nbsp;&nbsp;
 	<div style="display: inline-block" data-bind="tooltip: 'SETTINGS_OPEN_PGP/GENERATE_ONLY_HTTPS'">
 		<button class="btn" data-bind="click: generateOpenPgpKey">
-			<i class="icon-key"></i>
+			<i class="fontastic">🔑</i>
 			&nbsp;&nbsp;
 			<span class="i18n" data-i18n="SETTINGS_OPEN_PGP/BUTTON_GENERATE_OPEN_PGP_KEYS"></span>
 		</button>
@@ -40,7 +40,7 @@
 			<tr class="open-pgp-key-item">
 				<td>
 					<span class="open-pgp-key-img i18n" data-i18n="[title]SETTINGS_OPEN_PGP/TITLE_PRIVATE">
-						<i class="icon-lock"></i>
+						<i class="fontastic">🔒</i>
 					</span>
 					<span class="open-pgp-key-user">
 					<!-- ko foreach: users -->
@@ -53,12 +53,12 @@
 				</td>
 				<td>
 					<span class="delete-open-pgp-key" data-bind="visible: !deleteAccess(), click: function (openPgpKey) { $root.openPgpKeyForDeletion(openPgpKey); }">
-						<i class="icon-trash"></i>
+						<i class="fontastic">🗑</i>
 					</span>
 				</td>
 				<td>
 					<span class="view-open-pgp-key" data-bind="click: function (openPgpKey) { $root.viewOpenPgpKey(openPgpKey); }">
-						<i class="icon-eye"></i>
+						<i class="fontastic">👁</i>
 					</span>
 				</td>
 			</tr>
@@ -67,7 +67,7 @@
 			<tr class="open-pgp-key-item">
 				<td>
 					<span class="open-pgp-key-img i18n" data-i18n="[title]SETTINGS_OPEN_PGP/TITLE_PUBLIC">
-						<i class="icon-key"></i>
+						<i class="fontastic">🔑</i>
 					</span>
 					<span class="open-pgp-key-user">
 					<!-- ko foreach: users -->
@@ -82,12 +82,12 @@
 				</td>
 				<td>
 					<span class="delete-open-pgp-key" data-bind="visible: !deleteAccess(), click: function (openPgpKey) { $root.openPgpKeyForDeletion(openPgpKey); }">
-						<i class="icon-trash"></i>
+						<i class="fontastic">🗑</i>
 					</span>
 				</td>
 				<td>
 					<span class="view-open-pgp-key" data-bind="click: function (openPgpKey) { $root.viewOpenPgpKey(openPgpKey); }">
-						<i class="icon-eye"></i>
+						<i class="fontastic">👁</i>
 					</span>
 				</td>
 			</tr>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsSecurity.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsSecurity.html
index 51f8689a8..d4e4707ad 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsSecurity.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsSecurity.html
@@ -25,10 +25,10 @@
 		<div class="control-group" data-bind="visible: capaTwoFactor">
 			<label class="control-label"></label>
 			<div class="controls">
-				<i class="icon-lock"></i>
+				<i class="fontastic">🔒</i>
 				&nbsp;
 				<span class="i18n g-ui-link" tabindex="0" data-i18n="SETTINGS_SECURITY/LABEL_CONFIGURE_TWO_FACTOR" data-bind="click: configureTwoFactor, onSpace: configureTwoFactor, onEnter: configureTwoFactor"></span>
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsTemplates.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsTemplates.html
index fab013b17..33964980f 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsTemplates.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsTemplates.html
@@ -3,7 +3,7 @@
 		<div class="legend">
 			<span class="i18n" data-i18n="SETTINGS_TEMPLATES/LEGEND_TEMPLATES"></span>
 			&nbsp;&nbsp;&nbsp;
-			<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: templates.loading"></i>
+			<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: templates.loading"></i>
 		</div>
 	</div>
 	<a class="btn" data-bind="click: addNewTemplate">
@@ -25,7 +25,7 @@
 				<tbody data-bind="foreach: templates">
 					<tr class="template-item" draggable="true" data-bind="sortableItem: { list: $root.templates }">
 						<td class="e-action">
-							<span class="template-img icon-user"></span>
+							<span class="template-img fontastic">👤</span>
 							<i class="icon-braille drag-handle"></i>
 							&nbsp;&nbsp;
 							<span class="template-name" data-bind="text: name"></span>
@@ -37,7 +37,7 @@
 						</td>
 						<td>
 							<span class="delete-template" data-bind="visible: !deleteAccess(), click: function (oTemplate) { $root.templateForDeletion(oTemplate); }">
-								<i class="icon-trash"></i>
+								<i class="fontastic">🗑</i>
 							</span>
 						</td>
 					</tr>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsThemes.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsThemes.html
index cc86478ec..af9186e14 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsThemes.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsThemes.html
@@ -27,18 +27,18 @@
 			</div>
 			<div class="row" data-bind="visible: '' !== background.name()" style="margin-left: 0">
 				<a class="btn" data-bind="visible: '' !== background.name(), click: clearBackground">
-					<i class="icon-remove"></i>
+					<i class="fontastic">✖</i>
 				</a>
 				&nbsp;&nbsp;&nbsp;
 				<b data-bind="text: background.name"></b>
 			</div>
 			<div class="row" data-bind="visible: '' === background.name()" style="margin-left: 0">
 				<a class="btn" data-bind="initDom: background.uploaderButton">
-					<i data-bind="css: {'icon-image': !background.loading(), 'icon-spinner animated': background.loading()}"></i>
+					<i class="fontastic" data-bind="css: {'icon-spinner': background.loading()}">🖼</i>
 					&nbsp;&nbsp;
 					<span class="i18n" data-i18n="SETTINGS_THEMES/BUTTON_UPLOAD_BACKGROUND_IMAGE"></span>
 				</a>
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html b/snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html
index 790e7b1c2..ca7bc8cfa 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html
@@ -3,7 +3,7 @@
 		<div class="btn-toolbar">
 			<div class="btn-group btn-group-last pull-right dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
 				<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-ellipsis btn-block dropdown-toggle system-dropdown" data-toggle="dropdown">
-					<i data-bind="css: {'icon-user': !accounts.loading(), 'icon-spinner animated': accounts.loading()}"></i>
+					<i class="fontastic" data-bind="css: {'icon-spinner': accounts.loading()}">👤</i>
 <!--
 					<b data-bind="text: accountsUnreadCount, visible: 100 > accountsUnreadCount() && 0 < accountsUnreadCount()"></b>
 					<b data-bind="visible: 99 < accountsUnreadCount()">99+</b>
@@ -23,7 +23,7 @@
 										<span data-bind="visible: 99 < count()">99+</span>
 									</b>-->
 									<i class="icon-ok"></i>
-									<i class="icon-user"></i>
+									<i class="icon-user fontastic">👤</i>
 									&nbsp;&nbsp;
 									<span class="email-title" data-bind="text: email, attr: {title: email}"></span>
 								</a>
@@ -42,7 +42,7 @@
 					<!-- /ko -->
 					<li class="e-item" role="presentation" data-bind="visible: allowSettings">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: settingsClick">
-							<i class="icon-cog"></i>
+							<i class="fontastic">⚙</i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="TOP_TOOLBAR/BUTTON_SETTINGS"></span>
 						</a>
@@ -56,21 +56,21 @@
 					</li>
 					<li class="e-item dividerbar" role="presentation" data-bind="visible: mobile">
 						<a class="e-link menuitem" href="./?/DesktopVersion/" tabindex="-1">
-							<i class="icon-laptop"></i>
+							<i class="fontastic">💻</i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
 						</a>
 					</li>
 					<li class="e-item dividerbar" role="presentation" data-bind="visible: !mobile">
 						<a class="e-link menuitem" href="./?/MobileVersion/" tabindex="-1">
-							<i class="icon-mobile"></i>
+							<i class="fontastic">📱</i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></span>
 						</a>
 					</li>
 					<li class="e-item" role="presentation">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: logoutClick">
-							<i class="icon-power"></i>
+							<i class="fontastic">⏻</i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="GLOBAL/LOGOUT"></span>
 						</a>
@@ -85,7 +85,7 @@
 					<div class="bar second"></div>
 					<div class="bar third"></div>
 				</div>
-				<i class="stopIcon icon-pause"></i>
+				<i class="stopIcon fontastic">⏸</i>
 			</div>
 		</div>
 	</div>
diff --git a/vendors/fontastic/styles.css b/vendors/fontastic/styles.css
index e52a5fcce..6e2ce11a1 100644
--- a/vendors/fontastic/styles.css
+++ b/vendors/fontastic/styles.css
@@ -8,8 +8,7 @@
   font-display: swap;
 }
 
-[class^="icon-"],
-[class*=" icon-"],
+.fontastic,
 [class^="icon-"]::before,
 [class*=" icon-"]::before {
   font-family: "snappymail" !important;
@@ -32,48 +31,18 @@
 .icon-list::before {
   content: "\e002";
 }
-.icon-search::before {
-  content: "🔎";
-}
-.icon-user::before {
-  content: "👤";
-}
 .icon-user-add::before {
   content: "\e005";
 }
 .icon-paper-plane::before {
   content: "\e007";
 }
-.icon-reply::before {
-  content: "←";
-}
-.icon-reply-all::before {
-  content: "↞";
-}
-.icon-forward::before {
-  content: "→";
-}
 .icon-info::before {
   content: "\e00b";
 }
 .icon-right-dir::before {
   content: "\e00c"; /* ▶ */
 }
-.icon-image::before {
-  content: "🖼";
-}
-.icon-print::before {
-  content: "🖨";
-}
-.icon-cog::before {
-  content: "⚙";
-}
-.icon-wrench::before {
-  content: "🔧";
-}
-.icon-fire::before {
-  content: "🔥";
-}
 .icon-left::before {
   content: "\e01b"; /* ➔ rotate 180 */
 }
@@ -92,33 +61,26 @@
 .icon-star-empty::before {
   content: "☆";
 }
+/*
+.icon-star-half::before {
+  content: "⯪";
+}
+*/
 .icon-star::before {
   content: "★";
 }
-.icon-at::before {
-  content: "@";
-}
 .icon-list-add::before {
   content: "\e024";
 }
-.icon-warning::before {
-  content: "⚠";
-}
 .icon-warning-alt::before {
   content: "\e02a";
 }
-.icon-power::before {
-  content: "⏻";
-}
 .icon-plus::before {
   content: "✚";
 }
 .icon-ok::before {
   content: "✔";
 }
-.icon-remove::before {
-  content: "✖";
-}
 .icon-file::before {
   content: "\e02f";
 }
@@ -158,12 +120,6 @@
 .icon-folder::before {
   content: "🗀";
 }
-.icon-floppy::before {
-  content: "💾";
-}
-.icon-eye::before {
-  content: "👁";
-}
 .icon-bolt::before {
   content: "\e042";
 }
@@ -176,33 +132,15 @@
 .icon-telephone::before {
   content: "\e047"; /* ℡ ✆ ☎ ☏ 📞 */
 }
-.icon-mobile::before {
-  content: "📱";
-}
-.icon-pencil::before {
-  content: "🖉";
-}
-.icon-trash::before {
-  content: "🗑";
-}
 .icon-left-middle::before {
   content: "\e04b"; /* ❮ */
 }
 .icon-right-middle::before {
   content: "\e04c"; /* ❯ */
 }
-.icon-key::before {
-  content: "🔑";
-}
-.icon-lock::before {
-  content: "🔒";
-}
 .icon-address-book::before {
   content: "\e051";
 }
-.icon-users::before {
-  content: "👥";
-}
 .icon-mail::before {
   content: "✉";
 }
@@ -221,9 +159,6 @@
 .icon-radio-unchecked::before {
   content: "\e05c";
 }
-.icon-spinner::before {
-  content: "\e05e";
-}
 .icon-archive::before {
   content: "\e05f";
 }
@@ -233,9 +168,6 @@
 .icon-sync::before {
   content: "\e062"; /* ⤻⃔ 🔁 🔃 */
 }
-.icon-ellipsis-alt::before {
-  content: "⋮";
-}
 .icon-import::before {
   content: "\e066";
 }
@@ -254,21 +186,95 @@
 .icon-resize-out::before {
   content: "⤢";
 }
-.icon-world::before {
-  content: "🌍";
-}
 .icon-braille::before {
   content: "\e06e"; /* ⸭ ⠿ ⁞⁞ */
 }
-.icon-play::before {
-  content: "▶️︎"; /* ⏵ ⏯ */
-}
-.icon-pause::before {
-  content: "⏸︎";
-}
 .icon-check-mark-circle-two::before {
   content: "\e073";
 }
+/*
+.icon-image::before {
+  content: "🖼";
+}
+.icon-user::before {
+  content: "👤";
+}
+.icon-fire::before {
+  content: "🔥";
+}
+.icon-remove::before {
+  content: "✖";
+}
+.icon-floppy::before {
+  content: "💾";
+}
+.icon-play::before {
+  content: "▶️︎"; ⏵ ⏯
+}
+.icon-key::before {
+  content: "🔑";
+}
+.icon-world::before {
+  content: "🌍";
+}
+.icon-eye::before {
+  content: "👁";
+}
+.icon-power::before {
+  content: "⏻";
+}
+.icon-wrench::before {
+  content: "🔧";
+}
+.icon-print::before {
+  content: "🖨";
+}
+.icon-cog::before {
+  content: "⚙";
+}
+.icon-forward::before {
+  content: "→";
+}
+.icon-search::before {
+  content: "🔎";
+}
+.icon-reply::before {
+  content: "←";
+}
+.icon-reply-all::before {
+  content: "↞";
+}
+.icon-mobile::before {
+  content: "📱";
+}
+.icon-pencil::before {
+  content: "🖉";
+}
+.icon-trash::before {
+  content: "🗑";
+}
+.icon-lock::before {
+  content: "🔒";
+}
+.icon-users::before {
+  content: "👥";
+}
+.icon-ellipsis-alt::before {
+  content: "⋮";
+}
+.icon-pause::before {
+  content: "⏸︎";
+}
 .icon-laptop::before {
   content: "💻";
 }
+.icon-at::before {
+  content: "@";
+}
+.icon-warning::before {
+  content: "⚠";
+}
+.icon-spinner::before {
+  content: "\e05e";
+}
+*/