diff --git a/assets/images/bankicons/generic-bank-account.svg b/assets/images/bankicons/generic-bank-account.svg
new file mode 100644
index 000000000000..a76942b1d320
--- /dev/null
+++ b/assets/images/bankicons/generic-bank-account.svg
@@ -0,0 +1,13 @@
+
+
+
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index b88e2d58b095..366db74acf62 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -26,7 +26,6 @@ import * as ReimbursementAccountUtils from '../libs/ReimbursementAccountUtils';
import ReimbursementAccountForm from '../pages/ReimbursementAccount/ReimbursementAccountForm';
import getBankIcon from './Icon/BankIcons';
import Icon from './Icon';
-import variables from '../styles/variables';
const propTypes = {
...withLocalizePropTypes,
@@ -151,6 +150,7 @@ class AddPlaidBankAccount extends React.Component {
const options = _.map(accounts, (account, index) => ({
value: index, label: `${account.addressName} ${account.accountNumber}`,
}));
+ const {bankIcon, bankIconSize} = getBankIcon(this.state.institution.name);
return (
<>
{(!this.props.plaidLinkToken || this.props.plaidBankAccounts.loading)
@@ -185,9 +185,9 @@ class AddPlaidBankAccount extends React.Component {
)}
{this.state.institution.name}
diff --git a/src/components/Icon/BankIcons.js b/src/components/Icon/BankIcons.js
index aaae5f6eecc9..048de6e7550c 100644
--- a/src/components/Icon/BankIcons.js
+++ b/src/components/Icon/BankIcons.js
@@ -1,4 +1,4 @@
-import {Bank, CreditCard} from './Expensicons';
+import CreditCard from './Expensicons';
import AmericanExpress from '../../../assets/images/bankicons/american-express.svg';
import BankOfAmerica from '../../../assets/images/bankicons/bank-of-america.svg';
import BB_T from '../../../assets/images/bankicons/bb-t.svg';
@@ -10,6 +10,7 @@ import CitizensBank from '../../../assets/images/bankicons/citizens-bank.svg';
import Discover from '../../../assets/images/bankicons/discover.svg';
import Fidelity from '../../../assets/images/bankicons/fidelity.svg';
import HuntingtonBank from '../../../assets/images/bankicons/huntington-bank.svg';
+import GenericBank from '../../../assets/images/bankicons/generic-bank-account.svg';
import NavyFederalCreditUnion from '../../../assets/images/bankicons/navy-federal-credit-union.svg';
import PNC from '../../../assets/images/bankicons/pnc.svg';
import RegionsBank from '../../../assets/images/bankicons/regions-bank.svg';
@@ -99,7 +100,7 @@ function getAssetIcon(bankName, isCard) {
return USAA;
}
- return isCard ? CreditCard : Bank;
+ return isCard ? CreditCard : GenericBank;
}
/**
@@ -111,15 +112,15 @@ function getAssetIcon(bankName, isCard) {
export default function getBankIcon(bankName, isCard) {
const bankIcon = {
- icon: isCard ? CreditCard : Bank,
+ icon: isCard ? CreditCard : GenericBank,
};
if (bankName) {
bankIcon.icon = getAssetIcon(bankName.toLowerCase(), isCard);
}
- // For default icons the icon size should not be set.
- if (![CreditCard, Bank].includes(bankIcon.icon)) {
+ // For default Credit Card icon the icon size should not be set.
+ if (![CreditCard].includes(bankIcon.icon)) {
bankIcon.iconSize = variables.iconSizeExtraLarge;
}