diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index ea6198a0..047fe6d1 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -11,7 +11,7 @@
                 <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allColorRows" :key="idx">
                     <f7-col class="text-align-center" v-for="colorInfo in row" :key="colorInfo.color">
                         <f7-icon f7="app_fill"
-                                 :style="{ color: (colorInfo.color && colorInfo.color !== '000000' ? '#' + colorInfo.color : 'var(--default-icon-color)') }"
+                                 :style="colorInfo.color | iconStyle('default', 'var(--default-icon-color)')"
                                  @click.native="onColorClicked(colorInfo)">
                             <f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === colorInfo.color">
                                 <f7-icon f7="checkmark_alt"></f7-icon>
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index 48b41492..8a0f6890 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -10,7 +10,9 @@
             <f7-block class="margin-vertical">
                 <f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allIconRows" :key="idx">
                     <f7-col class="text-align-center" v-for="iconInfo in row" :key="iconInfo.id">
-                        <f7-icon :icon="iconInfo.icon" :style="{ color: (color && color !== '000000' ? '#' + color : 'var(--default-icon-color)') }" @click.native="onIconClicked(iconInfo)">
+                        <f7-icon :icon="iconInfo.icon"
+                                 :style="color | iconStyle('default', 'var(--default-icon-color)')"
+                                 @click.native="onIconClicked(iconInfo)">
                             <f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === iconInfo.id">
                                 <f7-icon f7="checkmark_alt"></f7-icon>
                             </f7-badge>
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index 21eee0aa..6751ed7a 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -16,7 +16,7 @@
                               @click="onItemClicked(item, index)">
                     <f7-icon slot="media"
                              :icon="item[iconField] | icon(iconType)"
-                             :style="{ color: (colorField && item[colorField] && item[colorField] !== '000000' ? '#' + item[colorField] : 'var(--default-icon-color)') }"
+                             :style="item[colorField] | iconStyle(iconType, 'var(--default-icon-color)')"
                              v-if="iconField"></f7-icon>
                     <f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSelected(item, index)"></f7-icon>
                 </f7-list-item>
diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
index 63771724..bd39e01d 100644
--- a/src/components/mobile/TreeViewSelectionSheet.vue
+++ b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -15,7 +15,7 @@
                                   :label="primaryTitleField ? (primaryTitleI18n ? $t(item[primaryTitleField]) : item[primaryTitleField]) : (primaryTitleI18n ? $t(item) : item)">
                     <f7-icon slot="media"
                              :icon="item[primaryIconField] | icon(primaryIconType)"
-                             :style="{ color: (primaryColorField && item[primaryColorField] && item[primaryColorField] !== '000000' ? '#' + item[primaryColorField] : 'var(--default-icon-color)') }"
+                             :style="item[primaryColorField] | iconStyle(primaryIconType, 'var(--default-icon-color)')"
                              v-if="primaryIconField"></f7-icon>
 
                     <f7-treeview-item v-for="subItem in item[primarySubItemsField]"
@@ -26,7 +26,7 @@
                                       @click="onSecondaryItemClicked(subItem)">
                         <f7-icon slot="media"
                                  :icon="subItem[secondaryIconField] | icon(secondaryIconType)"
-                                 :style="{ color: (secondaryColorField && subItem[secondaryColorField] && subItem[secondaryColorField] !== '000000' ? '#' + subItem[secondaryColorField] : 'var(--default-icon-color)') }"
+                                 :style="subItem[secondaryColorField] | iconStyle(secondaryIconType, 'var(--default-icon-color)')"
                                  v-if="secondaryIconField"></f7-icon>
                     </f7-treeview-item>
                 </f7-treeview-item>
diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
index f3adec23..c56344aa 100644
--- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue
+++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -19,7 +19,7 @@
                                           @click="onPrimaryItemClicked(item)">
                                 <f7-icon slot="media"
                                          :icon="item[primaryIconField] | icon(primaryIconType)"
-                                         :style="{ color: (primaryColorField && item[primaryColorField] && item[primaryColorField] !== '000000' ? '#' + item[primaryColorField] : 'var(--default-icon-color)') }"
+                                         :style="item[primaryColorField] | iconStyle(primaryIconType, 'var(--default-icon-color)')"
                                          v-if="primaryIconField"></f7-icon>
                                 <f7-icon slot="after" class="list-item-showing" f7="chevron_right" v-if="item === selectedPrimaryItem"></f7-icon>
                             </f7-list-item>
@@ -37,7 +37,7 @@
                                           @click="onSecondaryItemClicked(subItem)">
                                 <f7-icon slot="media"
                                          :icon="subItem[secondaryIconField] | icon(secondaryIconType)"
-                                         :style="{ color: (secondaryColorField && subItem[secondaryColorField] && subItem[secondaryColorField] !== '000000' ? '#' + subItem[secondaryColorField] : 'var(--default-icon-color)') }"
+                                         :style="subItem[secondaryColorField] | iconStyle(secondaryIconType, 'var(--default-icon-color)')"
                                          v-if="secondaryIconField"></f7-icon>
                                 <f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSecondarySelected(subItem)"></f7-icon>
                             </f7-list-item>
diff --git a/src/consts/color.js b/src/consts/color.js
index 8c4faa3b..dbdbd5b5 100644
--- a/src/consts/color.js
+++ b/src/consts/color.js
@@ -17,6 +17,7 @@ const allAvailableColors = [
 ];
 
 export default {
+    defaultColor: defaultColor,
     allAccountColors: allAvailableColors,
     defaultAccountColor: defaultColor,
     allCategoryColors: allAvailableColors,
diff --git a/src/filters/accountIconStyle.js b/src/filters/accountIconStyle.js
new file mode 100644
index 00000000..d7864b05
--- /dev/null
+++ b/src/filters/accountIconStyle.js
@@ -0,0 +1,13 @@
+import colorConstants from '../consts/color.js';
+
+export default function (color, defaultColor) {
+    if (color && color !== colorConstants.defaultAccountColor) {
+        color = '#' + color;
+    } else {
+        color = defaultColor;
+    }
+
+    return {
+        color: color
+    };
+}
diff --git a/src/filters/categoryIconStyle.js b/src/filters/categoryIconStyle.js
new file mode 100644
index 00000000..46563b7b
--- /dev/null
+++ b/src/filters/categoryIconStyle.js
@@ -0,0 +1,13 @@
+import colorConstants from '../consts/color.js';
+
+export default function (color, defaultColor) {
+    if (color && color !== colorConstants.defaultCategoryColor) {
+        color = '#' + color;
+    } else {
+        color = defaultColor;
+    }
+
+    return {
+        color: color
+    };
+}
diff --git a/src/filters/defaultIconStyle.js b/src/filters/defaultIconStyle.js
new file mode 100644
index 00000000..bf13d857
--- /dev/null
+++ b/src/filters/defaultIconStyle.js
@@ -0,0 +1,13 @@
+import colorConstants from '../consts/color.js';
+
+export default function (color, defaultColor) {
+    if (color && color !== colorConstants.defaultColor) {
+        color = '#' + color;
+    } else {
+        color = defaultColor;
+    }
+
+    return {
+        color: color
+    };
+}
diff --git a/src/filters/iconStyle.js b/src/filters/iconStyle.js
new file mode 100644
index 00000000..97c4e5f8
--- /dev/null
+++ b/src/filters/iconStyle.js
@@ -0,0 +1,13 @@
+import defaultIconStyle from "./defaultIconStyle.js";
+import accountIconStyle from "./accountIconStyle.js";
+import categoryIconStyle from "./categoryIconStyle.js";
+
+export default function (color, iconType, defaultColor) {
+    if (iconType === 'account') {
+        return accountIconStyle(color, defaultColor);
+    } else if (iconType === 'category') {
+        return categoryIconStyle(color, defaultColor);
+    } else {
+        return defaultIconStyle(color, defaultColor);
+    }
+}
diff --git a/src/mobile-main.js b/src/mobile-main.js
index e2495f15..63fdb15b 100644
--- a/src/mobile-main.js
+++ b/src/mobile-main.js
@@ -33,8 +33,11 @@ import webauthn from './lib/webauthn.js';
 import utils from './lib/utils.js';
 import currencyFilter from './filters/currency.js';
 import iconFilter from './filters/icon.js';
+import iconStyleFilter from './filters/iconStyle.js';
 import accountIconFilter from './filters/accountIcon.js';
+import accountIconStyleFilter from './filters/accountIconStyle.js';
 import categoryIconFilter from './filters/categoryIcon.js';
+import categoryIconStyleFilter from './filters/categoryIconStyle.js';
 import tokenDeviceFilter from './filters/tokenDevice.js';
 import tokenIconFilter from './filters/tokenIcon.js';
 
@@ -207,8 +210,11 @@ Vue.prototype.$user = userstate;
 
 Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
 Vue.filter('icon', (value, iconType) => iconFilter(value, iconType));
+Vue.filter('iconStyle', (value, iconType, defaultColor) => iconStyleFilter(value, iconType, defaultColor));
 Vue.filter('accountIcon', (value) => accountIconFilter(value));
+Vue.filter('accountIconStyle', (value, defaultColor) => accountIconStyleFilter(value, defaultColor));
 Vue.filter('categoryIcon', (value) => categoryIconFilter(value));
+Vue.filter('categoryIconStyle', (value, defaultColor) => categoryIconStyleFilter(value, defaultColor));
 Vue.filter('tokenDevice', (value) => tokenDeviceFilter(value));
 Vue.filter('tokenIcon', (value) => tokenIconFilter(value));
 
diff --git a/src/views/mobile/accounts/Edit.vue b/src/views/mobile/accounts/Edit.vue
index 4dd0d062..7c611651 100644
--- a/src/views/mobile/accounts/Edit.vue
+++ b/src/views/mobile/accounts/Edit.vue
@@ -91,7 +91,7 @@
                                   @click="account.showIconSelectionSheet = true">
                         <f7-icon slot="after"
                                  :icon="account.icon | accountIcon"
-                                 :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
+                                 :style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
                         <icon-selection-sheet :all-icon-infos="allAccountIcons"
                                               :show.sync="account.showIconSelectionSheet"
                                               :color="account.color"
@@ -103,7 +103,7 @@
                                   @click="account.showColorSelectionSheet = true">
                         <f7-icon slot="after"
                                  f7="app_fill"
-                                 :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
+                                 :style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
                         <color-selection-sheet :all-color-infos="allAccountColors"
                                                :show.sync="account.showColorSelectionSheet"
                                                v-model="account.color"
@@ -167,7 +167,7 @@
                                   @click="account.showIconSelectionSheet = true">
                         <f7-icon slot="after"
                                  :icon="account.icon | accountIcon"
-                                 :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
+                                 :style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
                         <icon-selection-sheet :all-icon-infos="allAccountIcons"
                                               :show.sync="account.showIconSelectionSheet"
                                               :color="account.color"
@@ -179,7 +179,7 @@
                                   @click="account.showColorSelectionSheet = true">
                         <f7-icon slot="after"
                                  f7="app_fill"
-                                 :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
+                                 :style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
                         <color-selection-sheet :all-color-infos="allAccountColors"
                                                :show.sync="account.showColorSelectionSheet"
                                                v-model="account.color"
@@ -225,7 +225,7 @@
                                       @click="subAccount.showIconSelectionSheet = true">
                             <f7-icon slot="after"
                                      :icon="subAccount.icon | accountIcon"
-                                     :style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }"></f7-icon>
+                                     :style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
                             <icon-selection-sheet :all-icon-infos="allAccountIcons"
                                                   :show.sync="subAccount.showIconSelectionSheet"
                                                   :color="subAccount.color"
@@ -237,7 +237,7 @@
                                       @click="subAccount.showColorSelectionSheet = true">
                             <f7-icon slot="after"
                                      f7="app_fill"
-                                     :style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }"></f7-icon>
+                                     :style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
                             <color-selection-sheet :all-color-infos="allAccountColors"
                                                    :show.sync="subAccount.showColorSelectionSheet"
                                                    v-model="subAccount.color"
diff --git a/src/views/mobile/accounts/List.vue b/src/views/mobile/accounts/List.vue
index 37ffb8ef..2e83baa9 100644
--- a/src/views/mobile/accounts/List.vue
+++ b/src/views/mobile/accounts/List.vue
@@ -129,7 +129,7 @@
                         <f7-block slot="title" class="no-padding">
                             <div class="display-flex padding-top-half padding-bottom-half">
                                 <f7-icon slot="media" :icon="account.icon | accountIcon"
-                                         :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }">
+                                         :style="account.color | accountIconStyle('var(--default-icon-color)')">
                                     <f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
                                         <f7-icon f7="eye_slash_fill"></f7-icon>
                                     </f7-badge>
@@ -144,7 +144,7 @@
                                                   link="#"
                                     >
                                         <f7-icon slot="media" :icon="subAccount.icon | accountIcon"
-                                                 :style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }">
+                                                 :style="subAccount.color | accountIconStyle('var(--default-icon-color)')">
                                             <f7-badge color="gray" class="right-bottom-icon" v-if="subAccount.hidden">
                                                 <f7-icon f7="eye_slash_fill"></f7-icon>
                                             </f7-badge>
diff --git a/src/views/mobile/categories/Default.vue b/src/views/mobile/categories/Default.vue
index 9a648c1d..46e4eb3f 100644
--- a/src/views/mobile/categories/Default.vue
+++ b/src/views/mobile/categories/Default.vue
@@ -23,7 +23,7 @@
                                   :title="$t('category.' + category.name, currentLocale)">
                         <f7-icon slot="media"
                                  :icon="category.categoryIconId | categoryIcon"
-                                 :style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }">
+                                 :style="category.color | categoryIconStyle('var(--default-icon-color)')">
                         </f7-icon>
 
                         <f7-accordion-content v-if="category.subCategories.length" class="padding-left">
@@ -33,7 +33,7 @@
                                               :title="$t('category.' + subCategory.name, currentLocale)">
                                     <f7-icon slot="media"
                                              :icon="subCategory.categoryIconId | categoryIcon"
-                                             :style="{ color: (subCategory.color && subCategory.color !== '000000' ? '#' + subCategory.color : 'var(--default-icon-color)') }">
+                                             :style="subCategory.color | categoryIconStyle('var(--default-icon-color)')">
                                     </f7-icon>
                                 </f7-list-item>
                             </f7-list>
diff --git a/src/views/mobile/categories/Edit.vue b/src/views/mobile/categories/Edit.vue
index 1d4781da..9221013c 100644
--- a/src/views/mobile/categories/Edit.vue
+++ b/src/views/mobile/categories/Edit.vue
@@ -41,7 +41,7 @@
                                   @click="category.showIconSelectionSheet = true">
                         <f7-icon slot="after"
                                  :icon="category.icon | categoryIcon"
-                                 :style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }"></f7-icon>
+                                 :style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
                         <icon-selection-sheet :all-icon-infos="allCategoryIcons"
                                               :show.sync="category.showIconSelectionSheet"
                                               :color="category.color"
@@ -53,7 +53,7 @@
                                   @click="category.showColorSelectionSheet = true">
                         <f7-icon slot="after"
                                  f7="app_fill"
-                                 :style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }"></f7-icon>
+                                 :style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
                         <color-selection-sheet :all-color-infos="allCategoryColors"
                                                :show.sync="category.showColorSelectionSheet"
                                                v-model="category.color"
diff --git a/src/views/mobile/categories/List.vue b/src/views/mobile/categories/List.vue
index af748454..d9960cf6 100644
--- a/src/views/mobile/categories/List.vue
+++ b/src/views/mobile/categories/List.vue
@@ -45,7 +45,7 @@
                                   swipeout @taphold.native="setSortable()">
                         <f7-icon slot="media"
                                  :icon="category.icon | categoryIcon"
-                                 :style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }">
+                                 :style="category.color | categoryIconStyle('var(--default-icon-color)')">
                             <f7-badge color="gray" class="right-bottom-icon" v-if="category.hidden">
                                 <f7-icon f7="eye_slash_fill"></f7-icon>
                             </f7-badge>