diff --git a/package-lock.json b/package-lock.json
index 3f2448a1..bf55955d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6955,6 +6955,11 @@
         "type-check": "~0.3.2"
       }
     },
+    "line-awesome": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/line-awesome/-/line-awesome-1.3.0.tgz",
+      "integrity": "sha512-Y0YHksL37ixDsHz+ihCwOtF5jwJgCDxQ3q+zOVgaSW8VugHGTsZZXMacPYZB1/JULBi6BAuTCTek+4ZY/UIwcw=="
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
diff --git a/package.json b/package.json
index 93ca5fc5..d75f0902 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "framework7-icons": "^3.0.1",
     "framework7-vue": "^5.7.14",
     "js-cookie": "^2.2.1",
+    "line-awesome": "^1.3.0",
     "moment": "^2.29.1",
     "ua-parser-js": "^0.7.22",
     "vue": "^2.6.12",
diff --git a/src/Mobile.vue b/src/Mobile.vue
index 203ac112..fdf170c6 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -53,6 +53,10 @@ body {
     --f7-theme-color-tint: #d09467;
 }
 
+i.icon.la, i.icon.las, i.icon.lab {
+    font-size: 28px;
+}
+
 .navbar .navbar-compact-icons.right a + a {
     margin-left: 0;
 }
diff --git a/src/consts/account.js b/src/consts/account.js
index 8af46fed..08bbe76f 100644
--- a/src/consts/account.js
+++ b/src/consts/account.js
@@ -9,37 +9,37 @@ const allAccountCategories = [
         id: 2,
         name: 'Debit Card',
         isAsset: true,
-        defaultAccountIconId: '2'
+        defaultAccountIconId: '100'
     },
     {
         id: 3,
         name: 'Credit Card',
         isLiability: true,
-        defaultAccountIconId: '2'
+        defaultAccountIconId: '100'
     },
     {
         id: 4,
         name: 'Virtual Account',
         isAsset: true,
-        defaultAccountIconId: '3'
+        defaultAccountIconId: '500'
     },
     {
         id: 5,
         name: 'Debt Account',
         isLiability: true,
-        defaultAccountIconId: '4'
+        defaultAccountIconId: '600'
     },
     {
         id: 6,
         name: 'Receivables',
         isAsset: true,
-        defaultAccountIconId: '5'
+        defaultAccountIconId: '700'
     },
     {
         id: 7,
         name: 'Investment Account',
         isAsset: true,
-        defaultAccountIconId: '6'
+        defaultAccountIconId: '800'
     }
 ];
 const allAccountTypes = {
diff --git a/src/consts/icon.js b/src/consts/icon.js
index 0b95becd..9110f3d0 100644
--- a/src/consts/icon.js
+++ b/src/consts/icon.js
@@ -1,68 +1,160 @@
-const totalAccountIconCount = 22;
 const defaultAccountIconId = '1';
 const allAccountIcons = {
+    // 1 - 99 : cash symbols
     '1': {
-        f7Icon: 'bag'
-    },
-    '2': {
-        f7Icon: 'creditcard'
-    },
-    '3': {
-        f7Icon: 'rectangle_dock'
-    },
-    '4': {
-        f7Icon: 'bag_badge_minus'
-    },
-    '5': {
-        f7Icon: 'tray_arrow_down'
-    },
-    '6': {
-        f7Icon: 'graph_square'
-    },
-    '7': {
-        f7Icon: 'cube_box'
-    },
-    '8': {
-        f7Icon: 'tickets'
-    },
-    '9': {
-        f7Icon: 'lock_shield'
+        icon: 'las la-wallet'
     },
     '10': {
-        f7Icon: 'infinite'
-    },
-    '11': {
-        f7Icon: 'logo_apple'
-    },
-    '12': {
-        f7Icon: 'person'
-    },
-    '13': {
-        f7Icon: 'person_2'
-    },
-    '14': {
-        f7Icon: 'person_3'
-    },
-    '15': {
-        f7Icon: 'globe'
-    },
-    '16': {
-        f7Icon: 'money_dollar'
-    },
-    '17': {
-        f7Icon: 'money_euro'
-    },
-    '18': {
-        f7Icon: 'money_pound'
-    },
-    '19': {
-        f7Icon: 'money_rubl'
+        icon: 'las la-coins'
     },
     '20': {
-        f7Icon: 'money_yen'
+        icon: 'las la-money-bill-alt'
     },
-    '21': {
-        f7Icon: 'bitcoin'
+    '30': {
+        icon: 'las la-piggy-bank'
+    },
+    // 100 - 199 : bank service symbols
+    '100': {
+        icon: 'las la-credit-card'
+    },
+    '110': {
+        icon: 'las la-money-check-alt'
+    },
+    // 500 - 999 : other symbols
+    '500': {
+        icon: 'las la-digital-tachograph'
+    },
+    '510': {
+        icon: 'las la-ticket-alt'
+    },
+    '520': {
+        icon: 'las la-envelope'
+    },
+    '530': {
+        icon: 'las la-box'
+    },
+    '540': {
+        icon: 'las la-donate'
+    },
+    '560': {
+        icon: 'las la-shield-alt'
+    },
+    '600': {
+        icon: 'las la-calendar-minus'
+    },
+    '601': {
+        icon: 'las la-calendar-plus'
+    },
+    '700': {
+        icon: 'las la-file-invoice-dollar'
+    },
+    '701': {
+        icon: 'las la-receipt'
+    },
+    '800': {
+        icon: 'las la-chart-area'
+    },
+    '801': {
+        icon: 'las la-chart-line'
+    },
+    '900': {
+        icon: 'las la-user-friends'
+    },
+    '901': {
+        icon: 'las la-users'
+    },
+    '910': {
+        icon: 'las la-home'
+    },
+    '911': {
+        icon: 'las la-building'
+    },
+    '912': {
+        icon: 'las la-industry'
+    },
+    '990': {
+        icon: 'las la-globe'
+    },
+    // 1000 - 1999 : currency symbols
+    '1000': {
+        icon: 'las la-dollar-sign'
+    },
+    '1001': {
+        icon: 'las la-euro-sign'
+    },
+    '1002': {
+        icon: 'las la-pound-sign'
+    },
+    '1003': {
+        icon: 'las la-yen-sign'
+    },
+    '1004': {
+        icon: 'las la-ruble-sign'
+    },
+    '1005': {
+        icon: 'las la-rupee-sign'
+    },
+    '1006': {
+        icon: 'las la-won-sign'
+    },
+    '1007': {
+        icon: 'las la-shekel-sign'
+    },
+    '1008': {
+        icon: 'las la-hryvnia'
+    },
+    '1009': {
+        icon: 'las la-tenge'
+    },
+    '1500': {
+        icon: 'lab la-bitcoin'
+    },
+    '1501': {
+        icon: 'lab la-ethereum'
+    },
+    // 5000 - 5999 : credit card brand symbols
+    '5000': {
+        icon: 'lab la-cc-visa'
+    },
+    '5001': {
+        icon: 'lab la-cc-mastercard'
+    },
+    '5002': {
+        icon: 'lab la-cc-amex'
+    },
+    '5100': {
+        icon: 'lab la-cc-discover'
+    },
+    '5200': {
+        icon: 'lab la-cc-jcb'
+    },
+    '5300': {
+        icon: 'lab la-cc-diners-club'
+    },
+    // 8000 - 8999 : e-pay brand symbols
+    '8000': {
+        icon: 'lab la-paypal'
+    },
+    '8100': {
+        icon: 'lab la-apple-pay'
+    },
+    '8101': {
+        icon: 'lab la-google-wallet'
+    },
+    '8200': {
+        icon: 'lab la-amazon-pay'
+    },
+    '8201': {
+        icon: 'lab la-stripe'
+    },
+    '8300': {
+        icon: 'lab la-alipay'
+    },
+    '8301': {
+        icon: 'lab la-qq'
+    },
+    '8302': {
+        icon: 'lab la-weixin'
     }
 };
 const deviceIcons = {
@@ -87,6 +179,5 @@ export default {
     allAccountIcons: allAccountIcons,
     defaultAccountIconId: defaultAccountIconId,
     defaultAccountIcon: allAccountIcons[defaultAccountIconId],
-    totalAccountIconCount: totalAccountIconCount,
     deviceIcons: deviceIcons,
 };
diff --git a/src/filters/accountIcon.js b/src/filters/accountIcon.js
index e6986369..08c33564 100644
--- a/src/filters/accountIcon.js
+++ b/src/filters/accountIcon.js
@@ -6,9 +6,9 @@ export default function (iconId) {
         iconId = iconId.toString();
     }
 
-    if (iconId <= icons.totalAccountIconCount) {
-        return icons.allAccountIcons[iconId].f7Icon;
+    if (!icons.allAccountIcons[iconId]) {
+        return icons.defaultAccountIcon.icon;
     }
 
-    return icons.defaultAccountIcon.f7Icon;
+    return icons.allAccountIcons[iconId].icon;
 }
diff --git a/src/mobile-main.js b/src/mobile-main.js
index 814b06b2..00683c72 100644
--- a/src/mobile-main.js
+++ b/src/mobile-main.js
@@ -13,6 +13,8 @@ import 'moment/min/locales';
 import 'framework7/css/framework7.bundle.css';
 import 'framework7-icons';
 
+import 'line-awesome/dist/line-awesome/css/line-awesome.css';
+
 import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js';
 import currency from './consts/currency.js';
 import colors from './consts/color.js';
diff --git a/src/views/mobile/accounts/AccountEdit.vue b/src/views/mobile/accounts/AccountEdit.vue
index bf07a133..5a4fa847 100644
--- a/src/views/mobile/accounts/AccountEdit.vue
+++ b/src/views/mobile/accounts/AccountEdit.vue
@@ -71,7 +71,7 @@
 
                     <f7-list-item :header="$t('Account Icon')" key="singleTypeAccountIconSelection" link="#"
                                   @click="showIconSelectionSheet(account)">
-                        <f7-icon slot="after" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
+                        <f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
                     </f7-list-item>
 
                     <f7-list-item :header="$t('Account Color')" key="singleTypeAccountColorSelection" link="#"
@@ -120,7 +120,7 @@
 
                     <f7-list-item :header="$t('Account Icon')" key="multiTypeAccountIconSelection" link="#"
                                   @click="showIconSelectionSheet(account)">
-                        <f7-icon slot="after" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
+                        <f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
                     </f7-list-item>
 
                     <f7-list-item :header="$t('Account Color')" key="multiTypeAccountColorSelection" link="#"
@@ -162,7 +162,7 @@
 
                         <f7-list-item :header="$t('Sub Account Icon')" key="subAccountIconSelection" link="#"
                                       @click="showIconSelectionSheet(subAccount)">
-                            <f7-icon slot="after" :f7="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
+                            <f7-icon slot="after" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
                         </f7-list-item>
 
                         <f7-list-item :header="$t('Sub Account Color')" key="subAccountColorSelection" link="#"
@@ -210,15 +210,16 @@
                 </div>
             </f7-toolbar>
             <f7-page-content>
-                <f7-block>
+                <f7-block class="margin-vertical">
                     <f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allAccountIconRows" :key="idx">
                         <f7-col v-for="accountIcon in row" :key="accountIcon.id">
-                            <f7-icon :f7="accountIcon.f7Icon" :style="{ color: '#' + (accountChoosingIcon ? accountChoosingIcon.color : '000000') }" @click.native="setSelectedIcon(accountIcon)">
+                            <f7-icon :icon="accountIcon.icon" :style="{ color: '#' + (accountChoosingIcon ? accountChoosingIcon.color : '000000') }" @click.native="setSelectedIcon(accountIcon)">
                                 <f7-badge color="default" class="right-bottom-icon" v-if="accountChoosingIcon && accountChoosingIcon.icon === accountIcon.id">
                                     <f7-icon f7="checkmark_alt"></f7-icon>
                                 </f7-badge>
                             </f7-icon>
                         </f7-col>
+                        <f7-col v-for="idx in (iconCountPerRow - row.length)" :key="idx"></f7-col>
                     </f7-row>
                 </f7-block>
             </f7-page-content>
@@ -232,7 +233,7 @@
                 </div>
             </f7-toolbar>
             <f7-page-content>
-                <f7-block>
+                <f7-block class="margin-vertical">
                     <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allAccountColorRows" :key="idx">
                         <f7-col v-for="accountColor in row" :key="accountColor.color">
                             <f7-icon f7="app_fill" :style="{ color: '#' + accountColor.color }" @click.native="setSelectedColor(accountColor.color)">
@@ -241,6 +242,7 @@
                                 </f7-badge>
                             </f7-icon>
                         </f7-col>
+                        <f7-col v-for="idx in (iconCountPerRow - row.length)" :key="idx"></f7-col>
                     </f7-row>
                 </f7-block>
             </f7-page-content>
@@ -267,6 +269,7 @@ export default {
                 visible: true
             },
             subAccounts: [],
+            iconCountPerRow: 7,
             accountChoosingIcon: null,
             accountChoosingColor: null,
             submitting: false,
@@ -294,7 +297,6 @@ export default {
         },
         allAccountIconRows() {
             const allAccountIcons = this.$constants.icons.allAccountIcons;
-            const iconPerRow = 7;
             const ret = [];
             let rowCount = 0;
 
@@ -307,14 +309,14 @@ export default {
 
                 if (!ret[rowCount]) {
                     ret[rowCount] = [];
-                } else if (ret[rowCount] && ret[rowCount].length >= iconPerRow) {
+                } else if (ret[rowCount] && ret[rowCount].length >= this.iconCountPerRow) {
                     rowCount++;
                     ret[rowCount] = [];
                 }
 
                 ret[rowCount].push({
                     id: accountIconId,
-                    f7Icon: accountIcon.f7Icon
+                    icon: accountIcon.icon
                 });
             }
 
@@ -322,12 +324,11 @@ export default {
         },
         allAccountColorRows() {
             const allAccountColors = this.$constants.colors.allAccountColors;
-            const colorPerRow = 7;
             const ret = [];
             let rowCount = -1;
 
             for (let i = 0; i < allAccountColors.length; i++) {
-                if (i % colorPerRow === 0) {
+                if (i % this.iconCountPerRow === 0) {
                     ret[++rowCount] = [];
                 }
 
diff --git a/src/views/mobile/accounts/AccountList.vue b/src/views/mobile/accounts/AccountList.vue
index 390f44d2..d2d52e81 100644
--- a/src/views/mobile/accounts/AccountList.vue
+++ b/src/views/mobile/accounts/AccountList.vue
@@ -87,7 +87,7 @@
                     >
                         <f7-block slot="title" class="no-padding">
                             <div class="display-flex">
-                                <f7-icon slot="media" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }">
+                                <f7-icon slot="media" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }">
                                     <f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
                                         <f7-icon f7="eye_slash_fill"></f7-icon>
                                     </f7-badge>
@@ -101,7 +101,7 @@
                                                   :title="subAccount.name" :after="accountBalance(subAccount) | currency(subAccount.currency)"
                                                   link="#"
                                     >
-                                        <f7-icon slot="media" :f7="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }">
+                                        <f7-icon slot="media" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }">
                                             <f7-badge color="gray" class="right-bottom-icon" v-if="subAccount.hidden">
                                                 <f7-icon f7="eye_slash_fill"></f7-icon>
                                             </f7-badge>