From 11cf80abf6a5eddccaa4be4743cdc63694a1651a Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 28 May 2019 11:13:46 +0800
Subject: [PATCH 01/19] icon.jsx : finish mapping up to NavBar based on
 filesystem order

---
 src/javascript/app/Assets/Common/icon.jsx | 33 --------
 src/javascript/app/Assets/icon.jsx        | 93 +++++++++++++++++++++++
 2 files changed, 93 insertions(+), 33 deletions(-)
 delete mode 100644 src/javascript/app/Assets/Common/icon.jsx
 create mode 100644 src/javascript/app/Assets/icon.jsx

diff --git a/src/javascript/app/Assets/Common/icon.jsx b/src/javascript/app/Assets/Common/icon.jsx
deleted file mode 100644
index 7ee9ab93c787..000000000000
--- a/src/javascript/app/Assets/Common/icon.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React     from 'react';
-import PropTypes from 'prop-types';
-
-class Icon extends React.PureComponent {
-    render() {
-        const options = {
-            category     : this.props.category,
-            className    : this.props.className,
-            classNamePath: this.props.classNamePath,
-            classNameRect: this.props.classNameRect,
-            is_disabled  : this.props.is_disabled,
-            onClick      : this.props.onClick,
-            onMouseEnter : this.props.onMouseEnter,
-            onMouseLeave : this.props.onMouseLeave,
-            type         : this.props.type,
-        };
-
-        return this.props.icon(options);
-    }
-}
-
-Icon.propTypes = {
-    category     : PropTypes.string,
-    className    : PropTypes.string,
-    classNamePath: PropTypes.string,
-    classNameRect: PropTypes.string,
-    icon         : PropTypes.func,
-    is_disabled  : PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    onClick      : PropTypes.func,
-    type         : PropTypes.string,
-};
-
-export { Icon };
diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
new file mode 100644
index 000000000000..d3c830432d06
--- /dev/null
+++ b/src/javascript/app/Assets/icon.jsx
@@ -0,0 +1,93 @@
+import React     from 'react';
+import PropTypes from 'prop-types';
+
+class Icon extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.icons = { /* When adding a new icon, arrange it by following the ascending file system arrangement */
+            // Common
+            IconArrowBold         : React.lazy(() => import('./Common/icon-arrow-bold.jsx')),
+            IconArrow             : React.lazy(() => import('./Common/icon-arrow.jsx')),
+            IconBack              : React.lazy(() => import('./Common/icon-back.jsx')),
+            IconCalendarToday     : React.lazy(() => import('./Common/icon-calendar-today.jsx')),
+            IconCalendar          : React.lazy(() => import('./Common/icon-calendar.jsx')),
+            IconChevronDoubleLeft : React.lazy(() => import('./Common/icon-chevron-double-left.jsx')),
+            IconChevronDoubleRight: React.lazy(() => import('./Common/icon-chevron-double-right.jsx')),
+            IconChevronLeft       : React.lazy(() => import('./Common/icon-chevron-left.jsx')),
+            IconChevronRight      : React.lazy(() => import('./Common/icon-chevron-right.jsx')),
+            IconClear             : React.lazy(() => import('./Common/icon-clear.jsx')),
+            IconClock             : React.lazy(() => import('./Common/icon-clock.jsx')),
+            IconClose             : React.lazy(() => import('./Common/icon-close.jsx')),
+            IconCountryFlag       : React.lazy(() => import('./Common/icon-country-flag.jsx')),
+            IconExclamation       : React.lazy(() => import('./Common/icon-exclamation.jsx')),
+            IconFlag              : React.lazy(() => import('./Common/icon-flag.jsx')),
+            IconInfoBlue          : React.lazy(() => import('./Common/icon-info-blue.jsx')),
+            IconInfoOutline       : React.lazy(() => import('./Common/icon-info-outline.jsx')),
+            IconMinimize          : React.lazy(() => import('./Common/icon-minimize.jsx')),
+            IconMinus             : React.lazy(() => import('./Common/icon-minus.jsx')),
+            IconPlus              : React.lazy(() => import('./Common/icon-plus.jsx')),
+            IconQuestion          : React.lazy(() => import('./Common/icon-question.jsx')),
+            IconRedDot            : React.lazy(() => import('./Common/icon-red-dot.jsx')),
+            IconSuccess           : React.lazy(() => import('./Common/icon-success.jsx')),
+            IconWarning           : React.lazy(() => import('./Common/icon-warning.jsx')),
+            IconWip               : React.lazy(() => import('./Common/icon-wip.jsx')),
+            
+            // Contract
+            IconContractClose: React.lazy(() => import('./Contract/icon-contract-close.jsx')),
+            IconEndTimeSVG   : React.lazy(() => import('./Contract/icon-end-time.jsx')),
+            IconFlagSVG      : React.lazy(() => import('./Contract/icon-flag.jsx')),
+            IconStartTimeSVG : React.lazy(() => import('./Contract/icon-start-time.jsx')),
+            IconTickSVG      : React.lazy(() => import('./Contract/icon-tick.jsx')),
+
+            // Footer
+            IconSettings: React.lazy(() => import('./Footer/icon-settings.jsx')),
+            IconMaximize: React.lazy(() => import('./Footer/icon-maximize.jsx')),
+
+            // Header
+            IconAccountsCurrency: React.lazy(() => import('./Header/AccountsCurrency')),
+            IconLogout          : React.lazy(() => import('./Header/Drawer')),
+            IconBell            : React.lazy(() => import('./Header/NavBar')),
+            IconCashier         : React.lazy(() => import('./Header/NavBar')),
+            IconDeriv           : React.lazy(() => import('./Header/NavBar')),
+            IconHamburger       : React.lazy(() => import('./Header/NavBar')),
+            IconPortfolio       : React.lazy(() => import('./Header/NavBar')),
+            IconReports         : React.lazy(() => import('./Header/NavBar')),
+            IconTrade           : React.lazy(() => import('./Header/NavBar')),
+
+            // Reports
+            // Settings
+            // Statement
+            // Trade
+
+        };
+    }
+
+    render() {
+        const options = {
+            category     : this.props.category,
+            className    : this.props.className,
+            classNamePath: this.props.classNamePath,
+            classNameRect: this.props.classNameRect,
+            is_disabled  : this.props.is_disabled,
+            onClick      : this.props.onClick,
+            onMouseEnter : this.props.onMouseEnter,
+            onMouseLeave : this.props.onMouseLeave,
+            type         : this.props.type,
+        };
+
+        return this.props.icon(options);
+    }
+}
+
+Icon.propTypes = {
+    category     : PropTypes.string,
+    className    : PropTypes.string,
+    classNamePath: PropTypes.string,
+    classNameRect: PropTypes.string,
+    icon         : PropTypes.func,
+    is_disabled  : PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+    onClick      : PropTypes.func,
+    type         : PropTypes.string,
+};
+
+export { Icon };

From 7846e1ef79bdaf6389557f7ddbe2f5b1c6f9ea6c Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 28 May 2019 14:02:53 +0800
Subject: [PATCH 02/19] icon : map all icons in assets folder

---
 src/javascript/app/Assets/icon.jsx | 33 +++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
index d3c830432d06..ff58f0f060cc 100644
--- a/src/javascript/app/Assets/icon.jsx
+++ b/src/javascript/app/Assets/icon.jsx
@@ -19,10 +19,12 @@ class Icon extends React.PureComponent {
             IconClock             : React.lazy(() => import('./Common/icon-clock.jsx')),
             IconClose             : React.lazy(() => import('./Common/icon-close.jsx')),
             IconCountryFlag       : React.lazy(() => import('./Common/icon-country-flag.jsx')),
+            IconDanger            : React.lazy(() => import('./Common/icon-danger.jsx')),
             IconExclamation       : React.lazy(() => import('./Common/icon-exclamation.jsx')),
             IconFlag              : React.lazy(() => import('./Common/icon-flag.jsx')),
             IconInfoBlue          : React.lazy(() => import('./Common/icon-info-blue.jsx')),
             IconInfoOutline       : React.lazy(() => import('./Common/icon-info-outline.jsx')),
+            IconInformation       : React.lazy(() => import('./Common/icon-information.jsx')),
             IconMinimize          : React.lazy(() => import('./Common/icon-minimize.jsx')),
             IconMinus             : React.lazy(() => import('./Common/icon-minus.jsx')),
             IconPlus              : React.lazy(() => import('./Common/icon-plus.jsx')),
@@ -40,8 +42,9 @@ class Icon extends React.PureComponent {
             IconTickSVG      : React.lazy(() => import('./Contract/icon-tick.jsx')),
 
             // Footer
-            IconSettings: React.lazy(() => import('./Footer/icon-settings.jsx')),
-            IconMaximize: React.lazy(() => import('./Footer/icon-maximize.jsx')),
+            IconMaximize : React.lazy(() => import('./Footer/icon-maximize.jsx')),
+            IconPositions: React.lazy(() => import('./Footer/icon-positions.jsx')),
+            IconSettings : React.lazy(() => import('./Footer/icon-settings.jsx')),
 
             // Header
             IconAccountsCurrency: React.lazy(() => import('./Header/AccountsCurrency')),
@@ -55,10 +58,34 @@ class Icon extends React.PureComponent {
             IconTrade           : React.lazy(() => import('./Header/NavBar')),
 
             // Reports
+            IconOpenPositions: React.lazy(() => import('./Reports/icon-open-positions.jsx')),
+            IconProfitTable  : React.lazy(() => import('./Reports/icon-profit-table.jsx')),
+            IconStatement    : React.lazy(() => import('./Reports/icon-statement.jsx')),
+
             // Settings
+            IconCharts       : React.lazy(() => import('./Settings')),
+            IconCloseSettings: React.lazy(() => import('./Settings')), // Previously IconClose, so replace IconClose that has the same import path with this.
+            IconLanguage     : React.lazy(() => import('./Settings')),
+            IconPurchase     : React.lazy(() => import('./Settings')),
+            IconTheme        : React.lazy(() => import('./Settings')),
+
             // Statement
-            // Trade
+            IconBuy       : React.lazy(() => import('./Statement')),
+            IconDeposit   : React.lazy(() => import('./Statement')),
+            IconPayout    : React.lazy(() => import('./Statement')),
+            IconSell      : React.lazy(() => import('./Statement')),
+            IconWallet    : React.lazy(() => import('./Statement')),
+            IconWithdrawal: React.lazy(() => import('./Statement')),
 
+            // Trading
+            IconBarrierDown   : React.lazy(() => import('./Trading/Barriers')),
+            IconBarrierUp     : React.lazy(() => import('./Trading/Barriers')),
+            IconTradeCategory : React.lazy(() => import('./Trading/Categories')),
+            TradeCategoriesGIF: React.lazy(() => import('./Trading/Categories')),
+            TradeCategories   : React.lazy(() => import('./Trading/Categories')),
+            IconTradeType     : React.lazy(() => import('./Trading/Types')),
+            IconLock          : React.lazy(() => import('./Trading/icon-lock.jsx')),
+            IconPriceMove     : React.lazy(() => import('./Trading/icon-price-move.jsx')),
         };
     }
 

From 50b124866d1d1c4dbc4e0ef9cf3c04bacb7a80ae Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Mon, 3 Jun 2019 15:52:25 +0800
Subject: [PATCH 03/19] <Icon /> is functional

---
 src/javascript/app/Assets/icon.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
index ff58f0f060cc..d24632af3f03 100644
--- a/src/javascript/app/Assets/icon.jsx
+++ b/src/javascript/app/Assets/icon.jsx
@@ -102,7 +102,8 @@ class Icon extends React.PureComponent {
             type         : this.props.type,
         };
 
-        return this.props.icon(options);
+        const IconLazy = this.icons[this.props.icon] ? this.icons[this.props.icon] : <div />;
+        return <IconLazy {...options} />;
     }
 }
 

From cb394690178ad8004f9d07d2ad74dafb40f76351 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Mon, 3 Jun 2019 17:10:09 +0800
Subject: [PATCH 04/19] changed all usage to proposed one

---
 .../Elements/Calendar/calendar-footer.jsx     | 12 ++--
 .../Elements/Calendar/calendar-header.jsx     | 29 ++++------
 .../Elements/ContractAudit/contract-audit.jsx | 14 ++---
 .../ContractDrawer/contract-drawer.jsx        |  4 +-
 .../Elements/Drawer/drawer-header.jsx         |  8 +--
 .../NotificationMessage/notification.jsx      | 24 ++++----
 .../__tests__/empty-notification.spec.js      |  7 +--
 .../Notifications/empty-notification.jsx      |  5 +-
 .../Notifications/notification-bar.jsx        |  4 +-
 .../Elements/Popover/popover-bubble.jsx       |  5 +-
 .../Components/Elements/Popover/popover.jsx   | 19 +++----
 .../PositionsDrawer/contract-type-cell.jsx    |  4 +-
 .../PositionsDrawer/positions-drawer-card.jsx |  8 ++-
 .../PositionsDrawer/positions-drawer.jsx      |  6 +-
 .../PositionsDrawer/result-details.jsx        |  4 +-
 .../PositionsDrawer/result-overlay.jsx        |  7 +--
 .../SettingsDialog/language-dialog.jsx        | 15 ++---
 .../SettingsDialog/settings-dialog.jsx        | 31 ++++------
 .../vertical-tab-content-container.jsx        |  2 +-
 .../VerticalTabs/vertical-tab-headers.jsx     |  2 +-
 .../app/App/Components/Elements/tooltip.jsx   | 14 ++---
 .../Form/DatePicker/date-picker.jsx           | 12 ++--
 .../App/Components/Form/DropDown/dropdown.jsx |  6 +-
 .../Form/InputField/increment-buttons.jsx     | 15 ++---
 .../Form/TimePicker/time-picker.jsx           |  6 +-
 .../__tests__/toggle-fullscreen.spec.js       |  7 +--
 .../Footer/__tests__/toggle-positions.spec.js |  4 +-
 .../Footer/__tests__/toggle-settings.spec.js  |  7 +--
 .../Layout/Footer/toggle-fullscreen.jsx       |  5 +-
 .../Layout/Footer/toggle-positions.jsx        |  5 +-
 .../Layout/Footer/toggle-settings.jsx         |  5 +-
 .../Header/__tests__/account-info.spec.js     |  7 +--
 .../Components/Layout/Header/account-info.jsx |  6 +-
 .../Layout/Header/toggle-menu-drawer.jsx      |  5 +-
 .../Header/toggle-notifications-drawer.jsx    |  5 +-
 .../app/App/Constants/header-links.js         |  9 +--
 .../AccountSwitcher/account-switcher.jsx      | 24 ++++----
 .../app/App/Containers/Drawer/menu-drawer.jsx | 15 ++---
 src/javascript/app/App/Containers/Wip/wip.jsx | 16 +++---
 src/javascript/app/Assets/Common/index.js     |  1 -
 .../app/Assets/Contract/icon-end-time.jsx     |  8 +--
 .../app/Assets/Contract/icon-flag.jsx         |  4 +-
 .../app/Assets/Contract/icon-start-time.jsx   |  8 +--
 .../app/Assets/Contract/icon-tick.jsx         |  4 +-
 .../Categories/icon-trade-categories.jsx      | 57 +++++++++----------
 src/javascript/app/Assets/icon.jsx            | 36 ++++++------
 .../Components/InfoBox/info-box-expired.jsx   |  5 +-
 .../Components/InfoBox/info-box-longcode.jsx  |  6 +-
 .../last-digit-pointer.jsx                    | 11 ++--
 .../Contract/Components/contract-error.jsx    | 10 ++--
 .../Contract/Containers/contract-replay.jsx   |  5 +-
 .../Components/contract-type-cell.jsx         |  5 +-
 .../Components/empty-portfolio-message.jsx    |  8 +--
 .../Components/market-symbol-icon-row.jsx     |  4 +-
 .../Components/profit-loss-card-content.jsx   | 18 +++---
 .../Components/Markers/marker-line.jsx        | 14 ++---
 .../Components/Markers/marker-spot-label.jsx  | 16 +++---
 .../SmartChart/Components/chart-close-btn.jsx |  9 +--
 .../Components/empty-statement-message.jsx    | 15 +++--
 .../Statement/Components/statement-card.jsx   | 21 +++----
 .../Elements/full-screen-dialog.jsx           | 12 ++--
 .../Components/Elements/purchase-button.jsx   |  5 +-
 .../Form/ContractType/contract-type-item.jsx  |  7 +--
 .../ContractType/contract-type-widget.jsx     | 24 ++++----
 .../Form/Purchase/contract-info.jsx           |  4 +-
 .../TradeParams/Duration/duration-toggle.jsx  |  6 +-
 .../Components/Form/TradeParams/barrier.jsx   | 23 ++++----
 .../TradeTypeInfo/trade-type-info-item.jsx    | 31 +++++-----
 .../Stores/Modules/Contract/Constants/ui.js   |  9 ++-
 69 files changed, 343 insertions(+), 426 deletions(-)

diff --git a/src/javascript/app/App/Components/Elements/Calendar/calendar-footer.jsx b/src/javascript/app/App/Components/Elements/Calendar/calendar-footer.jsx
index 66a14454fbb6..9da6312f0b9b 100644
--- a/src/javascript/app/App/Components/Elements/Calendar/calendar-footer.jsx
+++ b/src/javascript/app/App/Components/Elements/Calendar/calendar-footer.jsx
@@ -1,9 +1,7 @@
-import PropTypes             from 'prop-types';
-import React                 from 'react';
-import {
-    Icon,
-    IconCalendarToday }      from 'Assets/Common';
-import { localize }          from '_common/localize';
+import PropTypes    from 'prop-types';
+import React        from 'react';
+import Icon         from 'Assets/icon.jsx';
+import { localize } from '_common/localize';
 
 const CalendarFooter = ({
     footer,
@@ -20,7 +18,7 @@ const CalendarFooter = ({
                 { has_range_selection && <span className='calendar__text'>{ `${!is_minimum ? localize('Duration: ') : ''}${duration_date}` }</span> }
                 { has_today_btn &&
                     <Icon
-                        icon={IconCalendarToday}
+                        icon='IconCalendarToday'
                         className='calendar__icon'
                         onClick={onClick}
                     />
diff --git a/src/javascript/app/App/Components/Elements/Calendar/calendar-header.jsx b/src/javascript/app/App/Components/Elements/Calendar/calendar-header.jsx
index 9fb5679d9623..f1431fa8cb4e 100644
--- a/src/javascript/app/App/Components/Elements/Calendar/calendar-header.jsx
+++ b/src/javascript/app/App/Components/Elements/Calendar/calendar-header.jsx
@@ -1,23 +1,18 @@
-import classNames           from 'classnames';
-import PropTypes            from 'prop-types';
-import React                from 'react';
-import {
-    Icon,
-    IconChevronDoubleLeft,
-    IconChevronDoubleRight,
-    IconChevronLeft,
-    IconChevronRight }      from 'Assets/Common';
-import { month_headers }    from 'Constants/date-time';
+import classNames        from 'classnames';
+import PropTypes         from 'prop-types';
+import React             from 'react';
+import Icon              from 'Assets/icon.jsx';
+import { month_headers } from 'Constants/date-time';
 import {
     addMonths,
     addYears,
     subMonths,
     subYears,
-    toMoment }              from 'Utils/Date';
-import CalendarButton       from './calendar-button.jsx';
+    toMoment }           from 'Utils/Date';
+import CalendarButton    from './calendar-button.jsx';
 import {
     getCentury,
-    getDecade }             from './helper';
+    getDecade }          from './helper';
 
 const CalendarHeader = ({
     calendar_date,
@@ -56,7 +51,7 @@ const CalendarHeader = ({
                 })}
                 onClick={is_prev_year_disabled ? undefined : () => navigateTo(subYears(calendar_date, num_of_years))}
             >
-                <Icon icon={IconChevronDoubleLeft} className='calendar__icon' />
+                <Icon icon='IconChevronDoubleLeft' className='calendar__icon' />
             </CalendarButton>
             <CalendarButton
                 className={classNames('calendar__nav calendar__nav--prev-month', {
@@ -65,7 +60,7 @@ const CalendarHeader = ({
                 is_hidden={!is_date_view}
                 onClick={is_prev_month_disabled ? undefined : () => navigateTo(subMonths(calendar_date, 1))}
             >
-                <Icon icon={IconChevronLeft} className='calendar__icon' />
+                <Icon icon='IconChevronLeft' className='calendar__icon' />
             </CalendarButton>
 
             <React.Fragment>
@@ -106,7 +101,7 @@ const CalendarHeader = ({
                 is_hidden={!is_date_view}
                 onClick={is_next_month_disabled ? undefined : () => navigateTo(addMonths(calendar_date, 1))}
             >
-                <Icon icon={IconChevronRight} className='calendar__icon' />
+                <Icon icon='IconChevronRight' className='calendar__icon' />
             </CalendarButton>
             <CalendarButton
                 className={classNames('calendar__nav calendar__nav--next-year', {
@@ -114,7 +109,7 @@ const CalendarHeader = ({
                 })}
                 onClick={is_next_year_disabled ? undefined : () => navigateTo(addYears(calendar_date, num_of_years))}
             >
-                <Icon icon={IconChevronDoubleRight} className='calendar__icon' />
+                <Icon icon='IconChevronDoubleRight' className='calendar__icon' />
             </CalendarButton>
         </div>
     );
diff --git a/src/javascript/app/App/Components/Elements/ContractAudit/contract-audit.jsx b/src/javascript/app/App/Components/Elements/ContractAudit/contract-audit.jsx
index 529c046f8e36..58543fb9f76b 100644
--- a/src/javascript/app/App/Components/Elements/ContractAudit/contract-audit.jsx
+++ b/src/javascript/app/App/Components/Elements/ContractAudit/contract-audit.jsx
@@ -1,9 +1,9 @@
-import classNames              from 'classnames';
-import moment                  from 'moment';
-import PropTypes               from 'prop-types';
-import React, { Component }    from 'react';
-import Localize                from 'App/Components/Elements/localize.jsx';
-import { Icon, IconArrowBold } from 'Assets/Common';
+import classNames           from 'classnames';
+import moment               from 'moment';
+import PropTypes            from 'prop-types';
+import React, { Component } from 'react';
+import Localize             from 'App/Components/Elements/localize.jsx';
+import Icon                 from 'Assets/icon.jsx';
 
 const Pair = ({ value, label }) => (
     <div className='pair'>
@@ -66,7 +66,7 @@ class ContractAudit extends Component {
                     onClick={this.toggleVisibility.bind(this)}
                 >
                     <Icon
-                        icon={IconArrowBold}
+                        icon='IconArrowBold'
                         className={classNames('contract-audit__arrow', {
                             'contract-audit__arrow--is-open': this.state.is_visible,
                         })}
diff --git a/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx b/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx
index dd32870ec9e2..fca8737d3c38 100644
--- a/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx
+++ b/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx
@@ -4,7 +4,7 @@ import React, { Component }  from 'react';
 import { withRouter }        from 'react-router';
 import { CSSTransition }     from 'react-transition-group';
 import { localize }          from '_common/localize';
-import { Icon, IconBack }    from 'Assets/Common';
+import Icon                  from 'Assets/icon.jsx';
 import Localize              from 'App/Components/Elements/localize.jsx';
 import { UnderlyingIcon }    from 'App/Components/Elements/underlying-icon.jsx';
 import Button                from 'App/Components/Form/button.jsx';
@@ -173,7 +173,7 @@ class ContractDrawer extends Component {
                     className='contract-drawer__heading'
                     onClick={() => this.props.history.goBack()}
                 >
-                    <Icon icon={IconBack} />
+                    <Icon icon='IconBack' />
                     <h2><Localize str={this.props.heading || 'Contract'} /></h2>
                 </div>
                 <div className='contract-drawer__body'>{body_content}</div>
diff --git a/src/javascript/app/App/Components/Elements/Drawer/drawer-header.jsx b/src/javascript/app/App/Components/Elements/Drawer/drawer-header.jsx
index f8eac6928df8..314c20ffd933 100644
--- a/src/javascript/app/App/Components/Elements/Drawer/drawer-header.jsx
+++ b/src/javascript/app/App/Components/Elements/Drawer/drawer-header.jsx
@@ -2,9 +2,7 @@ import classNames    from 'classnames';
 import PropTypes     from 'prop-types';
 import React         from 'react';
 import { localize }  from '_common/localize';
-import {
-    Icon,
-    IconClose }      from 'Assets/Common';
+import Icon          from 'Assets/icon.jsx';
 
 export const DrawerHeader = ({
     alignment,
@@ -16,7 +14,7 @@ export const DrawerHeader = ({
             {alignment && alignment === 'right' ?
                 <div className={drawer_header_class}>
                     <div className='drawer__icons drawer__icons-btn-close' onClick={closeBtn}>
-                        <Icon icon={IconClose} className='drawer__icons-icon-close' />
+                        <Icon icon='IconClose' className='drawer__icons-icon-close' />
                     </div>
                     <div className='drawer__notifications'>
                         <h4 className='drawer__notifications-header'>{localize('all notifications')}</h4>
@@ -25,7 +23,7 @@ export const DrawerHeader = ({
                 :
                 <div className={drawer_header_class}>
                     <div className='drawer__icons drawer__icons-btn-close' onClick={closeBtn}>
-                        <Icon icon={IconClose} className='drawer__icons-icon-close' />
+                        <Icon icon='IconClose' className='drawer__icons-icon-close' />
                     </div>
                     <div className='drawer__icons drawer__brand-logo'>
                         <div className='drawer__image' />
diff --git a/src/javascript/app/App/Components/Elements/NotificationMessage/notification.jsx b/src/javascript/app/App/Components/Elements/NotificationMessage/notification.jsx
index 73358420502b..7380f8291b79 100644
--- a/src/javascript/app/App/Components/Elements/NotificationMessage/notification.jsx
+++ b/src/javascript/app/App/Components/Elements/NotificationMessage/notification.jsx
@@ -1,15 +1,11 @@
-import PropTypes           from 'prop-types';
-import React               from 'react';
-import classNames          from 'classnames';
-import { Icon }            from 'Assets/Common';
-import { IconDanger }      from 'Assets/Common/icon-danger.jsx';
-import { IconInformation } from 'Assets/Common/icon-information.jsx';
-import { IconWarning }     from 'Assets/Common/icon-warning.jsx';
-import { IconSuccess }     from 'Assets/Common/icon-success.jsx';
-import CloseButton         from './close-button.jsx';
+import PropTypes   from 'prop-types';
+import React       from 'react';
+import classNames  from 'classnames';
+import Icon        from 'Assets/icon.jsx';
+import CloseButton from './close-button.jsx';
 import {
     default_delay,
-    types }                from './constants';
+    types }        from './constants';
 
 const Notification = ({
     data,
@@ -36,11 +32,11 @@ const Notification = ({
             })}
         >
             <div className='notification__icon'>
-                { data.type === 'danger'  && <Icon icon={IconDanger} className='notification__icon-type' /> }
+                { data.type === 'danger'  && <Icon icon='IconDanger' className='notification__icon-type' /> }
                 { (data.type === 'info' || data.type === 'contract_sold')
-                    && <Icon icon={IconInformation} className='notification__icon-type' /> }
-                { data.type === 'success' && <Icon icon={IconSuccess} className='notification__icon-type' /> }
-                { data.type === 'warning' && <Icon icon={IconWarning} className='notification__icon-type' /> }
+                    && <Icon icon='IconInformation' className='notification__icon-type' /> }
+                { data.type === 'success' && <Icon icon='IconSuccess' className='notification__icon-type' /> }
+                { data.type === 'warning' && <Icon icon='IconWarning' className='notification__icon-type' /> }
             </div>
             <div className='notification__text-container'>
                 <h4 className='notification__header'>{data.header}</h4>
diff --git a/src/javascript/app/App/Components/Elements/Notifications/__tests__/empty-notification.spec.js b/src/javascript/app/App/Components/Elements/Notifications/__tests__/empty-notification.spec.js
index ac98fe167ad4..ebaf5da1b00e 100644
--- a/src/javascript/app/App/Components/Elements/Notifications/__tests__/empty-notification.spec.js
+++ b/src/javascript/app/App/Components/Elements/Notifications/__tests__/empty-notification.spec.js
@@ -3,8 +3,7 @@ import { expect }             from 'chai';
 import { configure, shallow } from 'enzyme';
 import Adapter                from 'enzyme-adapter-react-16';
 import { EmptyNotification }  from '../empty-notification';
-import { Icon }               from 'Assets/Common/icon.jsx';
-import { IconBell }           from 'Assets/Header/NavBar';
+import Icon                   from 'Assets/icon.jsx';
 
 configure({ adapter: new Adapter() });
 
@@ -13,8 +12,8 @@ describe('Notifications', () => {
         const wrapper = shallow(<EmptyNotification />);
         expect(wrapper).to.have.length(1);
     });
-    it('should render Icon icon={IconBell}', () => {
+    it('should render Icon icon=\'IconBell\'', () => {
         const wrapper = shallow(<EmptyNotification />);
-        expect(wrapper.contains(<Icon icon={IconBell} className='drawer__bell-icon' />)).to.be.true;
+        expect(wrapper.contains(<Icon icon='IconBell' className='drawer__bell-icon' />)).to.be.true;
     });
 });
diff --git a/src/javascript/app/App/Components/Elements/Notifications/empty-notification.jsx b/src/javascript/app/App/Components/Elements/Notifications/empty-notification.jsx
index 78923d887bc9..757412fc6595 100644
--- a/src/javascript/app/App/Components/Elements/Notifications/empty-notification.jsx
+++ b/src/javascript/app/App/Components/Elements/Notifications/empty-notification.jsx
@@ -1,13 +1,12 @@
 import React        from 'react';
 import { localize } from '_common/localize';
-import { Icon }     from 'Assets/Common';
-import { IconBell } from 'Assets/Header/NavBar';
+import Icon         from 'Assets/icon.jsx';
 
 const EmptyNotification = () => (
     <div className='drawer__no-notifications-container'>
         <div className='drawer__no-notifications'>
             <div className='drawer__bell'>
-                <Icon icon={IconBell} className='drawer__bell-icon' />
+                <Icon icon='IconBell' className='drawer__bell-icon' />
             </div>
             <div>
                 <h4 className='drawer__no-notifications-header'>{localize('No Notifications')}</h4>
diff --git a/src/javascript/app/App/Components/Elements/Notifications/notification-bar.jsx b/src/javascript/app/App/Components/Elements/Notifications/notification-bar.jsx
index 522cf79cf740..24e98e543512 100644
--- a/src/javascript/app/App/Components/Elements/Notifications/notification-bar.jsx
+++ b/src/javascript/app/App/Components/Elements/Notifications/notification-bar.jsx
@@ -2,7 +2,7 @@ import classNames        from 'classnames';
 import PropTypes         from 'prop-types';
 import React             from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { IconClose }     from 'Assets/Common';
+import Icon              from 'Assets/icon.jsx';
 
 class NotificationBar extends React.Component {
     state = {};
@@ -63,7 +63,7 @@ class NotificationBar extends React.Component {
                             onClick={this.onClose.bind(this)}
                             className='notification-bar__button'
                         >
-                            <IconClose className='notification-bar__icon' />
+                            <Icon icon='IconClose' className='notification-bar__icon' />
                         </div>
                     }
                 </div>
diff --git a/src/javascript/app/App/Components/Elements/Popover/popover-bubble.jsx b/src/javascript/app/App/Components/Elements/Popover/popover-bubble.jsx
index 673de9d3178b..2c133d44ca11 100644
--- a/src/javascript/app/App/Components/Elements/Popover/popover-bubble.jsx
+++ b/src/javascript/app/App/Components/Elements/Popover/popover-bubble.jsx
@@ -3,8 +3,7 @@ import PropTypes            from 'prop-types';
 import React                from 'react';
 import ReactDOM             from 'react-dom';
 import posed, { PoseGroup } from 'react-pose';
-import { Icon }             from 'Assets/Common/icon.jsx';
-import { IconInfoBlue }     from 'Assets/Common/icon-info-blue.jsx';
+import Icon                 from 'Assets/icon.jsx';
 
 const FadeIn = posed.span({
     enter: {
@@ -79,7 +78,7 @@ class PopoverBubble extends React.PureComponent {
                     >
                         { icon === 'info' &&
                             <i className='popover__bubble__icon'>
-                                <Icon icon={IconInfoBlue} />
+                                <Icon icon='IconInfoBlue' />
                             </i>
                         }
 
diff --git a/src/javascript/app/App/Components/Elements/Popover/popover.jsx b/src/javascript/app/App/Components/Elements/Popover/popover.jsx
index b09e2683fe55..b5c516aeb4cd 100644
--- a/src/javascript/app/App/Components/Elements/Popover/popover.jsx
+++ b/src/javascript/app/App/Components/Elements/Popover/popover.jsx
@@ -1,11 +1,8 @@
-import classNames          from 'classnames';
-import PropTypes           from 'prop-types';
-import React               from 'react';
-import { Icon }            from 'Assets/Common/icon.jsx';
-import { IconInfoOutline } from 'Assets/Common/icon-info-outline.jsx';
-import { IconQuestion }    from 'Assets/Common/icon-question.jsx';
-import { IconRedDot }      from 'Assets/Common/icon-red-dot.jsx';
-import PopoverBubble       from './popover-bubble.jsx';
+import classNames    from 'classnames';
+import PropTypes     from 'prop-types';
+import React         from 'react';
+import Icon          from 'Assets/icon.jsx';
+import PopoverBubble from './popover-bubble.jsx';
 
 class Popover extends React.PureComponent {
     constructor(props) {
@@ -53,9 +50,9 @@ class Popover extends React.PureComponent {
             >
                 <div className={classNames(classNameTarget, 'popover__target')} ref={this.target_reference}>
                     <i className={message ? 'popover__target__icon' : 'popover__target__icon--disabled'}>
-                        {(icon === 'info')     && <Icon icon={IconInfoOutline} className={icon_class_name} /> }
-                        {(icon === 'question') && <Icon icon={IconQuestion}    className={icon_class_name} />}
-                        {(icon === 'dot')      && <Icon icon={IconRedDot}      className={icon_class_name} />}
+                        {(icon === 'info')     && <Icon icon='IconInfoOutline' className={icon_class_name} /> }
+                        {(icon === 'question') && <Icon icon='IconQuestion'    className={icon_class_name} />}
+                        {(icon === 'dot')      && <Icon icon='IconRedDot'      className={icon_class_name} />}
                     </i>
 
                     { children }
diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/contract-type-cell.jsx b/src/javascript/app/App/Components/Elements/PositionsDrawer/contract-type-cell.jsx
index ed215c1f550d..1599e9d036fa 100644
--- a/src/javascript/app/App/Components/Elements/PositionsDrawer/contract-type-cell.jsx
+++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/contract-type-cell.jsx
@@ -1,12 +1,12 @@
 import React                      from 'react';
 import PropTypes                  from 'prop-types';
 import { getContractTypeDisplay } from 'Constants/contract';
-import { IconTradeType }          from 'Assets/Trading/Types';
+import Icon                       from 'Assets/icon.jsx';
 
 const ContractTypeCell = ({ type }) => (
     <div className='contract-type'>
         <div className='contract-type__type-wrapper'>
-            <IconTradeType type={type.toLowerCase()} className='category-type' />
+            <Icon icon='IconTradeType' type={type.toLowerCase()} className='category-type' />
         </div>
         <span className='contract-type__type-label'>
             {getContractTypeDisplay(type) || ''}
diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx
index 3075caf10b59..5d1de482771d 100644
--- a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx
+++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx
@@ -5,7 +5,7 @@ import { CSSTransition }     from 'react-transition-group';
 import Money                 from 'App/Components/Elements/money.jsx';
 import ContractLink          from 'Modules/Contract/Containers/contract-link.jsx';
 import { localize }          from '_common/localize';
-import { IconPriceMove }     from 'Assets/Trading/icon-price-move.jsx';
+import Icon                  from 'Assets/icon.jsx';
 import Button                from 'App/Components/Form/button.jsx';
 import { UnderlyingIcon }    from 'App/Components/Elements/underlying-icon.jsx';
 import ContractTypeCell      from './contract-type-cell.jsx';
@@ -131,7 +131,8 @@ class PositionsDrawerCard extends React.PureComponent {
                                     },
                                 )}
                                 >
-                                    <IconPriceMove
+                                    <Icon
+                                        icon='IconPriceMove'
                                         type={(status !== 'complete') ? status : null}
                                     />
                                 </div>
@@ -144,7 +145,8 @@ class PositionsDrawerCard extends React.PureComponent {
                                     },
                                 )}
                                 >
-                                    <IconPriceMove
+                                    <Icon
+                                        icon='IconPriceMove'
                                         type={(status !== 'complete') ? status : null}
                                     />
                                 </div>
diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 2ac8a5f1c997..205cd7850fbb 100644
--- a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -6,9 +6,7 @@ import { NavLink }           from 'react-router-dom';
 import { CSSTransition }     from 'react-transition-group';
 import { Scrollbars }        from 'tt-react-custom-scrollbars';
 import { localize }          from '_common/localize';
-import {
-    Icon,
-    IconMinimize }           from 'Assets/Common';
+import Icon                  from 'Assets/icon.jsx';
 import routes                from 'Constants/routes';
 import EmptyPortfolioMessage from 'Modules/Portfolio/Components/empty-portfolio-message.jsx';
 import { connect }           from 'Stores/connect';
@@ -86,7 +84,7 @@ class PositionsDrawer extends React.Component {
                         className='positions-drawer__icon-close'
                         onClick={toggleDrawer}
                     >
-                        <Icon icon={IconMinimize} />
+                        <Icon icon='IconMinimize' />
                     </div>
                 </div>
                 <div className='positions-drawer__body'>
diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/result-details.jsx b/src/javascript/app/App/Components/Elements/PositionsDrawer/result-details.jsx
index c21a204cfa7e..d7bf3326c01e 100644
--- a/src/javascript/app/App/Components/Elements/PositionsDrawer/result-details.jsx
+++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/result-details.jsx
@@ -1,7 +1,7 @@
 import classNames        from 'classnames';
 import PropTypes         from 'prop-types';
 import React             from 'react';
-import { IconArrow }     from 'Assets/Common';
+import Icon              from 'Assets/icon.jsx';
 import { localize }      from '_common/localize';
 import {
     epochToMoment,
@@ -91,7 +91,7 @@ class ResultDetails extends React.PureComponent {
                     })}
                     onClick={this.toggleDetails}
                 >
-                    <IconArrow className='result-details__select-arrow' />
+                    <Icon icon='IconArrow' className='result-details__select-arrow' />
                 </div>
             </React.Fragment>
         );
diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/result-overlay.jsx b/src/javascript/app/App/Components/Elements/PositionsDrawer/result-overlay.jsx
index b487135efe10..00e6aae1f11f 100644
--- a/src/javascript/app/App/Components/Elements/PositionsDrawer/result-overlay.jsx
+++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/result-overlay.jsx
@@ -2,8 +2,7 @@ import classNames        from 'classnames';
 import PropTypes         from 'prop-types';
 import React             from 'react';
 import { CSSTransition } from 'react-transition-group';
-import IconCheck         from 'Images/app/portfolio/ic-check.svg';
-import IconCross         from 'Images/app/portfolio/ic-cross.svg';
+import Icon              from 'Assets/icon.jsx';
 import { localize }      from '_common/localize';
 
 const ResultOverlay = ({
@@ -46,12 +45,12 @@ const ResultOverlay = ({
                         (result === 'won') ?
                             <React.Fragment>
                                 {localize('won')}
-                                <IconCheck className='result__icon' />
+                                <Icon icon='IconCheck' className='result__icon' />
                             </React.Fragment>
                             :
                             <React.Fragment>
                                 {localize('lost')}
-                                <IconCross className='result__icon' />
+                                <Icon icon='IconCross' className='result__icon' />
                             </React.Fragment>
                     }
                 </span>
diff --git a/src/javascript/app/App/Components/Elements/SettingsDialog/language-dialog.jsx b/src/javascript/app/App/Components/Elements/SettingsDialog/language-dialog.jsx
index c01bf7807a65..fe59a7463b58 100644
--- a/src/javascript/app/App/Components/Elements/SettingsDialog/language-dialog.jsx
+++ b/src/javascript/app/App/Components/Elements/SettingsDialog/language-dialog.jsx
@@ -1,13 +1,13 @@
-import classNames          from 'classnames';
-import PropTypes           from 'prop-types';
-import React               from 'react';
-import Localize            from 'App/Components/Elements/localize.jsx';
-import { IconCountryFlag } from 'Assets/Common';
+import classNames        from 'classnames';
+import PropTypes         from 'prop-types';
+import React             from 'react';
+import Localize          from 'App/Components/Elements/localize.jsx';
+import Icon              from 'Assets/icon.jsx';
 import {
     getAllowedLanguages,
     getURL,
     currentLanguage,
-}                          from 'Utils/Language';
+}                        from 'Utils/Language';
 
 const isCurrentLanguage = (lang) => lang === currentLanguage;
 
@@ -22,7 +22,8 @@ const NonClickableLink = ({ children, lang }) => (
 
 const LanguageLink = ({ lang }) => (
     <React.Fragment>
-        <IconCountryFlag
+        <Icon
+            icon='IconCountryFlag'
             className={'settings-dialog__language-link-flag settings-dialog__language-flag'}
             type={lang.replace(/(\s|_)/, '-').toLowerCase()}
         />
diff --git a/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx b/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
index 234fc2ab2ca7..81468dad014c 100644
--- a/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
+++ b/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
@@ -1,23 +1,16 @@
-import classNames         from 'classnames';
-import PropTypes          from 'prop-types';
-import React              from 'react';
-import ReactDOM           from 'react-dom';
-import { localize }       from '_common/localize';
-import VerticalTab        from 'App/Components/Elements/VerticalTabs';
+import classNames        from 'classnames';
+import PropTypes         from 'prop-types';
+import React             from 'react';
+import ReactDOM          from 'react-dom';
+import { localize }      from '_common/localize';
+import VerticalTab       from 'App/Components/Elements/VerticalTabs';
 import {
     ChartSettings,
     LanguageSettings,
     ThemeSelectSettings,
     // PurchaseSettings,
-}                         from 'App/Containers/SettingsDialog';
-import { Icon }           from 'Assets/Common';
-import {
-    IconCharts,
-    IconClose,
-    IconLanguage,
-    // IconPurchase,
-    IconTheme,
-}                         from 'Assets/Settings';
+}                        from 'App/Containers/SettingsDialog';
+import Icon              from 'Assets/icon.jsx';
 
 class SettingsDialog extends React.PureComponent {
     constructor(props) {
@@ -58,7 +51,7 @@ class SettingsDialog extends React.PureComponent {
                     <h3 className='dialog-header__sidebar'>{localize('Platform settings')}</h3>
                     <div className='dialog-header__main'>
                         <div className='dialog-header__close' onClick={this.props.toggleDialog}>
-                            <Icon icon={IconClose} />
+                            <Icon icon='IconClose' />
                         </div>
                     </div>
                 </div>
@@ -78,15 +71,15 @@ class SettingsDialog extends React.PureComponent {
 
     settings_content = () => [
         {
-            icon : IconTheme,
+            icon : 'IconTheme',
             label: localize('Themes'),
             value: ThemeSelectSettings,
         }, {
-            icon : IconLanguage,
+            icon : 'IconLanguage',
             label: localize('Language'),
             value: LanguageSettings,
         }, {
-            icon : IconCharts,
+            icon : 'IconCharts',
             label: localize('Charts'),
             value: ChartSettings,
         // uncomment below lines to bring back purchase lock and purchase confirmation
diff --git a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-content-container.jsx b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-content-container.jsx
index e579472fcbb7..4c9773c17547 100644
--- a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-content-container.jsx
+++ b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-content-container.jsx
@@ -1,6 +1,6 @@
 import React                       from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { Icon }                    from 'Assets/Common';
+import Icon                        from 'Assets/icon.jsx';
 import routes                      from 'Constants/routes';
 
 class VerticalTabContentContainer extends React.PureComponent {
diff --git a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-headers.jsx b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-headers.jsx
index 3f1b1ab3c26b..69ae86aecdd5 100644
--- a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-headers.jsx
+++ b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-headers.jsx
@@ -1,7 +1,7 @@
 import classNames  from 'classnames';
 import React       from 'react';
 import { NavLink } from 'react-router-dom';
-import { Icon }    from 'Assets/Common';
+import Icon        from 'Assets/icon.jsx';
 
 class VerticalTabHeaders extends React.PureComponent {
     render() {
diff --git a/src/javascript/app/App/Components/Elements/tooltip.jsx b/src/javascript/app/App/Components/Elements/tooltip.jsx
index 060008f4a3f5..01a46befb94d 100644
--- a/src/javascript/app/App/Components/Elements/tooltip.jsx
+++ b/src/javascript/app/App/Components/Elements/tooltip.jsx
@@ -1,11 +1,7 @@
 import classNames          from 'classnames';
 import PropTypes           from 'prop-types';
 import React               from 'react';
-import { Icon }            from 'Assets/Common/icon.jsx';
-import { IconInfoBlue }    from 'Assets/Common/icon-info-blue.jsx';
-import { IconInfoOutline } from 'Assets/Common/icon-info-outline.jsx';
-import { IconQuestion }    from 'Assets/Common/icon-question.jsx';
-import { IconRedDot }      from 'Assets/Common/icon-red-dot.jsx';
+import Icon              from 'Assets/icon.jsx';
 
 class Tooltip extends React.PureComponent {
     state = {
@@ -41,21 +37,21 @@ class Tooltip extends React.PureComponent {
                 {icon === 'info' &&
                     <React.Fragment>
                         <Icon
-                            icon={IconInfoOutline}
+                            icon='IconInfoOutline'
                             className={icon_class}
                             onMouseEnter={this.onMouseEnter}
                             onMouseLeave={this.onMouseLeave}
                         />
                         <Icon
-                            icon={IconInfoBlue}
+                            icon='IconInfoBlue'
                             className={classNames(`${classNameIcon}-balloon-icon`, 'tooltip__balloon-icon', {
                                 'tooltip__balloon-icon--show': this.state.show_tooltip_balloon_icon,
                             })}
                         />
                     </React.Fragment>
                 }
-                {icon === 'question' && <Icon icon={IconQuestion} className={icon_class} />}
-                {icon === 'dot'      && <Icon icon={IconRedDot} className={icon_class} />}
+                {icon === 'question' && <Icon icon='IconQuestion' className={icon_class} />}
+                {icon === 'dot'      && <Icon icon='IconRedDot' className={icon_class} />}
                 {children}
             </span>
         );
diff --git a/src/javascript/app/App/Components/Form/DatePicker/date-picker.jsx b/src/javascript/app/App/Components/Form/DatePicker/date-picker.jsx
index ccd7ef40c6ee..4dee2ca254d6 100644
--- a/src/javascript/app/App/Components/Form/DatePicker/date-picker.jsx
+++ b/src/javascript/app/App/Components/Form/DatePicker/date-picker.jsx
@@ -3,11 +3,7 @@ import { observer }         from 'mobx-react';
 import PropTypes            from 'prop-types';
 import React                from 'react';
 import { CSSTransition }    from 'react-transition-group';
-import {
-    Icon,
-    IconArrow,
-    IconCalendar,
-    IconClear }             from 'Assets/Common';
+import Icon                 from 'Assets/icon.jsx';
 import InputField           from 'App/Components/Form/InputField';
 import {
     addDays,
@@ -225,7 +221,7 @@ class DatePicker extends React.Component {
                     />
                     <label className='datepicker__native-overlay' htmlFor={this.props.name}>
                         {this.state.value || this.props.placeholder}
-                        <Icon icon={IconArrow} className='datepicker__arrowhead' />
+                        <Icon icon='IconArrow' className='datepicker__arrowhead' />
                     </label>
                 </div>
             );
@@ -241,7 +237,7 @@ class DatePicker extends React.Component {
             >
                 { this.renderInputField() }
                 <Icon
-                    icon={IconCalendar}
+                    icon='IconCalendar'
                     className={classNames('datepicker__icon datepicker__icon--calendar', {
                         'datepicker__icon--is-hidden' : this.state.is_clear_btn_visible,
                         'datepicker__icon--with-label': this.props.label,
@@ -250,7 +246,7 @@ class DatePicker extends React.Component {
                 />
                 {this.props.is_clearable &&
                     <Icon
-                        icon={IconClear}
+                        icon='IconClear'
                         className={classNames('datepicker__icon datepicker__icon--clear', {
                             'datepicker__icon--is-hidden': !this.state.is_clear_btn_visible,
                         })}
diff --git a/src/javascript/app/App/Components/Form/DropDown/dropdown.jsx b/src/javascript/app/App/Components/Form/DropDown/dropdown.jsx
index 3f01b767e4b4..3e979fa05c17 100644
--- a/src/javascript/app/App/Components/Form/DropDown/dropdown.jsx
+++ b/src/javascript/app/App/Components/Form/DropDown/dropdown.jsx
@@ -5,9 +5,7 @@ import PropTypes         from 'prop-types';
 import React             from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Scrollbars }    from 'tt-react-custom-scrollbars';
-import {
-    Icon,
-    IconArrow }          from 'Assets/Common';
+import Icon              from 'Assets/icon.jsx';
 import Items             from './items.jsx';
 import NativeSelect      from './native-select.jsx';
 import {
@@ -172,7 +170,7 @@ class Dropdown extends React.Component {
                 </div>
                 {
                     !is_single_option && <Icon
-                        icon={IconArrow}
+                        icon='IconArrow'
                         className={classNames('dropdown__select-arrow', {
                             'dropdown__select-arrow--left': this.props.is_alignment_left,
                         })}
diff --git a/src/javascript/app/App/Components/Form/InputField/increment-buttons.jsx b/src/javascript/app/App/Components/Form/InputField/increment-buttons.jsx
index 1ad46e9fb97c..53fd466cde57 100644
--- a/src/javascript/app/App/Components/Form/InputField/increment-buttons.jsx
+++ b/src/javascript/app/App/Components/Form/InputField/increment-buttons.jsx
@@ -1,10 +1,7 @@
-import PropTypes                 from 'prop-types';
-import React                     from 'react';
-import {
-    Icon,
-    IconMinus,
-    IconPlus }                   from 'Assets/Common';
-import Button                    from '../button.jsx';
+import PropTypes from 'prop-types';
+import React     from 'react';
+import Icon      from 'Assets/icon.jsx';
+import Button    from '../button.jsx';
 
 const IncrementButtons = ({
     decrementValue,
@@ -19,7 +16,7 @@ const IncrementButtons = ({
             onClick={incrementValue}
             tabIndex='-1'
         >
-            <Icon icon={IconPlus} className={'input-wrapper__icon input-wrapper__icon--plus' } is_disabled={max_is_disabled} />
+            <Icon icon='IconPlus' className={'input-wrapper__icon input-wrapper__icon--plus' } is_disabled={max_is_disabled} />
         </Button>
         <Button
             className={'input-wrapper__button input-wrapper__button--decrement'}
@@ -27,7 +24,7 @@ const IncrementButtons = ({
             onClick={decrementValue}
             tabIndex='-1'
         >
-            <Icon icon={IconMinus} className={'input-wrapper__icon input-wrapper__icon--minus'} is_disabled={min_is_disabled} />
+            <Icon icon='IconMinus' className={'input-wrapper__icon input-wrapper__icon--minus'} is_disabled={min_is_disabled} />
         </Button>
     </React.Fragment>
 );
diff --git a/src/javascript/app/App/Components/Form/TimePicker/time-picker.jsx b/src/javascript/app/App/Components/Form/TimePicker/time-picker.jsx
index 0805c0f63738..303fcd4cbecb 100644
--- a/src/javascript/app/App/Components/Form/TimePicker/time-picker.jsx
+++ b/src/javascript/app/App/Components/Form/TimePicker/time-picker.jsx
@@ -3,9 +3,7 @@ import { observer }      from 'mobx-react';
 import PropTypes         from 'prop-types';
 import React             from 'react';
 import { CSSTransition } from 'react-transition-group';
-import {
-    Icon,
-    IconClock }          from 'Assets/Common';
+import Icon              from 'Assets/icon.jsx';
 import Dialog            from './dialog.jsx';
 import InputField        from '../InputField';
 
@@ -91,7 +89,7 @@ class TimePicker extends React.Component {
                                     name={name}
                                     placeholder={placeholder}
                                 />
-                                <Icon icon={IconClock} className={`${prefix_class}__icon`} />
+                                <Icon icon='IconClock' className={`${prefix_class}__icon`} />
                                 <CSSTransition
                                     in={ this.state.is_open }
                                     classNames={{
diff --git a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-fullscreen.spec.js b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-fullscreen.spec.js
index 2b4da2d60c3f..e511b8ca9ccb 100644
--- a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-fullscreen.spec.js
+++ b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-fullscreen.spec.js
@@ -4,8 +4,7 @@ import { spy, stub }                 from 'sinon';
 import { configure, shallow, mount } from 'enzyme';
 import Adapter                       from 'enzyme-adapter-react-16';
 import { ToggleFullScreen }          from '../toggle-fullscreen.jsx';
-import { Icon }                      from 'Assets/Common/icon.jsx';
-import { IconMaximize }              from 'Assets/Footer';
+import Icon                          from 'Assets/icon.jsx';
 
 configure({ adapter: new Adapter() });
 spy(ToggleFullScreen.prototype, 'componentDidMount');
@@ -32,9 +31,9 @@ describe('ToggleFullScreen', () => {
         wrapper.setState({ is_full_screen: true });
         expect(wrapper.find('.ic-fullscreen--active').exists()).to.be.true;
     });
-    it('should contain <Icon icon={IconMaximize} />', () => {
+    it('should contain <Icon icon=\'IconMaximize\' />', () => {
         const wrapper = shallow(<ToggleFullScreen />);
-        expect(wrapper.contains(<Icon icon={IconMaximize} className='footer__icon' />)).to.be.true;
+        expect(wrapper.contains(<Icon icon='IconMaximize' className='footer__icon' />)).to.be.true;
     });
     it('should have onclick property as an instance of a Function', () => {
         const wrapper = shallow(<ToggleFullScreen />);
diff --git a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
index 3ea9d1e6d6a7..190f0089cb2e 100644
--- a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
+++ b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
@@ -22,9 +22,9 @@ describe('TogglePositions', () => {
         const wrapper = shallow(<TogglePositions is_positions_drawer_on={false} />);
         expect(wrapper.find('.ic-positions--active').exists()).to.be.false;
     });
-    it('should contain <Icon icon={IconPositions} />', () => {
+    it('should contain <Icon icon=\'IconPositions\' />', () => {
         const wrapper = shallow(<TogglePositions />);
-        expect(wrapper.contains(<Icon icon={IconPositions} className='footer__icon ic-positions__icon' />)).to.be.true;
+        expect(wrapper.contains(<Icon icon='IconPositions' className='footer__icon ic-positions__icon' />)).to.be.true;
     });
     it('should call togglePositionsDrawer passed onClick', () => {
         const callback = fake();
diff --git a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-settings.spec.js b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-settings.spec.js
index 83ba3f4f5df8..542980228d04 100644
--- a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-settings.spec.js
+++ b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-settings.spec.js
@@ -3,8 +3,7 @@ import { expect }             from 'chai';
 import { configure, shallow } from 'enzyme';
 import Adapter                from 'enzyme-adapter-react-16';
 import { ToggleSettings }     from '../toggle-settings.jsx';
-import { Icon }               from 'Assets/Common/icon.jsx';
-import { IconSettings }       from 'Assets/Footer';
+import Icon                   from 'Assets/icon.jsx';
 import { SettingsDialog }     from '../../../Elements/SettingsDialog/settings-dialog.jsx';
 import { CSSTransition }      from 'react-transition-group';
 
@@ -20,9 +19,9 @@ describe('ToggleSettings', () => {
         const wrapper = shallow(<ToggleSettings is_settings_visible={false} />);
         expect(wrapper.find('.ic-settings--active').exists()).to.be.false;
     });
-    it('should contain <Icon icon={IconSettings} />', () => {
+    it('should contain <Icon icon=\'IconSettings\' />', () => {
         const wrapper = shallow(<ToggleSettings />);
-        expect(wrapper.contains(<Icon icon={IconSettings} className='footer__icon ic-settings__icon' />)).to.be.true;
+        expect(wrapper.contains(<Icon icon='IconSettings' className='footer__icon ic-settings__icon' />)).to.be.true;
     });
     it('should have CSSTransition', () => {
         const wrapper = shallow(<ToggleSettings is_settings_visible={true} />);
diff --git a/src/javascript/app/App/Components/Layout/Footer/toggle-fullscreen.jsx b/src/javascript/app/App/Components/Layout/Footer/toggle-fullscreen.jsx
index 3e24bbb6d4a6..19525df5d990 100644
--- a/src/javascript/app/App/Components/Layout/Footer/toggle-fullscreen.jsx
+++ b/src/javascript/app/App/Components/Layout/Footer/toggle-fullscreen.jsx
@@ -1,7 +1,6 @@
 import classNames       from 'classnames';
 import React            from 'react';
-import { Icon }         from 'Assets/Common';
-import { IconMaximize } from 'Assets/Footer';
+import Icon             from 'Assets/icon.jsx';
 
 class ToggleFullScreen extends React.Component {
     constructor(props) {
@@ -53,7 +52,7 @@ class ToggleFullScreen extends React.Component {
                 className={full_screen_icon_class}
                 onClick={this.toggleFullScreen}
             >
-                <Icon icon={IconMaximize} className='footer__icon' />
+                <Icon icon='IconMaximize' className='footer__icon' />
             </a>
         );
     }
diff --git a/src/javascript/app/App/Components/Layout/Footer/toggle-positions.jsx b/src/javascript/app/App/Components/Layout/Footer/toggle-positions.jsx
index 6f83171520e6..56db21d15130 100644
--- a/src/javascript/app/App/Components/Layout/Footer/toggle-positions.jsx
+++ b/src/javascript/app/App/Components/Layout/Footer/toggle-positions.jsx
@@ -1,8 +1,7 @@
 import classNames        from 'classnames';
 import PropTypes         from 'prop-types';
 import React             from 'react';
-import { Icon }          from 'Assets/Common';
-import { IconPositions } from 'Assets/Footer';
+import Icon              from 'Assets/icon.jsx';
 
 const TogglePositions = ({
     positions_count,
@@ -23,7 +22,7 @@ const TogglePositions = ({
             onClick={togglePositionsDrawer}
             data-count={positions_count}
         >
-            <Icon icon={IconPositions} className='footer__icon ic-positions__icon' />
+            <Icon icon='IconPositions' className='footer__icon ic-positions__icon' />
         </a>
     );
 };
diff --git a/src/javascript/app/App/Components/Layout/Footer/toggle-settings.jsx b/src/javascript/app/App/Components/Layout/Footer/toggle-settings.jsx
index 5f71f72c545c..02b812724d69 100644
--- a/src/javascript/app/App/Components/Layout/Footer/toggle-settings.jsx
+++ b/src/javascript/app/App/Components/Layout/Footer/toggle-settings.jsx
@@ -3,8 +3,7 @@ import PropTypes          from 'prop-types';
 import React              from 'react';
 import { CSSTransition }  from 'react-transition-group';
 import { SettingsDialog } from 'App/Components/Elements/SettingsDialog/settings-dialog.jsx';
-import { Icon }           from 'Assets/Common';
-import { IconSettings }   from 'Assets/Footer';
+import Icon               from 'Assets/icon.jsx';
 
 const ToggleSettings = ({
     hideFullBlur,
@@ -24,7 +23,7 @@ const ToggleSettings = ({
                 onClick={toggleSettings}
                 className={toggle_settings_class}
             >
-                <Icon icon={IconSettings} className='footer__icon ic-settings__icon' />
+                <Icon icon='IconSettings' className='footer__icon ic-settings__icon' />
             </a>
             <CSSTransition
                 in={is_settings_visible}
diff --git a/src/javascript/app/App/Components/Layout/Header/__tests__/account-info.spec.js b/src/javascript/app/App/Components/Layout/Header/__tests__/account-info.spec.js
index 8ce2ddaa4a58..fcab97d8f5bc 100644
--- a/src/javascript/app/App/Components/Layout/Header/__tests__/account-info.spec.js
+++ b/src/javascript/app/App/Components/Layout/Header/__tests__/account-info.spec.js
@@ -3,8 +3,7 @@ import { expect }             from 'chai';
 import { configure, shallow } from 'enzyme';
 import Adapter                from 'enzyme-adapter-react-16';
 import { AccountInfo }        from '../account-info.jsx';
-import { IconArrowBold }      from 'Assets/Common';
-import { Icon }               from 'Assets/Common/icon.jsx';
+import Icon                   from 'Assets/icon.jsx';
 import { AccountSwitcher }    from '../../../../Containers/AccountSwitcher';
 import { CSSTransition }      from 'react-transition-group';
 
@@ -35,9 +34,9 @@ describe('AccountInfo', () => {
         const wrapper = shallow(<AccountInfo loginid='12345' />);
         expect(wrapper.contains(<p className='acc-info__id' title='12345'>12345&nbsp;</p>)).to.be.true;
     });
-    it('should have <Icon icon={IconArrow} />', () => {
+    it('should have <Icon icon=\'IconArrow\' />', () => {
         const wrapper = shallow(<AccountInfo />);
-        expect(wrapper.contains(<Icon icon={IconArrowBold} className='acc-info__select-arrow' />)).to.be.true;
+        expect(wrapper.contains(<Icon icon='IconArrowBold' className='acc-info__select-arrow' />)).to.be.true;
     });
     it('should contain <CSSTransition /> and children', () => {
         const wrapper = shallow(<AccountInfo is_dialog_on={false}
diff --git a/src/javascript/app/App/Components/Layout/Header/account-info.jsx b/src/javascript/app/App/Components/Layout/Header/account-info.jsx
index 88d0259d447e..4ec9b6788a8e 100644
--- a/src/javascript/app/App/Components/Layout/Header/account-info.jsx
+++ b/src/javascript/app/App/Components/Layout/Header/account-info.jsx
@@ -3,9 +3,7 @@ import PropTypes           from 'prop-types';
 import React               from 'react';
 import { CSSTransition }   from 'react-transition-group';
 import { AccountSwitcher } from 'App/Containers/AccountSwitcher';
-import {
-    Icon,
-    IconArrowBold }        from 'Assets/Common';
+import Icon                from 'Assets/icon.jsx';
 
 // todo fix absolute path
 
@@ -42,7 +40,7 @@ const AccountInfo = ({
                     {balance}
                 </p>
             }
-            <Icon icon={IconArrowBold} className='acc-info__select-arrow' />
+            <Icon icon='IconArrowBold' className='acc-info__select-arrow' />
         </div>
         <CSSTransition
             in={is_dialog_on}
diff --git a/src/javascript/app/App/Components/Layout/Header/toggle-menu-drawer.jsx b/src/javascript/app/App/Components/Layout/Header/toggle-menu-drawer.jsx
index 0a66b3322aee..7a9fa4e274b7 100644
--- a/src/javascript/app/App/Components/Layout/Header/toggle-menu-drawer.jsx
+++ b/src/javascript/app/App/Components/Layout/Header/toggle-menu-drawer.jsx
@@ -1,13 +1,12 @@
 import React             from 'react';
-import { Icon }          from 'Assets/Common';
-import { IconHamburger } from 'Assets/Header/NavBar';
+import Icon              from 'Assets/icon.jsx';
 import { ToggleDrawer }  from '../../Elements/Drawer';
 import MenuDrawer        from '../../../Containers/Drawer/menu-drawer.jsx';
 
 const ToggleMenuDrawer = () => (
     <ToggleDrawer
         alignment='left'
-        icon={<Icon icon={IconHamburger} />}
+        icon={<Icon icon='IconHamburger' />}
         icon_class='header__menu-toggle'
     >
         <MenuDrawer />
diff --git a/src/javascript/app/App/Components/Layout/Header/toggle-notifications-drawer.jsx b/src/javascript/app/App/Components/Layout/Header/toggle-notifications-drawer.jsx
index 129f89f35eb1..0c85e64b60a6 100644
--- a/src/javascript/app/App/Components/Layout/Header/toggle-notifications-drawer.jsx
+++ b/src/javascript/app/App/Components/Layout/Header/toggle-notifications-drawer.jsx
@@ -1,13 +1,12 @@
 import React             from 'react';
-import { Icon }      from 'Assets/Common';
-import { IconBell }      from 'Assets/Header/NavBar';
+import Icon              from 'Assets/icon.jsx';
 import { ToggleDrawer }  from '../../Elements/Drawer';
 import { Notifications } from '../../Elements/Notifications';
 
 const ToggleNotificationsDrawer = () => (
     <ToggleDrawer
         alignment='right'
-        icon={<Icon icon={IconBell} />}
+        icon={<Icon icon='IconBell' />}
         icon_class='notify-toggle'
     >
         <Notifications />
diff --git a/src/javascript/app/App/Constants/header-links.js b/src/javascript/app/App/Constants/header-links.js
index 196f2bb9d3fa..fb1fe7079ace 100644
--- a/src/javascript/app/App/Constants/header-links.js
+++ b/src/javascript/app/App/Constants/header-links.js
@@ -1,19 +1,16 @@
 import React           from 'react';
 import { localize }    from '_common/localize';
-import { Icon }        from 'Assets/Common';
-import {
-    IconReports,
-    IconDeriv }        from 'Assets/Header/NavBar/index';
+import Icon            from 'Assets/icon.jsx';
 import { routes }      from 'Constants/index';
 
 const header_links = [
     {
         logo   : <div className='header__logo'>{localize('BETA')}</div>,
-        image  : <Icon icon={IconDeriv} className='header__icon' />,
+        image  : <Icon icon='IconDeriv' className='header__icon' />,
         link_to: routes.trade,
     },
     {
-        icon      : <Icon icon={IconReports} className='header__icon' />,
+        icon      : <Icon icon='IconReports' className='header__icon' />,
         text      : localize('Reports'),
         link_to   : routes.reports,
         login_only: true,
diff --git a/src/javascript/app/App/Containers/AccountSwitcher/account-switcher.jsx b/src/javascript/app/App/Containers/AccountSwitcher/account-switcher.jsx
index 43bba114378f..41c3ff96865c 100644
--- a/src/javascript/app/App/Containers/AccountSwitcher/account-switcher.jsx
+++ b/src/javascript/app/App/Containers/AccountSwitcher/account-switcher.jsx
@@ -1,14 +1,12 @@
-import classNames               from 'classnames';
-import PropTypes                from 'prop-types';
-import React                    from 'react';
-import { localize }             from '_common/localize';
-import { urlFor }               from '_common/url';
-import { isEmptyObject }        from '_common/utility';
-import { Icon }                 from 'Assets/Common/';
-import { IconAccountsCurrency } from 'Assets/Header/AccountsCurrency';
-import { IconLogout }           from 'Assets/Header/Drawer';
-import { requestLogout }        from 'Services/index';
-import { connect }              from 'Stores/connect';
+import classNames        from 'classnames';
+import PropTypes         from 'prop-types';
+import React             from 'react';
+import { localize }      from '_common/localize';
+import { urlFor }        from '_common/url';
+import { isEmptyObject } from '_common/utility';
+import Icon              from 'Assets/icon.jsx';
+import { requestLogout } from 'Services/index';
+import { connect }       from 'Stores/connect';
 
 class AccountSwitcher extends React.Component {
     setWrapperRef = (node) => {
@@ -88,7 +86,7 @@ class AccountSwitcher extends React.Component {
                                     >
                                         <span className={'acc-switcher__id'}>
                                             <Icon
-                                                icon={IconAccountsCurrency}
+                                                icon='IconAccountsCurrency'
                                                 className={`acc-switcher__id-icon acc-switcher__id-icon--${account.icon}`}
                                                 type={account.icon}
                                             />
@@ -131,7 +129,7 @@ class AccountSwitcher extends React.Component {
                 }
                 <div className='acc-switcher__logout' onClick={this.handleLogout}>
                     <span className='acc-switcher__logout-text'>{localize('Log out')}</span>
-                    <Icon icon={IconLogout} className='acc-switcher__logout-icon drawer__icon' />
+                    <Icon icon='IconLogout' className='acc-switcher__logout-icon drawer__icon' />
                 </div>
             </div>
         );
diff --git a/src/javascript/app/App/Containers/Drawer/menu-drawer.jsx b/src/javascript/app/App/Containers/Drawer/menu-drawer.jsx
index 8bedcb140a46..6002209064bc 100644
--- a/src/javascript/app/App/Containers/Drawer/menu-drawer.jsx
+++ b/src/javascript/app/App/Containers/Drawer/menu-drawer.jsx
@@ -4,12 +4,7 @@ import { localize }      from '_common/localize';
 import {
     DrawerItem,
     DrawerToggle }       from 'App/Components/Elements/Drawer';
-import { Icon }          from 'Assets/Common';
-import { IconLogout }    from 'Assets/Header/Drawer';
-import {
-    IconTrade,
-    IconPortfolio,
-    IconReports }        from 'Assets/Header/NavBar';
+import Icon              from 'Assets/icon.jsx';
 import routes            from 'Constants/routes';
 import { requestLogout } from 'Services';
 import { connect }       from 'Stores/connect';
@@ -32,17 +27,17 @@ const MenuDrawer = ({
             <React.Fragment>
                 <DrawerItem
                     text={localize('Trade')}
-                    icon={<Icon icon={IconTrade} className='drawer__icon' />}
+                    icon={<Icon icon='IconTrade' className='drawer__icon' />}
                     link_to={routes.trade}
                 />
                 <DrawerItem
                     text={localize('Portfolio')}
-                    icon={<Icon icon={IconPortfolio} className='drawer__icon' />}
+                    icon={<Icon icon='IconPortfolio' className='drawer__icon' />}
                     link_to={routes.portfolio}
                 />
                 <DrawerItem
                     text={localize('Statement')}
-                    icon={<Icon icon={IconReports} className='drawer__icon' />}
+                    icon={<Icon icon='IconReports' className='drawer__icon' />}
                     link_to={routes.statement}
                 />
                 <hr className='hr' />
@@ -68,7 +63,7 @@ const MenuDrawer = ({
         {!!(is_logged_in && is_mobile) &&
         <div className='drawer__footer'>
             <DrawerItem
-                icon={<Icon icon={IconLogout} className='drawer__icon' />}
+                icon={<Icon icon='IconLogout' className='drawer__icon' />}
                 text={localize('Logout')}
                 custom_action={() => {
                     if (is_positions_drawer_on) {
diff --git a/src/javascript/app/App/Containers/Wip/wip.jsx b/src/javascript/app/App/Containers/Wip/wip.jsx
index e9aec8bcdf51..f1225137383e 100644
--- a/src/javascript/app/App/Containers/Wip/wip.jsx
+++ b/src/javascript/app/App/Containers/Wip/wip.jsx
@@ -1,10 +1,10 @@
-import React          from 'react';
-import { localize }   from '_common/localize';
-import { urlFor }     from '_common/url';
-import Localize       from 'App/Components/Elements/localize.jsx';
-import Button         from 'App/Components/Form/button.jsx';
-import { IconWip }    from 'Assets/Common/icon-wip.jsx';
-import { connect }    from 'Stores/connect';
+import React        from 'react';
+import { localize } from '_common/localize';
+import { urlFor }   from '_common/url';
+import Localize     from 'App/Components/Elements/localize.jsx';
+import Button       from 'App/Components/Form/button.jsx';
+import Icon         from 'Assets/icon.jsx';
+import { connect }  from 'Stores/connect';
 
 const onClick = () => {
     window.location.href = window.open(urlFor('trading', undefined, undefined, true));
@@ -13,7 +13,7 @@ const onClick = () => {
 const Wip = (ui) => (
     <div className='work-in-progress'>
         <div className='work-in-progress__content'>
-            <IconWip theme={ui.is_dark_mode ? 'dark' : 'light'} />
+            <Icon icon='IconWip' theme={ui.is_dark_mode ? 'dark' : 'light'} />
             <div className='work-in-progress__header'>
                 <Localize str='Work in progress!' />
             </div>
diff --git a/src/javascript/app/Assets/Common/index.js b/src/javascript/app/Assets/Common/index.js
index 72088e449f18..c4d2a63867b9 100644
--- a/src/javascript/app/Assets/Common/index.js
+++ b/src/javascript/app/Assets/Common/index.js
@@ -24,4 +24,3 @@ export * from './icon-question.jsx';
 export * from './icon-red-dot.jsx';
 export * from './icon-success.jsx';
 export * from './icon-warning.jsx';
-export * from './icon.jsx';
diff --git a/src/javascript/app/Assets/Contract/icon-end-time.jsx b/src/javascript/app/Assets/Contract/icon-end-time.jsx
index 0f354c4678d1..8225e0d8cd06 100644
--- a/src/javascript/app/Assets/Contract/icon-end-time.jsx
+++ b/src/javascript/app/Assets/Contract/icon-end-time.jsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Icon } from 'Assets/Common/icon.jsx';
+import PropTypes    from 'prop-types';
+import React        from 'react';
+import Icon         from 'Assets/icon.jsx';
 
 export const IconEndTimeSVG = ({ className, classNamePath }) => (
     <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' className={className}>
@@ -16,7 +16,7 @@ export const IconEndTimeSVG = ({ className, classNamePath }) => (
     </svg>
 );
 
-const IconEndTime = () => <Icon icon={IconEndTimeSVG} />;
+const IconEndTime = () => <Icon icon='IconEndTimeSVG' />;
 
 IconEndTime.propTypes = {
     className    : PropTypes.string,
diff --git a/src/javascript/app/Assets/Contract/icon-flag.jsx b/src/javascript/app/Assets/Contract/icon-flag.jsx
index 185aa3e82e23..b4b696dc6abe 100644
--- a/src/javascript/app/Assets/Contract/icon-flag.jsx
+++ b/src/javascript/app/Assets/Contract/icon-flag.jsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import PropTypes    from 'prop-types';
 import React        from 'react';
-import { Icon }     from 'Assets/Common/icon.jsx';
+import Icon         from 'Assets/icon.jsx';
 
 export const IconFlagSVG = () => (
     <svg className='chart-spot__icon' width='16' height='16' viewBox='0 0 16 16'>
@@ -13,7 +13,7 @@ export const IconFlagSVG = () => (
 );
 
 const IconFlag = () => (
-    <Icon icon={IconFlagSVG} />
+    <Icon icon='IconFlagSVG' />
 );
 
 IconFlag.propTypes = {
diff --git a/src/javascript/app/Assets/Contract/icon-start-time.jsx b/src/javascript/app/Assets/Contract/icon-start-time.jsx
index b8ea56d768f2..01d9f1fd9305 100644
--- a/src/javascript/app/Assets/Contract/icon-start-time.jsx
+++ b/src/javascript/app/Assets/Contract/icon-start-time.jsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Icon } from 'Assets/Common/icon.jsx';
+import PropTypes    from 'prop-types';
+import React        from 'react';
+import Icon         from 'Assets/icon.jsx';
 
 export const IconStartTimeSVG = ({ className, classNamePath }) => (
     <svg className={className} xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
@@ -15,7 +15,7 @@ export const IconStartTimeSVG = ({ className, classNamePath }) => (
     </svg>
 );
 
-const IconStartTime = () => <Icon icon={IconStartTimeSVG} />;
+const IconStartTime = () => <Icon icon='IconStartTimeSVG' />;
 
 IconStartTime.propTypes = {
     className    : PropTypes.string,
diff --git a/src/javascript/app/Assets/Contract/icon-tick.jsx b/src/javascript/app/Assets/Contract/icon-tick.jsx
index 629d56e41dee..c3ae70c2ed3b 100644
--- a/src/javascript/app/Assets/Contract/icon-tick.jsx
+++ b/src/javascript/app/Assets/Contract/icon-tick.jsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import PropTypes    from 'prop-types';
 import React        from 'react';
-import { Icon }     from 'Assets/Common/icon.jsx';
+import Icon         from 'Assets/icon.jsx';
 
 export const IconTickSVG = () => (
     <svg width='16' height='16' viewBox='0 0 16 16'>
@@ -13,7 +13,7 @@ export const IconTickSVG = () => (
 );
 
 const IconTick = () => (
-    <Icon icon={IconTickSVG} />
+    <Icon icon='IconTickSVG' />
 );
 
 IconTick.propTypes = {
diff --git a/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx b/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
index 6c10d31ffbd3..93fcfe1ccdc3 100644
--- a/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
+++ b/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
@@ -1,8 +1,7 @@
-import classNames        from 'classnames';
-import PropTypes         from 'prop-types';
-import React             from 'react';
-import { Icon }          from 'Assets/Common/icon.jsx';
-import { IconTradeType } from '../Types';
+import classNames from 'classnames';
+import PropTypes  from 'prop-types';
+import React      from 'react';
+import Icon       from 'Assets/icon.jsx';
 
 const IconTradeCategory = ({ category, className }) => {
     let IconCategory;
@@ -13,14 +12,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='call'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='put'
                             />
@@ -33,14 +32,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='calle'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='pute'
                             />
@@ -53,14 +52,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='call_barrier'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='put_barrier'
                             />
@@ -73,14 +72,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='expirymiss'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='expiryrange'
                             />
@@ -93,14 +92,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='range'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='upordown'
                             />
@@ -113,14 +112,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='digitmatch'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='digitdiff'
                             />
@@ -133,14 +132,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='digiteven'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='digitodd'
                             />
@@ -153,14 +152,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='digitover'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='digitunder'
                             />
@@ -173,14 +172,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='onetouch'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='notouch'
                             />
@@ -193,14 +192,14 @@ const IconTradeCategory = ({ category, className }) => {
                     <React.Fragment>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='asianu'
                             />
                         </div>
                         <div className='category-wrapper'>
                             <Icon
-                                icon={IconTradeType}
+                                icon='IconTradeType'
                                 className='category-type'
                                 type='asiand'
                             />
@@ -212,7 +211,7 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <div className='category-wrapper'>
                         <Icon
-                            icon={IconTradeType}
+                            icon='IconTradeType'
                             className='category-type'
                             type='lbfloatcall'
                         />
@@ -223,7 +222,7 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <div className='category-wrapper'>
                         <Icon
-                            icon={IconTradeType}
+                            icon='IconTradeType'
                             className='category-type'
                             type='lbfloatput'
                         />
@@ -234,7 +233,7 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <div className='category-wrapper'>
                         <Icon
-                            icon={IconTradeType}
+                            icon='IconTradeType'
                             className='category-type'
                             type='lbhighlow'
                         />
@@ -245,7 +244,7 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <div className='category-wrapper'>
                         <Icon
-                            icon={IconTradeType}
+                            icon='IconTradeType'
                             className='category-type'
                             type='unknown'
                         />
diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
index d24632af3f03..f22cbcba84bf 100644
--- a/src/javascript/app/Assets/icon.jsx
+++ b/src/javascript/app/Assets/icon.jsx
@@ -35,11 +35,11 @@ class Icon extends React.PureComponent {
             IconWip               : React.lazy(() => import('./Common/icon-wip.jsx')),
             
             // Contract
-            IconContractClose: React.lazy(() => import('./Contract/icon-contract-close.jsx')),
-            IconEndTimeSVG   : React.lazy(() => import('./Contract/icon-end-time.jsx')),
-            IconFlagSVG      : React.lazy(() => import('./Contract/icon-flag.jsx')),
-            IconStartTimeSVG : React.lazy(() => import('./Contract/icon-start-time.jsx')),
-            IconTickSVG      : React.lazy(() => import('./Contract/icon-tick.jsx')),
+            // IconContractClose: React.lazy(() => import('./Contract/icon-contract-close.jsx')),
+            // IconEndTimeSVG   : React.lazy(() => import('./Contract/icon-end-time.jsx')),
+            // IconFlagSVG      : React.lazy(() => import('./Contract/icon-flag.jsx')),
+            // IconStartTimeSVG : React.lazy(() => import('./Contract/icon-start-time.jsx')),
+            // IconTickSVG      : React.lazy(() => import('./Contract/icon-tick.jsx')),
 
             // Footer
             IconMaximize : React.lazy(() => import('./Footer/icon-maximize.jsx')),
@@ -78,14 +78,14 @@ class Icon extends React.PureComponent {
             IconWithdrawal: React.lazy(() => import('./Statement')),
 
             // Trading
-            IconBarrierDown   : React.lazy(() => import('./Trading/Barriers')),
-            IconBarrierUp     : React.lazy(() => import('./Trading/Barriers')),
-            IconTradeCategory : React.lazy(() => import('./Trading/Categories')),
-            TradeCategoriesGIF: React.lazy(() => import('./Trading/Categories')),
-            TradeCategories   : React.lazy(() => import('./Trading/Categories')),
-            IconTradeType     : React.lazy(() => import('./Trading/Types')),
-            IconLock          : React.lazy(() => import('./Trading/icon-lock.jsx')),
-            IconPriceMove     : React.lazy(() => import('./Trading/icon-price-move.jsx')),
+            IconBarrierDown: React.lazy(() => import('./Trading/Barriers')),
+            IconBarrierUp  : React.lazy(() => import('./Trading/Barriers')),
+            // IconTradeCategory : React.lazy(() => import('./Trading/Categories')),
+            // TradeCategoriesGIF: React.lazy(() => import('./Trading/Categories')),
+            // TradeCategories   : React.lazy(() => import('./Trading/Categories')),
+            IconTradeType  : React.lazy(() => import('./Trading/Types')),
+            IconLock       : React.lazy(() => import('./Trading/icon-lock.jsx')),
+            IconPriceMove  : React.lazy(() => import('./Trading/icon-price-move.jsx')),
         };
     }
 
@@ -103,7 +103,11 @@ class Icon extends React.PureComponent {
         };
 
         const IconLazy = this.icons[this.props.icon] ? this.icons[this.props.icon] : <div />;
-        return <IconLazy {...options} />;
+        return (
+            <React.Suspense fallback={<div />}>
+                <IconLazy {...options} />
+            </React.Suspense>
+        );
     }
 }
 
@@ -112,10 +116,10 @@ Icon.propTypes = {
     className    : PropTypes.string,
     classNamePath: PropTypes.string,
     classNameRect: PropTypes.string,
-    icon         : PropTypes.func,
+    icon         : PropTypes.string,
     is_disabled  : PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
     onClick      : PropTypes.func,
     type         : PropTypes.string,
 };
 
-export { Icon };
+export default Icon;
diff --git a/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx b/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
index d6145e5903b5..d2207ad442c9 100644
--- a/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
+++ b/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
@@ -3,8 +3,7 @@ import PropTypes    from 'prop-types';
 import React        from 'react';
 import { localize } from '_common/localize';
 import Money        from 'App/Components/Elements/money.jsx';
-import Icon         from 'Assets/Common/icon.jsx';
-import IconFlag     from 'Assets/Contract/icon-flag.jsx';
+import Icon         from 'Assets/icon.jsx';
 import SellInfo     from '../Sell/sell-info.jsx';
 
 const InfoBoxExpired = ({
@@ -27,7 +26,7 @@ const InfoBoxExpired = ({
                 <SellInfo contract_info={contract_info} sell_info={sell_info} />
             }
             { has_flag &&
-                <Icon icon={IconFlag} />
+                <Icon icon='IconFlag' />
             }
             <div>
                 <div>{localize('Profit/Loss')}:</div>
diff --git a/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-longcode.jsx b/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-longcode.jsx
index 770ab2c48ec2..210daa74a431 100644
--- a/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-longcode.jsx
+++ b/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-longcode.jsx
@@ -1,15 +1,13 @@
 import { observer } from 'mobx-react';
 import PropTypes    from 'prop-types';
 import React        from 'react';
-import {
-    Icon,
-    IconFlag }      from 'Assets/Common';
+import Icon         from 'Assets/icon.jsx';
 
 const InfoBoxLongcode = ({
     contract_info,
 }) => (
     <div className='info-box-longcode'>
-        <Icon icon={IconFlag} className='info-box-longcode-icon' />
+        <Icon icon='IconFlag' className='info-box-longcode-icon' />
         <span className='info-box-longcode-text'>{contract_info.longcode}</span>
     </div>
 );
diff --git a/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-pointer.jsx b/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-pointer.jsx
index 182dc7296cfa..e332b6b69156 100644
--- a/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-pointer.jsx
+++ b/src/javascript/app/Modules/Contract/Components/LastDigitPrediction/last-digit-pointer.jsx
@@ -1,7 +1,7 @@
-import classNames        from 'classnames';
-import PropTypes         from 'prop-types';
-import React             from 'react';
-import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx';
+import classNames from 'classnames';
+import PropTypes  from 'prop-types';
+import React      from 'react';
+import Icon       from 'Assets/icon.jsx';
 
 const LastDigitPointer = ({
     is_lost,
@@ -12,7 +12,8 @@ const LastDigitPointer = ({
         className='digits__pointer'
         style={{ marginLeft: position }}
     >
-        <IconPriceMove
+        <Icon
+            icon='IconPriceMove'
             className={classNames('digits__icon', {
                 'digits__icon--win' : is_won,
                 'digits__icon--loss': is_lost,
diff --git a/src/javascript/app/Modules/Contract/Components/contract-error.jsx b/src/javascript/app/Modules/Contract/Components/contract-error.jsx
index c9fc32d667aa..cb6f2b34bf39 100644
--- a/src/javascript/app/Modules/Contract/Components/contract-error.jsx
+++ b/src/javascript/app/Modules/Contract/Components/contract-error.jsx
@@ -1,8 +1,6 @@
-import PropTypes     from 'prop-types';
-import React         from 'react';
-import {
-    Icon,
-    IconClose }      from 'Assets/Common';
+import PropTypes from 'prop-types';
+import React     from 'react';
+import Icon      from 'Assets/icon.jsx';
 
 // TODO: move to App/Components, Refactor svg, consider other types, more features;
 // when a general design and more icons for all messages is ready
@@ -21,7 +19,7 @@ const ContractError = ({
         </div>
         <div className='message-text'>{message}</div>
         <div className='message-close' onClick={onClickClose}>
-            <Icon icon={IconClose} />
+            <Icon icon='IconClose' />
         </div>
     </div>
 );
diff --git a/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx b/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
index adf55e076ea3..65bad9091806 100644
--- a/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
+++ b/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
@@ -7,8 +7,7 @@ import ChartLoader          from 'App/Components/Elements/chart-loader.jsx';
 import ContractDrawer       from 'App/Components/Elements/ContractDrawer';
 import NotificationMessages from 'App/Containers/notification-messages.jsx';
 import { connect }          from 'Stores/connect';
-import { Icon }             from 'Assets/Common';
-import { IconClose }        from 'Assets/Settings';
+import Icon                 from 'Assets/icon.jsx';
 import AppRoutes            from 'Constants/routes';
 import { localize }         from '_common/localize';
 import InfoBox              from './info-box.jsx';
@@ -53,7 +52,7 @@ class ContractReplay extends React.Component {
         const action_bar_items = [
             {
                 onClick: () => this.props.history.push(AppRoutes.trade),
-                icon   : IconClose,
+                icon   : 'IconClose',
                 title  : localize('Close'),
             },
         ];
diff --git a/src/javascript/app/Modules/Portfolio/Components/contract-type-cell.jsx b/src/javascript/app/Modules/Portfolio/Components/contract-type-cell.jsx
index 4a9921c1a52e..64cd6b5a7408 100644
--- a/src/javascript/app/Modules/Portfolio/Components/contract-type-cell.jsx
+++ b/src/javascript/app/Modules/Portfolio/Components/contract-type-cell.jsx
@@ -1,13 +1,12 @@
 import React                      from 'react';
 import PropTypes                  from 'prop-types';
 import { getContractTypeDisplay } from 'Constants/contract';
-import { Icon }                   from 'Assets/Common/icon.jsx';
-import { IconTradeType }          from 'Assets/Trading/Types';
+import Icon                       from 'Assets/icon.jsx';
 
 const ContractTypeCell = ({ type }) => (
     <div className='contract-type'>
         <div className='type-wrapper'>
-            <Icon icon={IconTradeType} type={type.toLowerCase()} className='type' />
+            <Icon icon='IconTradeType' type={type.toLowerCase()} className='type' />
         </div>
         <span>
             {type && getContractTypeDisplay(type) || ''}
diff --git a/src/javascript/app/Modules/Portfolio/Components/empty-portfolio-message.jsx b/src/javascript/app/Modules/Portfolio/Components/empty-portfolio-message.jsx
index 3a1c0d25fbcc..c4349746296c 100644
--- a/src/javascript/app/Modules/Portfolio/Components/empty-portfolio-message.jsx
+++ b/src/javascript/app/Modules/Portfolio/Components/empty-portfolio-message.jsx
@@ -1,11 +1,11 @@
-import React             from 'react';
-import { localize }      from '_common/localize';
-import { IconPositions } from 'Assets/Footer';
+import React        from 'react';
+import { localize } from '_common/localize';
+import Icon         from 'Assets/icon.jsx';
 
 const EmptyPortfolioMessage = () => (
     <div className='portfolio-empty'>
         <div className='portfolio-empty__wrapper'>
-            <IconPositions className='portfolio-empty__icon' />
+            <Icon icon='IconPositions' className='portfolio-empty__icon' />
             <span className='portfolio-empty__text'>{localize('No open positions')}</span>
         </div>
     </div>
diff --git a/src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx b/src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx
index 9e5ed7199b1b..a993ab394287 100644
--- a/src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx
+++ b/src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx
@@ -1,7 +1,7 @@
 import PropTypes          from 'prop-types';
 import React              from 'react';
 import { UnderlyingIcon } from 'App/Components/Elements/underlying-icon.jsx';
-import { IconTradeType }  from 'Assets/Trading/Types';
+import Icon               from 'Assets/icon.jsx';
 
 const getMarketInformation = (payload) => {
     const pattern = new RegExp('^([A-Z]+)_((OTC_[A-Z0-9]+)|R_[\\d]{2,3}|[A-Z]+)_'); // Used to get market name from shortcode
@@ -28,7 +28,7 @@ const MarketSymbolIconRow = ({ payload, show_description }) => {
                 </div>
 
                 <div className='market-symbol-icon-category'>
-                    <IconTradeType type={market_information.category} />
+                    <Icon icon='IconTradeType' type={market_information.category} />
                     {show_description && market_information.category}
                 </div>
             </div>
diff --git a/src/javascript/app/Modules/Reports/Components/profit-loss-card-content.jsx b/src/javascript/app/Modules/Reports/Components/profit-loss-card-content.jsx
index 0764c26efbdd..51771e0e4c67 100644
--- a/src/javascript/app/Modules/Reports/Components/profit-loss-card-content.jsx
+++ b/src/javascript/app/Modules/Reports/Components/profit-loss-card-content.jsx
@@ -1,9 +1,9 @@
-import classNames        from 'classnames';
-import PropTypes         from 'prop-types';
-import React             from 'react';
-import Localize          from 'App/Components/Elements/localize.jsx';
-import Money             from 'App/Components/Elements/money.jsx';
-import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx';
+import classNames from 'classnames';
+import PropTypes  from 'prop-types';
+import React      from 'react';
+import Localize   from 'App/Components/Elements/localize.jsx';
+import Money      from 'App/Components/Elements/money.jsx';
+import Icon       from 'Assets/icon.jsx';
 
 const ProfitLossCardContent = ({
     currency,
@@ -30,7 +30,8 @@ const ProfitLossCardContent = ({
                     },
                 )}
                 >
-                    <IconPriceMove
+                    <Icon
+                        icon='IconPriceMove'
                         type={(!is_sold) ? status : null}
                     />
                 </div>
@@ -48,7 +49,8 @@ const ProfitLossCardContent = ({
                     },
                 )}
                 >
-                    <IconPriceMove
+                    <Icon
+                        icon='IconPriceMove'
                         type={(!is_sold) ? status : null}
                     />
                 </div>
diff --git a/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx b/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
index 44eb283959e7..3a250648c4f0 100644
--- a/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
+++ b/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
@@ -1,10 +1,8 @@
 import classNames           from 'classnames';
-import { observer }         from 'mobx-react';
-import PropTypes            from 'prop-types';
-import React                from 'react';
-import { Icon }             from 'Assets/Common';
-import { IconEndTimeSVG }   from 'Assets/Contract/icon-end-time.jsx';
-import { IconStartTimeSVG } from 'Assets/Contract/icon-start-time.jsx';
+import { observer } from 'mobx-react';
+import PropTypes    from 'prop-types';
+import React        from 'react';
+import Icon         from 'Assets/Common';
 
 const MarkerLine = ({
     label,
@@ -18,7 +16,7 @@ const MarkerLine = ({
         <div className={classNames('chart-marker-line__wrapper', `chart-marker-line--${line_style}`)}>
             { label === marker_config.LINE_END.content_config.label &&
                 <Icon
-                    icon={IconEndTimeSVG}
+                    icon='IconEndTimeSVG'
                     className={classNames('chart-marker-line__icon', {
                         'chart-marker-line__icon--won' : status === 'won',
                         'chart-marker-line__icon--lost': status === 'lost',
@@ -27,7 +25,7 @@ const MarkerLine = ({
             }
             { label === marker_config.LINE_START.content_config.label &&
                 <Icon
-                    icon={IconStartTimeSVG}
+                    icon='IconStartTimeSVG'
                     className={classNames(
                         'chart-marker-line__icon',
                         'chart-marker-line__icon--time',
diff --git a/src/javascript/app/Modules/SmartChart/Components/Markers/marker-spot-label.jsx b/src/javascript/app/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
index 1a5301ef8d7d..33b6205538b4 100644
--- a/src/javascript/app/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
+++ b/src/javascript/app/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
@@ -1,11 +1,11 @@
 import classNames   from 'classnames';
-import { observer }  from 'mobx-react';
-import PropTypes     from 'prop-types';
-import React         from 'react';
-import { addComma }  from '_common/base/currency_base';
-import { toMoment }  from 'Utils/Date';
-import { IconClock } from 'Assets/Common/icon-clock.jsx';
-import MarkerSpot    from './marker-spot.jsx';
+import { observer } from 'mobx-react';
+import PropTypes    from 'prop-types';
+import React        from 'react';
+import { addComma } from '_common/base/currency_base';
+import { toMoment } from 'Utils/Date';
+import Icon         from 'Assets/icon.jsx';
+import MarkerSpot   from './marker-spot.jsx';
 
 class MarkerSpotLabel extends React.Component {
     constructor(props) {
@@ -39,7 +39,7 @@ class MarkerSpotLabel extends React.Component {
                     <div className='chart-spot-label__info-container'>
                         <div className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${this.props.align_label}`}>
                             <div className='chart-spot-label__time-container'>
-                                <IconClock height='10' width='10' className='chart-spot-label__time-icon' />
+                                <Icon icon='IconClock' height='10' width='10' className='chart-spot-label__time-icon' />
                                 <p className='chart-spot-label__time'>{toMoment(+this.props.spot_epoch).format('HH:mm:ss')}</p>
                             </div>
                             <div
diff --git a/src/javascript/app/Modules/SmartChart/Components/chart-close-btn.jsx b/src/javascript/app/Modules/SmartChart/Components/chart-close-btn.jsx
index 6942f3026121..45180bfde600 100644
--- a/src/javascript/app/Modules/SmartChart/Components/chart-close-btn.jsx
+++ b/src/javascript/app/Modules/SmartChart/Components/chart-close-btn.jsx
@@ -1,6 +1,6 @@
-import PropTypes       from 'prop-types';
-import React           from 'react';
-import IconContractClose from '../../../Assets/Contract/icon-contract-close.jsx';
+import PropTypes from 'prop-types';
+import React     from 'react';
+import Icon      from 'Assets/icon.jsx';
 
 const ChartCloseBtn = ({
     is_contract_mode,
@@ -12,7 +12,8 @@ const ChartCloseBtn = ({
             className='chart-close-btn'
             onClick={onClose}
         >
-            <IconContractClose
+            <Icon
+                icon='IconContractClose'
                 className='ic-chart-close'
             />
         </div>
diff --git a/src/javascript/app/Modules/Statement/Components/empty-statement-message.jsx b/src/javascript/app/Modules/Statement/Components/empty-statement-message.jsx
index 2b5af49b7385..2020dbc81729 100644
--- a/src/javascript/app/Modules/Statement/Components/empty-statement-message.jsx
+++ b/src/javascript/app/Modules/Statement/Components/empty-statement-message.jsx
@@ -1,15 +1,14 @@
-import PropTypes       from 'prop-types';
-import React           from 'react';
-import { localize }    from '_common/localize';
-import { Icon }        from 'Assets/Common';
-import { IconReports } from 'Assets/Header/NavBar';
-import { routes }      from 'Constants/index';
-import { ButtonLink }  from 'App/Components/Routes';
+import PropTypes      from 'prop-types';
+import React          from 'react';
+import { localize }   from '_common/localize';
+import Icon           from 'Assets/icon.jsx';
+import { routes }     from 'Constants/index';
+import { ButtonLink } from 'App/Components/Routes';
 
 const EmptyStatementMessage = ({ has_selected_date }) => (
     <React.Fragment>
         <div className='statement-empty'>
-            <Icon icon={IconReports} className='statement-empty__icon' />
+            <Icon icon='IconReports' className='statement-empty__icon' />
             <span className='statement-empty__text'>
                 {
                     !has_selected_date ?
diff --git a/src/javascript/app/Modules/Statement/Components/statement-card.jsx b/src/javascript/app/Modules/Statement/Components/statement-card.jsx
index cb718a4ba28d..95cb6bd681b9 100644
--- a/src/javascript/app/Modules/Statement/Components/statement-card.jsx
+++ b/src/javascript/app/Modules/Statement/Components/statement-card.jsx
@@ -2,14 +2,7 @@ import classNames          from 'classnames';
 import PropTypes           from 'prop-types';
 import React               from 'react';
 import { NavLink }         from 'react-router-dom';
-import { Icon }            from 'Assets/Common';
-import {
-    IconBuy,
-    IconDeposit,
-    IconSell,
-    IconPayout,
-    IconWallet,
-    IconWithdrawal }       from 'Assets/Statement';
+import Icon                from 'Assets/icon.jsx';
 import { getContractPath } from 'App/Components/Routes/helpers';
 
 const StatementCard = ({
@@ -37,22 +30,22 @@ const StatementCard = ({
                 <div className='statement-card__desc'>{desc}</div>
                 <div className='statement-card__row'>
                     <div className={`statement-card__cell statement-card__amount statement-card__amount--${action.toLowerCase()}`}>
-                        {icon === 'sell'        && <Icon icon={IconSell} className='statement-card__icon' />}
-                        {icon === 'buy'         && <Icon icon={IconBuy} className='statement-card__icon' />}
-                        {icon === 'deposit'     && <Icon icon={IconDeposit} className='statement-card__icon' />}
-                        {icon === 'withdrawal'  && <Icon icon={IconWithdrawal} className='statement-card__icon' />}
+                        {icon === 'sell'        && <Icon icon='IconSell'       className='statement-card__icon' />}
+                        {icon === 'buy'         && <Icon icon='IconBuy'        className='statement-card__icon' />}
+                        {icon === 'deposit'     && <Icon icon='IconDeposit'    className='statement-card__icon' />}
+                        {icon === 'withdrawal'  && <Icon icon='IconWithdrawal' className='statement-card__icon' />}
                         <span className='statement-card__cell-text'>
                             {amount}
                         </span>
                     </div>
                     <div className='statement-card__cell statement-card__payout'>
-                        <Icon icon={IconPayout} className='statement-card__icon' />
+                        <Icon icon='IconPayout' className='statement-card__icon' />
                         <span className='statement-card__cell-text'>
                             {payout}
                         </span>
                     </div>
                     <div className='statement-card__cell statement-card__balance'>
-                        <Icon icon={IconWallet} className='statement-card__icon' />
+                        <Icon icon='IconWallet' className='statement-card__icon' />
                         <span className='statement-card__cell-text'>
                             {balance}
                         </span>
diff --git a/src/javascript/app/Modules/Trading/Components/Elements/full-screen-dialog.jsx b/src/javascript/app/Modules/Trading/Components/Elements/full-screen-dialog.jsx
index 106927d80cc5..e6805aeb0e66 100644
--- a/src/javascript/app/Modules/Trading/Components/Elements/full-screen-dialog.jsx
+++ b/src/javascript/app/Modules/Trading/Components/Elements/full-screen-dialog.jsx
@@ -1,9 +1,7 @@
-import classNames    from 'classnames';
-import PropTypes     from 'prop-types';
-import React         from 'react';
-import {
-    Icon,
-    IconClose }      from 'Assets/Common';
+import classNames from 'classnames';
+import PropTypes  from 'prop-types';
+import React      from 'react';
+import Icon       from 'Assets/icon.jsx';
 
 const FullScreenDialog = (props) => {
     const { title, visible, children, wrapperClassName } = props;
@@ -57,7 +55,7 @@ const FullScreenDialog = (props) => {
                     className='icons btn-close fullscreen-dialog__close-btn'
                     onClick={props.onClose}
                 >
-                    <Icon icon={IconClose} className='fullscreen-dialog__close-btn-icon' />
+                    <Icon icon='IconClose' className='fullscreen-dialog__close-btn-icon' />
                 </div>
             </div>
             <div className='fullscreen-dialog__header-shadow-cover' />
diff --git a/src/javascript/app/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app/Modules/Trading/Components/Elements/purchase-button.jsx
index 0963a5e38f38..9c5a048f0a6b 100644
--- a/src/javascript/app/Modules/Trading/Components/Elements/purchase-button.jsx
+++ b/src/javascript/app/Modules/Trading/Components/Elements/purchase-button.jsx
@@ -3,7 +3,7 @@ import PropTypes                  from 'prop-types';
 import React                      from 'react';
 import { localize }               from '_common/localize';
 import Button                     from 'App/Components/Form/button.jsx';
-import { IconTradeType }          from 'Assets/Trading/Types';
+import Icon                       from 'Assets/icon.jsx';
 import { getContractTypeDisplay } from 'Constants/contract';
 
 const PurchaseButton = ({
@@ -38,7 +38,8 @@ const PurchaseButton = ({
             <React.Fragment>
                 <div className='btn-purchase__info btn-purchase__info--left'>
                     <div className='btn-purchase__icon_wrapper'>
-                        <IconTradeType
+                        <Icon
+                            icon='IconTradeType'
                             className='btn-purchase__icon'
                             type={getIconType()}
                         />
diff --git a/src/javascript/app/Modules/Trading/Components/Form/ContractType/contract-type-item.jsx b/src/javascript/app/Modules/Trading/Components/Form/ContractType/contract-type-item.jsx
index 8103773b29af..7060ed912f9c 100644
--- a/src/javascript/app/Modules/Trading/Components/Form/ContractType/contract-type-item.jsx
+++ b/src/javascript/app/Modules/Trading/Components/Form/ContractType/contract-type-item.jsx
@@ -2,8 +2,7 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import classNames                     from 'classnames';
 import PropTypes                      from 'prop-types';
 import React                          from 'react';
-import { Icon, IconInfoOutline }      from 'Assets/Common';
-import { IconTradeCategory }          from 'Assets/Trading/Categories';
+import Icon                           from 'Assets/icon.jsx';
 
 const ContractTypeItem = ({
     contracts,
@@ -24,12 +23,12 @@ const ContractTypeItem = ({
             value={contract.value}
             onClick={(e) => handleSelect(contract, e)}
         >
-            <Icon icon={IconTradeCategory} category={contract.value} className='contract-type-item__icon-wrapper' />
+            <Icon icon='IconTradeCategory' category={contract.value} className='contract-type-item__icon-wrapper' />
             <span className='contract-type-item__title'>
                 {contract.text}
             </span>
             <div id='info-icon' className='contract-type-item__icon' onClick={() => handleInfoClick(contract)}>
-                <Icon icon={IconInfoOutline} />
+                <Icon icon='IconInfoOutline' />
             </div>
         </div>
     ))
diff --git a/src/javascript/app/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx b/src/javascript/app/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx
index 36bc26f9aafd..fcc2927c53ce 100644
--- a/src/javascript/app/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx
+++ b/src/javascript/app/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx
@@ -1,12 +1,11 @@
-import classNames            from 'classnames';
-import PropTypes             from 'prop-types';
-import React                 from 'react';
-import { IconArrow }         from 'Assets/Common';
-import { IconTradeCategory } from 'Assets/Trading/Categories';
-import ContractTypeDialog    from './contract-type-dialog.jsx';
-import ContractTypeList      from './contract-type-list.jsx';
-import TradeTypeInfoDialog   from '../TradeTypeInfo/trade-type-info-dialog.jsx';
-import TradeTypeInfoItem     from '../TradeTypeInfo/trade-type-info-item.jsx';
+import classNames          from 'classnames';
+import PropTypes           from 'prop-types';
+import React               from 'react';
+import Icon                from 'Assets/icon.jsx';
+import ContractTypeDialog  from './contract-type-dialog.jsx';
+import ContractTypeList    from './contract-type-list.jsx';
+import TradeTypeInfoDialog from '../TradeTypeInfo/trade-type-info-dialog.jsx';
+import TradeTypeInfoItem   from '../TradeTypeInfo/trade-type-info-item.jsx';
 
 class ContractTypeWidget extends React.PureComponent {
     state = {
@@ -148,14 +147,17 @@ class ContractTypeWidget extends React.PureComponent {
                     })}
                     onClick={this.onWidgetClick}
                 >
-                    <IconTradeCategory
+                    <Icon
+                        icon='IconTradeCategory'
                         category={value}
                         className='contract-type-widget__icon-wrapper'
                     />
                     <span name={name} value={value}>
                         {this.getDisplayText()}
                     </span>
-                    <IconArrow className={classNames(
+                    <Icon
+                        icon='IconArrow'
+                        className={classNames(
                           'contract-type-widget__select-arrow',
                           'contract-type-widget__select-arrow--left')}
                     />
diff --git a/src/javascript/app/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index 2a46ff79a43e..1d1d59df0552 100644
--- a/src/javascript/app/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/src/javascript/app/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -5,7 +5,7 @@ import { getLocalizedBasis } from 'Stores/Modules/Trading/Constants/contract';
 import { localize }          from '_common/localize';
 import Money                 from 'App/Components/Elements/money.jsx';
 import { Popover }           from 'App/Components/Elements/Popover';
-import { IconPriceMove }     from 'Assets/Trading/icon-price-move.jsx';
+import Icon                  from 'Assets/icon.jsx';
 
 const ContractInfo = ({
     basis,
@@ -53,7 +53,7 @@ const ContractInfo = ({
                 {is_visible &&
                 <div className='trade-container__price-info-movement'>
                     {(!has_error_or_not_loaded && has_increased !== null) &&
-                        <IconPriceMove type={has_increased ? 'profit' : 'loss'} />
+                        <Icon icon='IconPriceMove' type={has_increased ? 'profit' : 'loss'} />
                     }
                 </div>
                 }
diff --git a/src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/duration-toggle.jsx b/src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/duration-toggle.jsx
index e8dbf59de830..25f6ea723288 100644
--- a/src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/duration-toggle.jsx
+++ b/src/javascript/app/Modules/Trading/Components/Form/TradeParams/Duration/duration-toggle.jsx
@@ -1,9 +1,7 @@
 import classNames          from 'classnames';
 import PropTypes           from 'prop-types';
 import React, { Fragment } from 'react';
-import {
-    Icon,
-    IconArrow }            from 'Assets/Common';
+import Icon                from 'Assets/icon.jsx';
 
 const DurationToggle = ({
     name,
@@ -21,7 +19,7 @@ const DurationToggle = ({
     return (
         <Fragment>
             <button className='advanced-simple-toggle' onClick={toggle}>
-                <Icon icon={IconArrow} className={icon_className} classNamePath={'advanced-simple-toggle__icon-path'} />
+                <Icon icon='IconArrow' className={icon_className} classNamePath={'advanced-simple-toggle__icon-path'} />
             </button>
         </Fragment>);
 };
diff --git a/src/javascript/app/Modules/Trading/Components/Form/TradeParams/barrier.jsx b/src/javascript/app/Modules/Trading/Components/Form/TradeParams/barrier.jsx
index 183e918d1af2..5dccdd972ced 100644
--- a/src/javascript/app/Modules/Trading/Components/Form/TradeParams/barrier.jsx
+++ b/src/javascript/app/Modules/Trading/Components/Form/TradeParams/barrier.jsx
@@ -1,14 +1,11 @@
-import classNames     from 'classnames';
-import PropTypes      from 'prop-types';
-import React          from 'react';
-import { Icon }       from 'Assets/Common/icon.jsx';
-import {
-    IconBarrierUp,
-    IconBarrierDown } from 'Assets/Trading/Barriers';
-import Fieldset       from 'App/Components/Form/fieldset.jsx';
-import InputField     from 'App/Components/Form/InputField';
-import { connect }    from 'Stores/connect';
-import { localize }   from '_common/localize';
+import classNames   from 'classnames';
+import PropTypes    from 'prop-types';
+import React        from 'react';
+import Icon         from 'Assets/icon.jsx';
+import Fieldset     from 'App/Components/Form/fieldset.jsx';
+import InputField   from 'App/Components/Form/InputField';
+import { connect }  from 'Stores/connect';
+import { localize } from '_common/localize';
 
 const Barrier = ({
     barrier_1,
@@ -70,8 +67,8 @@ const Barrier = ({
                             is_float
                             is_signed
                         />
-                        <Icon icon={IconBarrierUp} className='trade-container__barriers--up' />
-                        <Icon icon={IconBarrierDown} className='trade-container__barriers--down' />
+                        <Icon icon='IconBarrierUp'   className='trade-container__barriers--up' />
+                        <Icon icon='IconBarrierDown' className='trade-container__barriers--down' />
                     </React.Fragment>
                 }
             </div>
diff --git a/src/javascript/app/Modules/Trading/Components/Form/TradeTypeInfo/trade-type-info-item.jsx b/src/javascript/app/Modules/Trading/Components/Form/TradeTypeInfo/trade-type-info-item.jsx
index 21fb52a568f8..3d52a255da24 100644
--- a/src/javascript/app/Modules/Trading/Components/Form/TradeTypeInfo/trade-type-info-item.jsx
+++ b/src/javascript/app/Modules/Trading/Components/Form/TradeTypeInfo/trade-type-info-item.jsx
@@ -1,16 +1,10 @@
-import classNames           from 'classnames';
-import PropTypes            from 'prop-types';
-import React                from 'react';
-import { Scrollbars }       from 'tt-react-custom-scrollbars';
-import {
-    Icon,
-    IconBack }              from 'Assets/Common';
-import { IconChevronLeft }  from 'Assets/Common/icon-chevron-left.jsx';
-import { IconChevronRight } from 'Assets/Common/icon-chevron-right.jsx';
-import { TradeCategories,
-    TradeCategoriesGIF }    from 'Assets/Trading/Categories';
-import Button               from 'App/Components/Form/button.jsx';
-import { localize }         from '_common/localize';
+import classNames         from 'classnames';
+import PropTypes          from 'prop-types';
+import React              from 'react';
+import { Scrollbars }     from 'tt-react-custom-scrollbars';
+import Icon               from 'Assets/icon.jsx';
+import Button             from 'App/Components/Form/button.jsx';
+import { localize }       from '_common/localize';
 
 const TradeTypeInfoItem = ({
     handleNavigationClick,
@@ -28,7 +22,7 @@ const TradeTypeInfoItem = ({
         {!is_mobile &&
         <div className='trade-type-info-dialog__header'>
             <span onClick={() => onBackButtonClick()}>
-                <Icon icon={IconBack} />
+                <Icon icon='IconBack' />
             </span>
             <span className='title'>{item.text}</span>
         </div>
@@ -43,7 +37,8 @@ const TradeTypeInfoItem = ({
                     itemList.map((type, idx) => (
                         <div className='trade-type-info-dialog__card' key={idx}>
                             <div className='trade-type-info-dialog__gif'>
-                                <TradeCategoriesGIF
+                                <Icon
+                                    icon='TradeCategoriesGIF'
                                     category={type.value}
                                     className='trade-type-info-dialog__gif-image'
                                     is_dark={is_dark_theme}
@@ -54,7 +49,7 @@ const TradeTypeInfoItem = ({
                                     autoHide
                                     style={{ height: '100%' }}
                                 >
-                                    <TradeCategories category={type.value} />
+                                    <Icon icon='TradeCategories' category={type.value} />
                                 </Scrollbars>
                             </div>
                             <div>
@@ -71,7 +66,7 @@ const TradeTypeInfoItem = ({
         </div>
         <div className='trade-type-info-navigation'>
             <div className='trade-type-info-navigation__icon' onClick={() => handlePrevClick(itemList)} >
-                <Icon icon={IconChevronLeft} />
+                <Icon icon='IconChevronLeft' />
             </div>
             <div className='trade-type-info-navigation__list'>
                 <i
@@ -92,7 +87,7 @@ const TradeTypeInfoItem = ({
                 }
             </div>
             <div className='trade-type-info-navigation__icon' onClick={() => handleNextClick(itemList)} >
-                <Icon icon={IconChevronRight} />
+                <Icon icon='IconChevronRight' />
             </div>
         </div>
     </React.Fragment>
diff --git a/src/javascript/app/Stores/Modules/Contract/Constants/ui.js b/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
index db48a18b0c18..7a73118badf3 100644
--- a/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
+++ b/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
@@ -1,10 +1,9 @@
 import React        from 'react';
 import { localize } from '_common/localize';
-import IconFlag     from 'Assets/Contract/icon-flag.jsx';
-import IconTick     from 'Assets/Contract/icon-tick.jsx';
+import Icon         from 'Assets/icon.jsx';
 
 export const getHeaderConfig = () => ({
-    purchased: { title: localize('Contract Purchased'), icon: <IconTick /> },
-    won      : { title: localize('Contract Won'),       icon: <IconFlag /> },
-    lost     : { title: localize('Contract Lost'),      icon: <IconFlag /> },
+    purchased: { title: localize('Contract Purchased'), icon: <Icon icon='IconTick' /> },
+    won      : { title: localize('Contract Won'),       icon: <Icon icon='IconFlag' /> },
+    lost     : { title: localize('Contract Lost'),      icon: <Icon icon='IconFlag' /> },
 });

From 9c0ee5826038319ad1dde80d2c686b1975930d3d Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Mon, 3 Jun 2019 17:17:12 +0800
Subject: [PATCH 05/19] Common : all import is now default

---
 .../app/Assets/Common/icon-arrow-bold.jsx     |  2 +-
 .../app/Assets/Common/icon-arrow.jsx          |  2 +-
 .../app/Assets/Common/icon-back.jsx           |  2 +-
 .../app/Assets/Common/icon-calendar-today.jsx |  2 +-
 .../app/Assets/Common/icon-calendar.jsx       |  2 +-
 .../Common/icon-chevron-double-left.jsx       |  2 +-
 .../Common/icon-chevron-double-right.jsx      |  2 +-
 .../app/Assets/Common/icon-chevron-left.jsx   |  2 +-
 .../app/Assets/Common/icon-chevron-right.jsx  |  2 +-
 .../app/Assets/Common/icon-clear.jsx          |  2 +-
 .../app/Assets/Common/icon-clock.jsx          |  2 +-
 .../app/Assets/Common/icon-close.jsx          |  2 +-
 .../app/Assets/Common/icon-country-flag.jsx   |  2 +-
 .../app/Assets/Common/icon-danger.jsx         |  2 +-
 .../app/Assets/Common/icon-exclamation.jsx    |  2 +-
 .../app/Assets/Common/icon-flag.jsx           |  2 +-
 .../app/Assets/Common/icon-info-blue.jsx      |  2 +-
 .../app/Assets/Common/icon-info-outline.jsx   |  2 +-
 .../app/Assets/Common/icon-information.jsx    |  2 +-
 .../app/Assets/Common/icon-minimize.jsx       |  2 +-
 .../app/Assets/Common/icon-minus.jsx          |  2 +-
 .../app/Assets/Common/icon-plus.jsx           |  2 +-
 .../app/Assets/Common/icon-question.jsx       |  2 +-
 .../app/Assets/Common/icon-red-dot.jsx        |  2 +-
 .../app/Assets/Common/icon-success.jsx        |  2 +-
 .../app/Assets/Common/icon-warning.jsx        |  2 +-
 src/javascript/app/Assets/Common/icon-wip.jsx |  2 +-
 src/javascript/app/Assets/Common/index.js     | 26 -------------------
 .../Components/Markers/marker-line.jsx        |  2 +-
 29 files changed, 28 insertions(+), 54 deletions(-)
 delete mode 100644 src/javascript/app/Assets/Common/index.js

diff --git a/src/javascript/app/Assets/Common/icon-arrow-bold.jsx b/src/javascript/app/Assets/Common/icon-arrow-bold.jsx
index f45a213bd827..3b01d965d84a 100644
--- a/src/javascript/app/Assets/Common/icon-arrow-bold.jsx
+++ b/src/javascript/app/Assets/Common/icon-arrow-bold.jsx
@@ -19,4 +19,4 @@ IconArrowBold.propTypes = {
     classNamePath: PropTypes.string,
 };
 
-export { IconArrowBold };
+export default IconArrowBold;
diff --git a/src/javascript/app/Assets/Common/icon-arrow.jsx b/src/javascript/app/Assets/Common/icon-arrow.jsx
index 0c7261d16525..c438c72b6e32 100644
--- a/src/javascript/app/Assets/Common/icon-arrow.jsx
+++ b/src/javascript/app/Assets/Common/icon-arrow.jsx
@@ -18,4 +18,4 @@ IconArrow.propTypes = {
     classNamePath: PropTypes.string,
 };
 
-export { IconArrow };
+export default IconArrow;
diff --git a/src/javascript/app/Assets/Common/icon-back.jsx b/src/javascript/app/Assets/Common/icon-back.jsx
index 2c4a37b7b2f6..a35ac4e5c299 100644
--- a/src/javascript/app/Assets/Common/icon-back.jsx
+++ b/src/javascript/app/Assets/Common/icon-back.jsx
@@ -12,4 +12,4 @@ IconBack.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconBack };
+export default IconBack;
diff --git a/src/javascript/app/Assets/Common/icon-calendar-today.jsx b/src/javascript/app/Assets/Common/icon-calendar-today.jsx
index ff33327affee..23b464923e9c 100644
--- a/src/javascript/app/Assets/Common/icon-calendar-today.jsx
+++ b/src/javascript/app/Assets/Common/icon-calendar-today.jsx
@@ -19,4 +19,4 @@ IconCalendarToday.propTypes = {
     onClick      : PropTypes.func,
 };
 
-export { IconCalendarToday };
+export default IconCalendarToday;
diff --git a/src/javascript/app/Assets/Common/icon-calendar.jsx b/src/javascript/app/Assets/Common/icon-calendar.jsx
index 6c56debec16b..9c7a9371a8ca 100644
--- a/src/javascript/app/Assets/Common/icon-calendar.jsx
+++ b/src/javascript/app/Assets/Common/icon-calendar.jsx
@@ -19,4 +19,4 @@ IconCalendar.propTypes = {
     onClick  : PropTypes.func,
 };
 
-export { IconCalendar };
+export default IconCalendar;
diff --git a/src/javascript/app/Assets/Common/icon-chevron-double-left.jsx b/src/javascript/app/Assets/Common/icon-chevron-double-left.jsx
index 7354d80df6a7..d65b5f9e2040 100644
--- a/src/javascript/app/Assets/Common/icon-chevron-double-left.jsx
+++ b/src/javascript/app/Assets/Common/icon-chevron-double-left.jsx
@@ -13,4 +13,4 @@ IconChevronDoubleLeft.propTypes = {
     classNamePath: PropTypes.string,
 };
 
-export { IconChevronDoubleLeft };
+export default IconChevronDoubleLeft;
diff --git a/src/javascript/app/Assets/Common/icon-chevron-double-right.jsx b/src/javascript/app/Assets/Common/icon-chevron-double-right.jsx
index 3a14f544c7a7..6aabecacd484 100644
--- a/src/javascript/app/Assets/Common/icon-chevron-double-right.jsx
+++ b/src/javascript/app/Assets/Common/icon-chevron-double-right.jsx
@@ -13,4 +13,4 @@ IconChevronDoubleRight.propTypes = {
     classNamePath: PropTypes.string,
 };
 
-export { IconChevronDoubleRight };
+export default IconChevronDoubleRight;
diff --git a/src/javascript/app/Assets/Common/icon-chevron-left.jsx b/src/javascript/app/Assets/Common/icon-chevron-left.jsx
index b97295aaa746..16e0424aaaaa 100644
--- a/src/javascript/app/Assets/Common/icon-chevron-left.jsx
+++ b/src/javascript/app/Assets/Common/icon-chevron-left.jsx
@@ -13,4 +13,4 @@ IconChevronLeft.propTypes = {
     classNamePath: PropTypes.string,
 };
 
-export { IconChevronLeft };
+export default IconChevronLeft;
diff --git a/src/javascript/app/Assets/Common/icon-chevron-right.jsx b/src/javascript/app/Assets/Common/icon-chevron-right.jsx
index 5596d9614076..0744909b359a 100644
--- a/src/javascript/app/Assets/Common/icon-chevron-right.jsx
+++ b/src/javascript/app/Assets/Common/icon-chevron-right.jsx
@@ -13,4 +13,4 @@ IconChevronRight.propTypes = {
     classNamePath: PropTypes.string,
 };
 
-export { IconChevronRight };
+export default IconChevronRight;
diff --git a/src/javascript/app/Assets/Common/icon-clear.jsx b/src/javascript/app/Assets/Common/icon-clear.jsx
index 1780da64bed0..9ee73a7ef169 100644
--- a/src/javascript/app/Assets/Common/icon-clear.jsx
+++ b/src/javascript/app/Assets/Common/icon-clear.jsx
@@ -19,4 +19,4 @@ IconClear.propTypes = {
     onClick  : PropTypes.func,
 };
 
-export { IconClear };
+export default IconClear;
diff --git a/src/javascript/app/Assets/Common/icon-clock.jsx b/src/javascript/app/Assets/Common/icon-clock.jsx
index e7401ce30a6f..831083507b67 100644
--- a/src/javascript/app/Assets/Common/icon-clock.jsx
+++ b/src/javascript/app/Assets/Common/icon-clock.jsx
@@ -29,4 +29,4 @@ IconClock.propTypes = {
     width    : PropTypes.string,
 };
 
-export { IconClock };
+export default IconClock;
diff --git a/src/javascript/app/Assets/Common/icon-close.jsx b/src/javascript/app/Assets/Common/icon-close.jsx
index c920b1e107e9..67af520bd313 100644
--- a/src/javascript/app/Assets/Common/icon-close.jsx
+++ b/src/javascript/app/Assets/Common/icon-close.jsx
@@ -12,4 +12,4 @@ IconClose.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconClose };
+export default IconClose;
diff --git a/src/javascript/app/Assets/Common/icon-country-flag.jsx b/src/javascript/app/Assets/Common/icon-country-flag.jsx
index 87dde26119a0..5b3026ecb379 100644
--- a/src/javascript/app/Assets/Common/icon-country-flag.jsx
+++ b/src/javascript/app/Assets/Common/icon-country-flag.jsx
@@ -244,4 +244,4 @@ IconCountryFlag.propTypes = {
     type     : PropTypes.string,
 };
 
-export { IconCountryFlag };
+export default IconCountryFlag;
diff --git a/src/javascript/app/Assets/Common/icon-danger.jsx b/src/javascript/app/Assets/Common/icon-danger.jsx
index 3df37ba273d7..b3e55cb69597 100644
--- a/src/javascript/app/Assets/Common/icon-danger.jsx
+++ b/src/javascript/app/Assets/Common/icon-danger.jsx
@@ -9,4 +9,4 @@ const IconDanger = ({ className }) => (
     </svg>
 );
 
-export { IconDanger };
+export default IconDanger;
diff --git a/src/javascript/app/Assets/Common/icon-exclamation.jsx b/src/javascript/app/Assets/Common/icon-exclamation.jsx
index 0c9f5230ad07..cd108ec04d6f 100644
--- a/src/javascript/app/Assets/Common/icon-exclamation.jsx
+++ b/src/javascript/app/Assets/Common/icon-exclamation.jsx
@@ -16,4 +16,4 @@ IconExclamation.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconExclamation };
+export default IconExclamation;
diff --git a/src/javascript/app/Assets/Common/icon-flag.jsx b/src/javascript/app/Assets/Common/icon-flag.jsx
index 85f93b48bbbf..dc58631522de 100644
--- a/src/javascript/app/Assets/Common/icon-flag.jsx
+++ b/src/javascript/app/Assets/Common/icon-flag.jsx
@@ -15,4 +15,4 @@ IconFlag.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconFlag };
+export default IconFlag;
diff --git a/src/javascript/app/Assets/Common/icon-info-blue.jsx b/src/javascript/app/Assets/Common/icon-info-blue.jsx
index b4f0ea6836b9..2aa94c5e97dd 100644
--- a/src/javascript/app/Assets/Common/icon-info-blue.jsx
+++ b/src/javascript/app/Assets/Common/icon-info-blue.jsx
@@ -17,4 +17,4 @@ IconInfoBlue.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconInfoBlue };
+export default IconInfoBlue;
diff --git a/src/javascript/app/Assets/Common/icon-info-outline.jsx b/src/javascript/app/Assets/Common/icon-info-outline.jsx
index 10bd9ec8976b..2aeaab712331 100644
--- a/src/javascript/app/Assets/Common/icon-info-outline.jsx
+++ b/src/javascript/app/Assets/Common/icon-info-outline.jsx
@@ -20,4 +20,4 @@ IconInfoOutline.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconInfoOutline };
+export default IconInfoOutline;
diff --git a/src/javascript/app/Assets/Common/icon-information.jsx b/src/javascript/app/Assets/Common/icon-information.jsx
index f3053b477bdb..11bf20ec1faa 100644
--- a/src/javascript/app/Assets/Common/icon-information.jsx
+++ b/src/javascript/app/Assets/Common/icon-information.jsx
@@ -11,4 +11,4 @@ IconInformation.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconInformation };
+export default IconInformation;
diff --git a/src/javascript/app/Assets/Common/icon-minimize.jsx b/src/javascript/app/Assets/Common/icon-minimize.jsx
index 38db25004a85..09a047f65fd1 100644
--- a/src/javascript/app/Assets/Common/icon-minimize.jsx
+++ b/src/javascript/app/Assets/Common/icon-minimize.jsx
@@ -12,4 +12,4 @@ IconMinimize.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconMinimize };
+export default IconMinimize;
diff --git a/src/javascript/app/Assets/Common/icon-minus.jsx b/src/javascript/app/Assets/Common/icon-minus.jsx
index 0f03a2403fed..66d4f2f4863e 100644
--- a/src/javascript/app/Assets/Common/icon-minus.jsx
+++ b/src/javascript/app/Assets/Common/icon-minus.jsx
@@ -13,4 +13,4 @@ IconMinus.propTypes = {
     is_disabled: PropTypes.bool,
 };
 
-export { IconMinus };
+export default IconMinus;
diff --git a/src/javascript/app/Assets/Common/icon-plus.jsx b/src/javascript/app/Assets/Common/icon-plus.jsx
index ba1c7733fb9d..c1e2cd790730 100644
--- a/src/javascript/app/Assets/Common/icon-plus.jsx
+++ b/src/javascript/app/Assets/Common/icon-plus.jsx
@@ -14,4 +14,4 @@ IconPlus.propTypes = {
     is_disabled: PropTypes.bool,
 };
 
-export { IconPlus };
+export default IconPlus;
diff --git a/src/javascript/app/Assets/Common/icon-question.jsx b/src/javascript/app/Assets/Common/icon-question.jsx
index ede03e2037dc..cb8a55e59f4f 100644
--- a/src/javascript/app/Assets/Common/icon-question.jsx
+++ b/src/javascript/app/Assets/Common/icon-question.jsx
@@ -14,4 +14,4 @@ IconQuestion.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconQuestion };
+export default IconQuestion;
diff --git a/src/javascript/app/Assets/Common/icon-red-dot.jsx b/src/javascript/app/Assets/Common/icon-red-dot.jsx
index aab3af4a3041..6a7cc4059210 100644
--- a/src/javascript/app/Assets/Common/icon-red-dot.jsx
+++ b/src/javascript/app/Assets/Common/icon-red-dot.jsx
@@ -11,4 +11,4 @@ IconRedDot.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconRedDot };
+export default IconRedDot;
diff --git a/src/javascript/app/Assets/Common/icon-success.jsx b/src/javascript/app/Assets/Common/icon-success.jsx
index daf0b6cabf44..d508d65ca761 100644
--- a/src/javascript/app/Assets/Common/icon-success.jsx
+++ b/src/javascript/app/Assets/Common/icon-success.jsx
@@ -14,4 +14,4 @@ IconSuccess.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconSuccess };
+export default IconSuccess;
diff --git a/src/javascript/app/Assets/Common/icon-warning.jsx b/src/javascript/app/Assets/Common/icon-warning.jsx
index 8bcd67f9bc20..3ec9f9cfec0f 100644
--- a/src/javascript/app/Assets/Common/icon-warning.jsx
+++ b/src/javascript/app/Assets/Common/icon-warning.jsx
@@ -14,4 +14,4 @@ IconWarning.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconWarning };
+export default IconWarning;
diff --git a/src/javascript/app/Assets/Common/icon-wip.jsx b/src/javascript/app/Assets/Common/icon-wip.jsx
index 149ca19f2e7d..666afa63b2e5 100644
--- a/src/javascript/app/Assets/Common/icon-wip.jsx
+++ b/src/javascript/app/Assets/Common/icon-wip.jsx
@@ -45,4 +45,4 @@ IconWip.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconWip };
+export default IconWip;
diff --git a/src/javascript/app/Assets/Common/index.js b/src/javascript/app/Assets/Common/index.js
deleted file mode 100644
index c4d2a63867b9..000000000000
--- a/src/javascript/app/Assets/Common/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export * from './icon-arrow.jsx';
-export * from './icon-arrow-bold.jsx';
-export * from './icon-back.jsx';
-export * from './icon-calendar-today.jsx';
-export * from './icon-calendar.jsx';
-export * from './icon-chevron-double-left.jsx';
-export * from './icon-chevron-double-right.jsx';
-export * from './icon-chevron-left.jsx';
-export * from './icon-chevron-right.jsx';
-export * from './icon-country-flag.jsx';
-export * from './icon-clear.jsx';
-export * from './icon-clock.jsx';
-export * from './icon-close.jsx';
-export * from './icon-danger.jsx';
-export * from './icon-exclamation.jsx';
-export * from './icon-info-blue.jsx';
-export * from './icon-info-outline.jsx';
-export * from './icon-information.jsx';
-export * from './icon-flag.jsx';
-export * from './icon-minimize.jsx';
-export * from './icon-minus.jsx';
-export * from './icon-plus.jsx';
-export * from './icon-question.jsx';
-export * from './icon-red-dot.jsx';
-export * from './icon-success.jsx';
-export * from './icon-warning.jsx';
diff --git a/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx b/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
index 3a250648c4f0..71b5ae5a2326 100644
--- a/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
+++ b/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
@@ -2,7 +2,7 @@ import classNames           from 'classnames';
 import { observer } from 'mobx-react';
 import PropTypes    from 'prop-types';
 import React        from 'react';
-import Icon         from 'Assets/Common';
+import Icon         from 'Assets/icon.jsx';
 
 const MarkerLine = ({
     label,

From e5452d6b71d096fb049079df91b920245ea0de10 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Mon, 3 Jun 2019 17:53:32 +0800
Subject: [PATCH 06/19] improvement

---
 .../app/App/Constants/routes-config.js        | 10 ++--
 .../app/Assets/Footer/icon-maximize.jsx       |  2 +-
 .../app/Assets/Footer/icon-positions.jsx      |  2 +-
 .../app/Assets/Footer/icon-settings.jsx       |  2 +-
 src/javascript/app/Assets/Footer/index.js     |  3 --
 .../icon_accounts_currency.jsx                |  2 +-
 .../Assets/Header/AccountsCurrency/index.js   |  1 -
 .../app/Assets/Header/Drawer/icon-logout.jsx  |  2 +-
 .../app/Assets/Header/Drawer/index.js         |  1 -
 .../app/Assets/Header/NavBar/icon-bell.jsx    |  2 +-
 .../app/Assets/Header/NavBar/icon-cashier.jsx |  2 +-
 .../app/Assets/Header/NavBar/icon-deriv.jsx   |  2 +-
 .../Assets/Header/NavBar/icon-hamburger.jsx   |  2 +-
 .../Assets/Header/NavBar/icon-portfolio.jsx   |  2 +-
 .../app/Assets/Header/NavBar/icon-reports.jsx |  2 +-
 .../app/Assets/Header/NavBar/icon-trade.jsx   |  2 +-
 .../app/Assets/Header/NavBar/index.js         |  7 ---
 .../Assets/Reports/icon-open-positions.jsx    |  2 +-
 .../app/Assets/Reports/icon-profit-table.jsx  |  2 +-
 .../app/Assets/Reports/icon-statement.jsx     |  2 +-
 .../app/Assets/Settings/icon-charts.jsx       |  2 +-
 .../app/Assets/Settings/icon-close.jsx        |  2 +-
 .../app/Assets/Settings/icon-language.jsx     |  2 +-
 .../app/Assets/Settings/icon-purchase.jsx     |  2 +-
 .../app/Assets/Settings/icon-theme.jsx        |  2 +-
 src/javascript/app/Assets/Settings/index.js   |  5 --
 .../app/Assets/Statement/icon-buy.jsx         |  2 +-
 .../app/Assets/Statement/icon-deposit.jsx     |  2 +-
 .../app/Assets/Statement/icon-payout.jsx      |  2 +-
 .../app/Assets/Statement/icon-sell.jsx        |  2 +-
 .../app/Assets/Statement/icon-wallet.jsx      |  2 +-
 .../app/Assets/Statement/icon-withdrawal.jsx  |  2 +-
 src/javascript/app/Assets/Statement/index.js  |  6 ---
 .../Trading/Barriers/icon-barrier-down.jsx    |  2 +-
 .../Trading/Barriers/icon-barrier-up.jsx      |  2 +-
 .../app/Assets/Trading/Barriers/index.js      |  2 -
 .../Categories/icon-trade-categories.jsx      |  2 +-
 .../app/Assets/Trading/Categories/index.js    |  3 --
 .../Categories/trade-categories-gif.jsx       |  2 +-
 .../Trading/Categories/trade-categories.jsx   |  2 +-
 .../Assets/Trading/Types/icon-trade-types.jsx |  2 +-
 .../app/Assets/Trading/Types/index.js         |  1 -
 .../app/Assets/Trading/icon-lock.jsx          |  2 +-
 .../app/Assets/Trading/icon-price-move.jsx    |  2 +-
 src/javascript/app/Assets/icon.jsx            | 50 ++++++++++---------
 .../Modules/Reports/Containers/reports.jsx    |  4 +-
 46 files changed, 67 insertions(+), 94 deletions(-)
 delete mode 100644 src/javascript/app/Assets/Footer/index.js
 delete mode 100644 src/javascript/app/Assets/Header/AccountsCurrency/index.js
 delete mode 100644 src/javascript/app/Assets/Header/Drawer/index.js
 delete mode 100644 src/javascript/app/Assets/Header/NavBar/index.js
 delete mode 100644 src/javascript/app/Assets/Settings/index.js
 delete mode 100644 src/javascript/app/Assets/Statement/index.js
 delete mode 100644 src/javascript/app/Assets/Trading/Barriers/index.js
 delete mode 100644 src/javascript/app/Assets/Trading/Categories/index.js
 delete mode 100644 src/javascript/app/Assets/Trading/Types/index.js

diff --git a/src/javascript/app/App/Constants/routes-config.js b/src/javascript/app/App/Constants/routes-config.js
index 8da06b1abdc5..f3c00a1d47c5 100644
--- a/src/javascript/app/App/Constants/routes-config.js
+++ b/src/javascript/app/App/Constants/routes-config.js
@@ -3,12 +3,12 @@ import { Redirect }    from 'react-router-dom';
 import { localize }    from '_common/localize';
 import { routes }      from 'Constants';
 
-import { IconPortfolio }     from 'Assets/Header/NavBar';
+import IconPortfolio     from 'Assets/Header/NavBar/icon-portfolio.jsx';
+import IconProfitTable   from 'Assets/Reports/icon-profit-table.jsx';
+import IconOpenPositions from 'Assets/Reports/icon-open-positions.jsx';
+import IconStatement     from 'Assets/Reports/icon-statement.jsx';
 // import Statement       from 'Modules/Statement';
-import { IconProfitTable }   from 'Assets/Reports/icon-profit-table.jsx';
-import { IconOpenPositions } from 'Assets/Reports/icon-open-positions.jsx';
-import { IconStatement }     from 'Assets/Reports/icon-statement.jsx';
-import Trade                 from 'Modules/Trading';
+import Trade             from 'Modules/Trading';
 
 const ContractDetails = lazy(() => import(/* webpackChunkName: "contract" */  'Modules/Contract'));
 const Portfolio       = lazy(() => import(/* webpackChunkName: "portfolio" */ 'Modules/Portfolio'));
diff --git a/src/javascript/app/Assets/Footer/icon-maximize.jsx b/src/javascript/app/Assets/Footer/icon-maximize.jsx
index 2ff26156fb22..4c974081b47e 100644
--- a/src/javascript/app/Assets/Footer/icon-maximize.jsx
+++ b/src/javascript/app/Assets/Footer/icon-maximize.jsx
@@ -12,4 +12,4 @@ IconMaximize.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconMaximize };
+export default IconMaximize;
diff --git a/src/javascript/app/Assets/Footer/icon-positions.jsx b/src/javascript/app/Assets/Footer/icon-positions.jsx
index c0feb1a5cc9c..8cd08de8060f 100644
--- a/src/javascript/app/Assets/Footer/icon-positions.jsx
+++ b/src/javascript/app/Assets/Footer/icon-positions.jsx
@@ -21,4 +21,4 @@ IconPositions.propTypes = {
     type     : PropTypes.string,
 };
 
-export { IconPositions };
+export default IconPositions;
diff --git a/src/javascript/app/Assets/Footer/icon-settings.jsx b/src/javascript/app/Assets/Footer/icon-settings.jsx
index 2babc3ef909b..b1be6806082a 100644
--- a/src/javascript/app/Assets/Footer/icon-settings.jsx
+++ b/src/javascript/app/Assets/Footer/icon-settings.jsx
@@ -12,4 +12,4 @@ IconSettings.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconSettings };
+export default IconSettings;
diff --git a/src/javascript/app/Assets/Footer/index.js b/src/javascript/app/Assets/Footer/index.js
deleted file mode 100644
index 3ae293d7610b..000000000000
--- a/src/javascript/app/Assets/Footer/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './icon-maximize.jsx';
-export * from './icon-positions.jsx';
-export * from './icon-settings.jsx';
diff --git a/src/javascript/app/Assets/Header/AccountsCurrency/icon_accounts_currency.jsx b/src/javascript/app/Assets/Header/AccountsCurrency/icon_accounts_currency.jsx
index c3a0aac70602..3896461cc007 100644
--- a/src/javascript/app/Assets/Header/AccountsCurrency/icon_accounts_currency.jsx
+++ b/src/javascript/app/Assets/Header/AccountsCurrency/icon_accounts_currency.jsx
@@ -140,4 +140,4 @@ IconAccountsCurrency.propTypes = {
     type     : PropTypes.string,
 };
 
-export { IconAccountsCurrency };
+export default IconAccountsCurrency;
diff --git a/src/javascript/app/Assets/Header/AccountsCurrency/index.js b/src/javascript/app/Assets/Header/AccountsCurrency/index.js
deleted file mode 100644
index 60e3b17828f3..000000000000
--- a/src/javascript/app/Assets/Header/AccountsCurrency/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './icon_accounts_currency.jsx';
diff --git a/src/javascript/app/Assets/Header/Drawer/icon-logout.jsx b/src/javascript/app/Assets/Header/Drawer/icon-logout.jsx
index ec9d073a2624..85518dd9752a 100644
--- a/src/javascript/app/Assets/Header/Drawer/icon-logout.jsx
+++ b/src/javascript/app/Assets/Header/Drawer/icon-logout.jsx
@@ -18,4 +18,4 @@ IconLogout.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconLogout };
+export default IconLogout;
diff --git a/src/javascript/app/Assets/Header/Drawer/index.js b/src/javascript/app/Assets/Header/Drawer/index.js
deleted file mode 100644
index 6dfd9e903814..000000000000
--- a/src/javascript/app/Assets/Header/Drawer/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './icon-logout.jsx';
diff --git a/src/javascript/app/Assets/Header/NavBar/icon-bell.jsx b/src/javascript/app/Assets/Header/NavBar/icon-bell.jsx
index 8cd9d29c8752..c0c78352ae46 100644
--- a/src/javascript/app/Assets/Header/NavBar/icon-bell.jsx
+++ b/src/javascript/app/Assets/Header/NavBar/icon-bell.jsx
@@ -15,4 +15,4 @@ IconBell.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconBell };
+export default IconBell;
diff --git a/src/javascript/app/Assets/Header/NavBar/icon-cashier.jsx b/src/javascript/app/Assets/Header/NavBar/icon-cashier.jsx
index 524cc1fb8108..69b78afa55c7 100644
--- a/src/javascript/app/Assets/Header/NavBar/icon-cashier.jsx
+++ b/src/javascript/app/Assets/Header/NavBar/icon-cashier.jsx
@@ -28,4 +28,4 @@ IconCashier.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconCashier };
+export default IconCashier;
diff --git a/src/javascript/app/Assets/Header/NavBar/icon-deriv.jsx b/src/javascript/app/Assets/Header/NavBar/icon-deriv.jsx
index 9a421ebbfd89..ce02c3928f2c 100644
--- a/src/javascript/app/Assets/Header/NavBar/icon-deriv.jsx
+++ b/src/javascript/app/Assets/Header/NavBar/icon-deriv.jsx
@@ -17,4 +17,4 @@ IconDeriv.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconDeriv };
+export default IconDeriv;
diff --git a/src/javascript/app/Assets/Header/NavBar/icon-hamburger.jsx b/src/javascript/app/Assets/Header/NavBar/icon-hamburger.jsx
index 712114317e68..6ecb64905af9 100644
--- a/src/javascript/app/Assets/Header/NavBar/icon-hamburger.jsx
+++ b/src/javascript/app/Assets/Header/NavBar/icon-hamburger.jsx
@@ -12,4 +12,4 @@ IconHamburger.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconHamburger };
+export default IconHamburger;
diff --git a/src/javascript/app/Assets/Header/NavBar/icon-portfolio.jsx b/src/javascript/app/Assets/Header/NavBar/icon-portfolio.jsx
index ff10f00765ee..e5a20fe396fc 100644
--- a/src/javascript/app/Assets/Header/NavBar/icon-portfolio.jsx
+++ b/src/javascript/app/Assets/Header/NavBar/icon-portfolio.jsx
@@ -12,4 +12,4 @@ IconPortfolio.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconPortfolio };
+export default IconPortfolio;
diff --git a/src/javascript/app/Assets/Header/NavBar/icon-reports.jsx b/src/javascript/app/Assets/Header/NavBar/icon-reports.jsx
index d0cbc299342e..d95f12c24bc6 100644
--- a/src/javascript/app/Assets/Header/NavBar/icon-reports.jsx
+++ b/src/javascript/app/Assets/Header/NavBar/icon-reports.jsx
@@ -17,4 +17,4 @@ IconReports.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconReports };
+export default IconReports;
diff --git a/src/javascript/app/Assets/Header/NavBar/icon-trade.jsx b/src/javascript/app/Assets/Header/NavBar/icon-trade.jsx
index 109a54ac3a83..7d4abd7fdc84 100644
--- a/src/javascript/app/Assets/Header/NavBar/icon-trade.jsx
+++ b/src/javascript/app/Assets/Header/NavBar/icon-trade.jsx
@@ -14,4 +14,4 @@ IconTrade.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconTrade };
+export default IconTrade;
diff --git a/src/javascript/app/Assets/Header/NavBar/index.js b/src/javascript/app/Assets/Header/NavBar/index.js
deleted file mode 100644
index add56737210d..000000000000
--- a/src/javascript/app/Assets/Header/NavBar/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './icon-bell.jsx';
-export * from './icon-cashier.jsx';
-export * from './icon-deriv.jsx';
-export * from './icon-hamburger.jsx';
-export * from './icon-portfolio.jsx';
-export * from './icon-reports.jsx';
-export * from './icon-trade.jsx';
diff --git a/src/javascript/app/Assets/Reports/icon-open-positions.jsx b/src/javascript/app/Assets/Reports/icon-open-positions.jsx
index b5bc1fa60b68..7c55787f09d1 100644
--- a/src/javascript/app/Assets/Reports/icon-open-positions.jsx
+++ b/src/javascript/app/Assets/Reports/icon-open-positions.jsx
@@ -12,4 +12,4 @@ IconOpenPositions.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconOpenPositions };
+export default IconOpenPositions;
diff --git a/src/javascript/app/Assets/Reports/icon-profit-table.jsx b/src/javascript/app/Assets/Reports/icon-profit-table.jsx
index 16833c0dfd66..3b7ae6d0ad71 100644
--- a/src/javascript/app/Assets/Reports/icon-profit-table.jsx
+++ b/src/javascript/app/Assets/Reports/icon-profit-table.jsx
@@ -12,4 +12,4 @@ IconProfitTable.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconProfitTable };
+export default IconProfitTable;
diff --git a/src/javascript/app/Assets/Reports/icon-statement.jsx b/src/javascript/app/Assets/Reports/icon-statement.jsx
index 70f8433a5cce..5562f1ef4655 100644
--- a/src/javascript/app/Assets/Reports/icon-statement.jsx
+++ b/src/javascript/app/Assets/Reports/icon-statement.jsx
@@ -12,4 +12,4 @@ IconStatement.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconStatement };
+export default IconStatement;
diff --git a/src/javascript/app/Assets/Settings/icon-charts.jsx b/src/javascript/app/Assets/Settings/icon-charts.jsx
index be902ba45f83..fd6625b10585 100644
--- a/src/javascript/app/Assets/Settings/icon-charts.jsx
+++ b/src/javascript/app/Assets/Settings/icon-charts.jsx
@@ -19,4 +19,4 @@ IconCharts.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconCharts };
+export default IconCharts;
diff --git a/src/javascript/app/Assets/Settings/icon-close.jsx b/src/javascript/app/Assets/Settings/icon-close.jsx
index 08378ac3d43e..73904969290d 100644
--- a/src/javascript/app/Assets/Settings/icon-close.jsx
+++ b/src/javascript/app/Assets/Settings/icon-close.jsx
@@ -23,4 +23,4 @@ IconClose.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconClose };
+export default IconClose;
diff --git a/src/javascript/app/Assets/Settings/icon-language.jsx b/src/javascript/app/Assets/Settings/icon-language.jsx
index 3dcc1bbc5a9a..42e66f5c01e0 100644
--- a/src/javascript/app/Assets/Settings/icon-language.jsx
+++ b/src/javascript/app/Assets/Settings/icon-language.jsx
@@ -24,4 +24,4 @@ IconLanguage.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconLanguage };
+export default IconLanguage;
diff --git a/src/javascript/app/Assets/Settings/icon-purchase.jsx b/src/javascript/app/Assets/Settings/icon-purchase.jsx
index 214b881e2cf7..694ee82d7045 100644
--- a/src/javascript/app/Assets/Settings/icon-purchase.jsx
+++ b/src/javascript/app/Assets/Settings/icon-purchase.jsx
@@ -24,4 +24,4 @@ IconPurchase.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconPurchase };
+export default IconPurchase;
diff --git a/src/javascript/app/Assets/Settings/icon-theme.jsx b/src/javascript/app/Assets/Settings/icon-theme.jsx
index 1601d5202bb1..ee4b0111e6b0 100644
--- a/src/javascript/app/Assets/Settings/icon-theme.jsx
+++ b/src/javascript/app/Assets/Settings/icon-theme.jsx
@@ -24,4 +24,4 @@ IconTheme.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconTheme };
+export default IconTheme;
diff --git a/src/javascript/app/Assets/Settings/index.js b/src/javascript/app/Assets/Settings/index.js
deleted file mode 100644
index ba3ddeb1bb7b..000000000000
--- a/src/javascript/app/Assets/Settings/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './icon-charts.jsx';
-export * from './icon-close.jsx';
-export * from './icon-language.jsx';
-export * from './icon-purchase.jsx';
-export * from './icon-theme.jsx';
diff --git a/src/javascript/app/Assets/Statement/icon-buy.jsx b/src/javascript/app/Assets/Statement/icon-buy.jsx
index a5894f77c416..6ab31f85793a 100644
--- a/src/javascript/app/Assets/Statement/icon-buy.jsx
+++ b/src/javascript/app/Assets/Statement/icon-buy.jsx
@@ -14,4 +14,4 @@ IconBuy.propTypes = {
     onClick      : PropTypes.func,
 };
 
-export { IconBuy };
+export default IconBuy;
diff --git a/src/javascript/app/Assets/Statement/icon-deposit.jsx b/src/javascript/app/Assets/Statement/icon-deposit.jsx
index 29cf41064d50..d3233829b9f5 100644
--- a/src/javascript/app/Assets/Statement/icon-deposit.jsx
+++ b/src/javascript/app/Assets/Statement/icon-deposit.jsx
@@ -14,4 +14,4 @@ IconDeposit.propTypes = {
     onClick      : PropTypes.func,
 };
 
-export { IconDeposit };
+export default IconDeposit;
diff --git a/src/javascript/app/Assets/Statement/icon-payout.jsx b/src/javascript/app/Assets/Statement/icon-payout.jsx
index fe304344968b..277cb0845682 100644
--- a/src/javascript/app/Assets/Statement/icon-payout.jsx
+++ b/src/javascript/app/Assets/Statement/icon-payout.jsx
@@ -14,4 +14,4 @@ IconPayout.propTypes = {
     onClick      : PropTypes.func,
 };
 
-export { IconPayout };
+export default IconPayout;
diff --git a/src/javascript/app/Assets/Statement/icon-sell.jsx b/src/javascript/app/Assets/Statement/icon-sell.jsx
index 68be609c8950..0b160fd4584e 100644
--- a/src/javascript/app/Assets/Statement/icon-sell.jsx
+++ b/src/javascript/app/Assets/Statement/icon-sell.jsx
@@ -14,4 +14,4 @@ IconSell.propTypes = {
     onClick      : PropTypes.func,
 };
 
-export { IconSell };
+export default IconSell;
diff --git a/src/javascript/app/Assets/Statement/icon-wallet.jsx b/src/javascript/app/Assets/Statement/icon-wallet.jsx
index 2580b1613cfc..408ce89cda3f 100644
--- a/src/javascript/app/Assets/Statement/icon-wallet.jsx
+++ b/src/javascript/app/Assets/Statement/icon-wallet.jsx
@@ -14,4 +14,4 @@ IconWallet.propTypes = {
     onClick      : PropTypes.func,
 };
 
-export { IconWallet };
+export default IconWallet;
diff --git a/src/javascript/app/Assets/Statement/icon-withdrawal.jsx b/src/javascript/app/Assets/Statement/icon-withdrawal.jsx
index 6c9a38689ab3..7117bfa00d76 100644
--- a/src/javascript/app/Assets/Statement/icon-withdrawal.jsx
+++ b/src/javascript/app/Assets/Statement/icon-withdrawal.jsx
@@ -14,4 +14,4 @@ IconWithdrawal.propTypes = {
     onClick      : PropTypes.func,
 };
 
-export { IconWithdrawal };
+export default IconWithdrawal;
diff --git a/src/javascript/app/Assets/Statement/index.js b/src/javascript/app/Assets/Statement/index.js
deleted file mode 100644
index 1289b45c148e..000000000000
--- a/src/javascript/app/Assets/Statement/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './icon-buy.jsx';
-export * from './icon-deposit.jsx';
-export * from './icon-payout.jsx';
-export * from './icon-sell.jsx';
-export * from './icon-wallet.jsx';
-export * from './icon-withdrawal.jsx';
diff --git a/src/javascript/app/Assets/Trading/Barriers/icon-barrier-down.jsx b/src/javascript/app/Assets/Trading/Barriers/icon-barrier-down.jsx
index 554833a290da..a6fbbf470e45 100644
--- a/src/javascript/app/Assets/Trading/Barriers/icon-barrier-down.jsx
+++ b/src/javascript/app/Assets/Trading/Barriers/icon-barrier-down.jsx
@@ -16,4 +16,4 @@ IconBarrierDown.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconBarrierDown };
+export default IconBarrierDown;
diff --git a/src/javascript/app/Assets/Trading/Barriers/icon-barrier-up.jsx b/src/javascript/app/Assets/Trading/Barriers/icon-barrier-up.jsx
index 15eea50cd00a..0d8f45a05f26 100644
--- a/src/javascript/app/Assets/Trading/Barriers/icon-barrier-up.jsx
+++ b/src/javascript/app/Assets/Trading/Barriers/icon-barrier-up.jsx
@@ -16,4 +16,4 @@ IconBarrierUp.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconBarrierUp };
+export default IconBarrierUp;
diff --git a/src/javascript/app/Assets/Trading/Barriers/index.js b/src/javascript/app/Assets/Trading/Barriers/index.js
deleted file mode 100644
index 4ffa8b03dd21..000000000000
--- a/src/javascript/app/Assets/Trading/Barriers/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './icon-barrier-up.jsx';
-export * from './icon-barrier-down.jsx';
diff --git a/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx b/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
index 93fcfe1ccdc3..df28e17473f1 100644
--- a/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
+++ b/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
@@ -265,4 +265,4 @@ IconTradeCategory.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconTradeCategory };
+export default IconTradeCategory;
diff --git a/src/javascript/app/Assets/Trading/Categories/index.js b/src/javascript/app/Assets/Trading/Categories/index.js
deleted file mode 100644
index 4453e967bbf2..000000000000
--- a/src/javascript/app/Assets/Trading/Categories/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './icon-trade-categories.jsx';
-export * from './trade-categories.jsx';
-export * from './trade-categories-gif.jsx';
diff --git a/src/javascript/app/Assets/Trading/Categories/trade-categories-gif.jsx b/src/javascript/app/Assets/Trading/Categories/trade-categories-gif.jsx
index d43dceae0aa5..58c9999d8bb6 100644
--- a/src/javascript/app/Assets/Trading/Categories/trade-categories-gif.jsx
+++ b/src/javascript/app/Assets/Trading/Categories/trade-categories-gif.jsx
@@ -79,4 +79,4 @@ TradeCategoriesGIF.propTypes = {
     is_dark  : PropTypes.bool,
 };
 
-export { TradeCategoriesGIF };
+export default TradeCategoriesGIF;
diff --git a/src/javascript/app/Assets/Trading/Categories/trade-categories.jsx b/src/javascript/app/Assets/Trading/Categories/trade-categories.jsx
index bc82d8b4c45f..bafbc8d2525d 100644
--- a/src/javascript/app/Assets/Trading/Categories/trade-categories.jsx
+++ b/src/javascript/app/Assets/Trading/Categories/trade-categories.jsx
@@ -112,4 +112,4 @@ TradeCategories.propTypes = {
     category: PropTypes.string,
 };
 
-export { TradeCategories };
+export default TradeCategories;
diff --git a/src/javascript/app/Assets/Trading/Types/icon-trade-types.jsx b/src/javascript/app/Assets/Trading/Types/icon-trade-types.jsx
index 9c6ee5e973a6..9fcd2fc97a8c 100644
--- a/src/javascript/app/Assets/Trading/Types/icon-trade-types.jsx
+++ b/src/javascript/app/Assets/Trading/Types/icon-trade-types.jsx
@@ -262,4 +262,4 @@ IconTradeType.propTypes = {
     type     : PropTypes.string,
 };
 
-export { IconTradeType };
+export default IconTradeType;
diff --git a/src/javascript/app/Assets/Trading/Types/index.js b/src/javascript/app/Assets/Trading/Types/index.js
deleted file mode 100644
index e9876dc0187c..000000000000
--- a/src/javascript/app/Assets/Trading/Types/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './icon-trade-types.jsx';
diff --git a/src/javascript/app/Assets/Trading/icon-lock.jsx b/src/javascript/app/Assets/Trading/icon-lock.jsx
index 2a81f5c8e49b..bbb3ae5bb4fe 100644
--- a/src/javascript/app/Assets/Trading/icon-lock.jsx
+++ b/src/javascript/app/Assets/Trading/icon-lock.jsx
@@ -16,4 +16,4 @@ IconLock.propTypes = {
     className: PropTypes.string,
 };
 
-export { IconLock };
+export default IconLock;
diff --git a/src/javascript/app/Assets/Trading/icon-price-move.jsx b/src/javascript/app/Assets/Trading/icon-price-move.jsx
index 89c3c6ebd677..4955b42d3ea2 100644
--- a/src/javascript/app/Assets/Trading/icon-price-move.jsx
+++ b/src/javascript/app/Assets/Trading/icon-price-move.jsx
@@ -41,4 +41,4 @@ IconPriceMove.propTypes = {
     type     : PropTypes.string,
 };
 
-export { IconPriceMove };
+export default IconPriceMove;
diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
index f22cbcba84bf..ae8ed2be6d53 100644
--- a/src/javascript/app/Assets/icon.jsx
+++ b/src/javascript/app/Assets/icon.jsx
@@ -47,15 +47,15 @@ class Icon extends React.PureComponent {
             IconSettings : React.lazy(() => import('./Footer/icon-settings.jsx')),
 
             // Header
-            IconAccountsCurrency: React.lazy(() => import('./Header/AccountsCurrency')),
-            IconLogout          : React.lazy(() => import('./Header/Drawer')),
-            IconBell            : React.lazy(() => import('./Header/NavBar')),
-            IconCashier         : React.lazy(() => import('./Header/NavBar')),
-            IconDeriv           : React.lazy(() => import('./Header/NavBar')),
-            IconHamburger       : React.lazy(() => import('./Header/NavBar')),
-            IconPortfolio       : React.lazy(() => import('./Header/NavBar')),
-            IconReports         : React.lazy(() => import('./Header/NavBar')),
-            IconTrade           : React.lazy(() => import('./Header/NavBar')),
+            IconAccountsCurrency: React.lazy(() => import('./Header/AccountsCurrency/icon_accounts_currency.jsx')),
+            IconLogout          : React.lazy(() => import('./Header/Drawer/icon-logout.jsx')),
+            IconBell            : React.lazy(() => import('./Header/NavBar/icon-bell.jsx')),
+            IconCashier         : React.lazy(() => import('./Header/NavBar/icon-cashier.jsx')),
+            IconDeriv           : React.lazy(() => import('./Header/NavBar/icon-deriv.jsx')),
+            IconHamburger       : React.lazy(() => import('./Header/NavBar/icon-hamburger.jsx')),
+            IconPortfolio       : React.lazy(() => import('./Header/NavBar/icon-portfolio.jsx')),
+            IconReports         : React.lazy(() => import('./Header/NavBar/icon-reports.jsx')),
+            IconTrade           : React.lazy(() => import('./Header/NavBar/icon-trade.jsx')),
 
             // Reports
             IconOpenPositions: React.lazy(() => import('./Reports/icon-open-positions.jsx')),
@@ -63,27 +63,27 @@ class Icon extends React.PureComponent {
             IconStatement    : React.lazy(() => import('./Reports/icon-statement.jsx')),
 
             // Settings
-            IconCharts       : React.lazy(() => import('./Settings')),
-            IconCloseSettings: React.lazy(() => import('./Settings')), // Previously IconClose, so replace IconClose that has the same import path with this.
-            IconLanguage     : React.lazy(() => import('./Settings')),
-            IconPurchase     : React.lazy(() => import('./Settings')),
-            IconTheme        : React.lazy(() => import('./Settings')),
+            IconCharts       : React.lazy(() => import('./Settings/icon-charts.jsx')),
+            IconCloseSettings: React.lazy(() => import('./Settings/icon-close.jsx')), // Previously IconClose, so replace IconClose that has the same import path with this.
+            IconLanguage     : React.lazy(() => import('./Settings/icon-language.jsx')),
+            IconPurchase     : React.lazy(() => import('./Settings/icon-purchase.jsx')),
+            IconTheme        : React.lazy(() => import('./Settings/icon-theme.jsx')),
 
             // Statement
-            IconBuy       : React.lazy(() => import('./Statement')),
-            IconDeposit   : React.lazy(() => import('./Statement')),
-            IconPayout    : React.lazy(() => import('./Statement')),
-            IconSell      : React.lazy(() => import('./Statement')),
-            IconWallet    : React.lazy(() => import('./Statement')),
-            IconWithdrawal: React.lazy(() => import('./Statement')),
+            IconBuy       : React.lazy(() => import('./Statement/icon-buy.jsx')),
+            IconDeposit   : React.lazy(() => import('./Statement/icon-deposit.jsx')),
+            IconPayout    : React.lazy(() => import('./Statement/icon-payout.jsx')),
+            IconSell      : React.lazy(() => import('./Statement/icon-sell.jsx')),
+            IconWallet    : React.lazy(() => import('./Statement/icon-wallet.jsx')),
+            IconWithdrawal: React.lazy(() => import('./Statement/icon-withdrawal.jsx')),
 
             // Trading
-            IconBarrierDown: React.lazy(() => import('./Trading/Barriers')),
-            IconBarrierUp  : React.lazy(() => import('./Trading/Barriers')),
+            IconBarrierDown: React.lazy(() => import('./Trading/Barriers/icon-barrier-down.jsx')),
+            IconBarrierUp  : React.lazy(() => import('./Trading/Barriers/icon-barrier-up.jsx')),
             // IconTradeCategory : React.lazy(() => import('./Trading/Categories')),
             // TradeCategoriesGIF: React.lazy(() => import('./Trading/Categories')),
             // TradeCategories   : React.lazy(() => import('./Trading/Categories')),
-            IconTradeType  : React.lazy(() => import('./Trading/Types')),
+            IconTradeType  : React.lazy(() => import('./Trading/Types/icon-trade-types.jsx')),
             IconLock       : React.lazy(() => import('./Trading/icon-lock.jsx')),
             IconPriceMove  : React.lazy(() => import('./Trading/icon-price-move.jsx')),
         };
@@ -102,7 +102,9 @@ class Icon extends React.PureComponent {
             type         : this.props.type,
         };
 
-        const IconLazy = this.icons[this.props.icon] ? this.icons[this.props.icon] : <div />;
+        const IconLazy = this.icons[this.props.icon];
+        if (!IconLazy) return <div />;
+        
         return (
             <React.Suspense fallback={<div />}>
                 <IconLazy {...options} />
diff --git a/src/javascript/app/Modules/Reports/Containers/reports.jsx b/src/javascript/app/Modules/Reports/Containers/reports.jsx
index 38d70972e9b4..845891864642 100644
--- a/src/javascript/app/Modules/Reports/Containers/reports.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/reports.jsx
@@ -4,7 +4,7 @@ import { withRouter }  from 'react-router-dom';
 import { connect }     from 'Stores/connect';
 import { FadeWrapper } from 'App/Components/Animations';
 import VerticalTab     from 'App/Components/Elements/VerticalTabs/vertical-tab.jsx';
-import { IconClose }   from 'Assets/Settings';
+import Icon            from 'Assets/icon.jsx';
 import AppRoutes       from 'Constants/routes';
 import { localize }    from '_common/localize';
 
@@ -60,7 +60,7 @@ class Reports extends React.Component {
                     this.props.history.push(AppRoutes.trade);
                     this.setState({ is_visible: false });
                 },
-                icon : IconClose,
+                icon : <Icon icon='IconClose' />,
                 title: localize('Close'),
             },
         ];

From 7e49bceb7aeba762eb4d1d493e5f87aa5f905358 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 4 Jun 2019 12:57:54 +0800
Subject: [PATCH 07/19] upgrade enzyme and enzyme adaptor to latest which
 contains fixes that allows for testing of dynamically loaded component

---
 package-lock.json                             | 99 ++++++++++++++-----
 package.json                                  |  4 +-
 .../Footer/__tests__/toggle-positions.spec.js |  5 +-
 3 files changed, 78 insertions(+), 30 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 209d04e982b4..0bc745eb9879 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1102,6 +1102,12 @@
       "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
       "dev": true
     },
+    "array-filter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
+      "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=",
+      "dev": true
+    },
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -1151,13 +1157,24 @@
       "dev": true
     },
     "array.prototype.find": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.0.4.tgz",
-      "integrity": "sha1-VWpcU2LAhkgyPdrrnenRS8GGTJA=",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.0.tgz",
+      "integrity": "sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.13.0"
+      }
+    },
+    "array.prototype.flat": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz",
+      "integrity": "sha512-rVqIs330nLJvfC7JqYvEWwqVr5QjYF1ib02i3YJtR/fICO6527Tjpc/e4Mvmxh3GIePPreRXMdaGyC99YphWEw==",
       "dev": true,
       "requires": {
         "define-properties": "^1.1.2",
-        "es-abstract": "^1.7.0"
+        "es-abstract": "^1.10.0",
+        "function-bind": "^1.1.1"
       }
     },
     "arrify": {
@@ -4491,42 +4508,48 @@
       "dev": true
     },
     "enzyme": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.3.0.tgz",
-      "integrity": "sha512-l8csyPyLmtxskTz6pX9W8eDOyH1ckEtDttXk/vlFWCjv00SkjTjtoUrogqp4yEvMyneU9dUJoOLnqFoiHb8IHA==",
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.10.0.tgz",
+      "integrity": "sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==",
       "dev": true,
       "requires": {
+        "array.prototype.flat": "^1.2.1",
         "cheerio": "^1.0.0-rc.2",
-        "function.prototype.name": "^1.0.3",
-        "has": "^1.0.1",
+        "function.prototype.name": "^1.1.0",
+        "has": "^1.0.3",
+        "html-element-map": "^1.0.0",
         "is-boolean-object": "^1.0.0",
-        "is-callable": "^1.1.3",
+        "is-callable": "^1.1.4",
         "is-number-object": "^1.0.3",
+        "is-regex": "^1.0.4",
         "is-string": "^1.0.4",
         "is-subset": "^0.1.1",
-        "lodash": "^4.17.4",
-        "object-inspect": "^1.5.0",
+        "lodash.escape": "^4.0.1",
+        "lodash.isequal": "^4.5.0",
+        "object-inspect": "^1.6.0",
         "object-is": "^1.0.1",
         "object.assign": "^4.1.0",
         "object.entries": "^1.0.4",
         "object.values": "^1.0.4",
         "raf": "^3.4.0",
-        "rst-selector-parser": "^2.2.3"
+        "rst-selector-parser": "^2.2.3",
+        "string.prototype.trim": "^1.1.2"
       }
     },
     "enzyme-adapter-react-16": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.8.0.tgz",
-      "integrity": "sha512-7cVHIKutqnesGeM3CjNFHSvktpypSWBokrBO8wIW+BVx+HGxWCF87W9TpkIIYJqgCtdw9FQGFrAbLg8kSwPRuQ==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz",
+      "integrity": "sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA==",
       "dev": true,
       "requires": {
-        "enzyme-adapter-utils": "^1.10.0",
-        "function.prototype.name": "^1.1.0",
+        "enzyme-adapter-utils": "^1.12.0",
+        "has": "^1.0.3",
         "object.assign": "^4.1.0",
         "object.values": "^1.1.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.7.0",
-        "react-test-renderer": "^16.0.0-0"
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
+        "react-test-renderer": "^16.0.0-0",
+        "semver": "^5.7.0"
       },
       "dependencies": {
         "prop-types": {
@@ -4543,12 +4566,12 @@
       }
     },
     "enzyme-adapter-utils": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.11.0.tgz",
-      "integrity": "sha512-0VZeoE9MNx+QjTfsjmO1Mo+lMfunucYB4wt5ficU85WB/LoetTJrbuujmHP3PJx6pSoaAuLA+Mq877x4LoxdNg==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.0.tgz",
+      "integrity": "sha512-wkZvE0VxcFx/8ZsBw0iAbk3gR1d9hK447ebnSYBf95+r32ezBq+XDSAvRErkc4LZosgH8J7et7H7/7CtUuQfBA==",
       "dev": true,
       "requires": {
-        "airbnb-prop-types": "^2.12.0",
+        "airbnb-prop-types": "^2.13.2",
         "function.prototype.name": "^1.1.0",
         "object.assign": "^4.1.0",
         "object.fromentries": "^2.0.0",
@@ -7379,6 +7402,15 @@
         "wbuf": "^1.1.0"
       }
     },
+    "html-element-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.0.1.tgz",
+      "integrity": "sha512-BZSfdEm6n706/lBfXKWa4frZRZcT5k1cOusw95ijZsHlI+GdgY0v95h6IzO3iIDf2ROwq570YTwqNPqHcNMozw==",
+      "dev": true,
+      "requires": {
+        "array-filter": "^1.0.0"
+      }
+    },
     "html-encoding-sniffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
@@ -8628,6 +8660,12 @@
       "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=",
       "dev": true
     },
+    "lodash.escape": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
+      "dev": true
+    },
     "lodash.every": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
@@ -12943,6 +12981,17 @@
         "strip-ansi": "^3.0.0"
       }
     },
+    "string.prototype.trim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
+      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.5.0",
+        "function-bind": "^1.0.2"
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
diff --git a/package.json b/package.json
index 1525fe56f7b9..b475a8ced9ea 100644
--- a/package.json
+++ b/package.json
@@ -51,8 +51,8 @@
     "connect-modrewrite": "0.9.0",
     "deep-diff": "0.3.8",
     "emphasize": "2.0.0",
-    "enzyme": "3.3.0",
-    "enzyme-adapter-react-16": "1.8.0",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
     "eslint-config-airbnb-base": "13.1.0",
     "eslint-config-binary": "1.0.2",
     "eslint-config-prettier": "2.9.0",
diff --git a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
index 190f0089cb2e..45b741da282c 100644
--- a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
+++ b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
@@ -4,8 +4,7 @@ import { fake }               from 'sinon';
 import { configure, shallow } from 'enzyme';
 import Adapter                from 'enzyme-adapter-react-16';
 import { TogglePositions }    from '../toggle-positions.jsx';
-import { Icon }               from 'Assets/Common/icon.jsx';
-import { IconPositions }      from 'Assets/Footer';
+import { Icon }               from 'Assets/icon.jsx';
 
 configure({ adapter: new Adapter() });
 
@@ -26,7 +25,7 @@ describe('TogglePositions', () => {
         const wrapper = shallow(<TogglePositions />);
         expect(wrapper.contains(<Icon icon='IconPositions' className='footer__icon ic-positions__icon' />)).to.be.true;
     });
-    it('should call togglePositionsDrawer passed onClick', () => {
+    it('should call twDrawer passed onClick', () => {
         const callback = fake();
         const wrapper = shallow(<TogglePositions togglePositionsDrawer={callback} />);
         wrapper.prop('onClick')();

From 239948e32480d9016c417c9e3e1eecf6bbf890bb Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 4 Jun 2019 13:43:08 +0800
Subject: [PATCH 08/19] fix circular dependency

---
 .../Elements/VerticalTabs/vertical-tab.jsx    |   4 +-
 .../app/Assets/Contract/icon-end-time.jsx     |   9 +-
 .../app/Assets/Contract/icon-flag.jsx         |  13 +-
 .../app/Assets/Contract/icon-start-time.jsx   |   9 +-
 .../app/Assets/Contract/icon-tick.jsx         |  10 +-
 .../Categories/icon-trade-categories.jsx      |  81 ++++-------
 src/javascript/app/Assets/icon.jsx            |  26 ++--
 src/javascript/app/Constants/icons.js         | 130 ------------------
 src/javascript/app/Constants/index.js         |   1 -
 .../Components/Markers/marker-line.jsx        |   4 +-
 10 files changed, 53 insertions(+), 234 deletions(-)
 delete mode 100644 src/javascript/app/Constants/icons.js

diff --git a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx
index e64c03ead7db..361a103974d4 100644
--- a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx
+++ b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx
@@ -59,7 +59,7 @@ class VerticalTab extends React.PureComponent {
 VerticalTab.propTypes = {
     action_bar: PropTypes.arrayOf(
         PropTypes.shape({
-            icon   : PropTypes.func,
+            icon   : PropTypes.string,
             onClick: PropTypes.func,
             title  : PropTypes.string,
         })
@@ -71,7 +71,7 @@ VerticalTab.propTypes = {
     list         : PropTypes.arrayOf(
         PropTypes.shape({
             default: PropTypes.bool,
-            icon   : PropTypes.func,
+            icon   : PropTypes.string,
             label  : PropTypes.string,
             path   : PropTypes.string,
             value  : PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
diff --git a/src/javascript/app/Assets/Contract/icon-end-time.jsx b/src/javascript/app/Assets/Contract/icon-end-time.jsx
index 8225e0d8cd06..6ff562b183a6 100644
--- a/src/javascript/app/Assets/Contract/icon-end-time.jsx
+++ b/src/javascript/app/Assets/Contract/icon-end-time.jsx
@@ -1,9 +1,7 @@
-import { observer } from 'mobx-react';
 import PropTypes    from 'prop-types';
 import React        from 'react';
-import Icon         from 'Assets/icon.jsx';
 
-export const IconEndTimeSVG = ({ className, classNamePath }) => (
+export const IconEndTime = ({ className, classNamePath }) => (
     <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' className={className}>
         <g fill='none' fillRule='evenodd'>
             <circle className={classNamePath} cx='12' cy='12' r='12' />
@@ -16,12 +14,9 @@ export const IconEndTimeSVG = ({ className, classNamePath }) => (
     </svg>
 );
 
-const IconEndTime = () => <Icon icon='IconEndTimeSVG' />;
-
 IconEndTime.propTypes = {
     className    : PropTypes.string,
     classNamePath: PropTypes.string,
-    color        : PropTypes.string,
 };
 
-export default observer(IconEndTime);
+export default IconEndTime;
diff --git a/src/javascript/app/Assets/Contract/icon-flag.jsx b/src/javascript/app/Assets/Contract/icon-flag.jsx
index b4b696dc6abe..55d0ff4190d6 100644
--- a/src/javascript/app/Assets/Contract/icon-flag.jsx
+++ b/src/javascript/app/Assets/Contract/icon-flag.jsx
@@ -1,7 +1,4 @@
-import { observer } from 'mobx-react';
-import PropTypes    from 'prop-types';
 import React        from 'react';
-import Icon         from 'Assets/icon.jsx';
 
 export const IconFlagSVG = () => (
     <svg className='chart-spot__icon' width='16' height='16' viewBox='0 0 16 16'>
@@ -12,12 +9,4 @@ export const IconFlagSVG = () => (
     </svg>
 );
 
-const IconFlag = () => (
-    <Icon icon='IconFlagSVG' />
-);
-
-IconFlag.propTypes = {
-    color: PropTypes.string,
-};
-
-export default observer(IconFlag);
+export default IconFlagSVG;
diff --git a/src/javascript/app/Assets/Contract/icon-start-time.jsx b/src/javascript/app/Assets/Contract/icon-start-time.jsx
index 01d9f1fd9305..0342bd991b7f 100644
--- a/src/javascript/app/Assets/Contract/icon-start-time.jsx
+++ b/src/javascript/app/Assets/Contract/icon-start-time.jsx
@@ -1,9 +1,7 @@
-import { observer } from 'mobx-react';
 import PropTypes    from 'prop-types';
 import React        from 'react';
-import Icon         from 'Assets/icon.jsx';
 
-export const IconStartTimeSVG = ({ className, classNamePath }) => (
+export const IconStartTime = ({ className, classNamePath }) => (
     <svg className={className} xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
         <g fill='none' fillRule='evenodd'>
             <path
@@ -15,12 +13,9 @@ export const IconStartTimeSVG = ({ className, classNamePath }) => (
     </svg>
 );
 
-const IconStartTime = () => <Icon icon='IconStartTimeSVG' />;
-
 IconStartTime.propTypes = {
     className    : PropTypes.string,
     classNamePath: PropTypes.string,
-    color        : PropTypes.string,
 };
 
-export default observer(IconStartTime);
+export default IconStartTime;
diff --git a/src/javascript/app/Assets/Contract/icon-tick.jsx b/src/javascript/app/Assets/Contract/icon-tick.jsx
index c3ae70c2ed3b..1b04fa45fc30 100644
--- a/src/javascript/app/Assets/Contract/icon-tick.jsx
+++ b/src/javascript/app/Assets/Contract/icon-tick.jsx
@@ -1,9 +1,7 @@
-import { observer } from 'mobx-react';
 import PropTypes    from 'prop-types';
 import React        from 'react';
-import Icon         from 'Assets/icon.jsx';
 
-export const IconTickSVG = () => (
+export const IconTick = () => (
     <svg width='16' height='16' viewBox='0 0 16 16'>
         <g fill='none' fillRule='evenodd'>
             <circle cx='8' cy='8' r='8' fill='#4caf50' />
@@ -12,13 +10,9 @@ export const IconTickSVG = () => (
     </svg>
 );
 
-const IconTick = () => (
-    <Icon icon='IconTickSVG' />
-);
-
 IconTick.propTypes = {
     circle_color: PropTypes.string,
     tick_color  : PropTypes.string,
 };
 
-export default observer(IconTick);
+export default IconTick;
diff --git a/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx b/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
index df28e17473f1..b65e817d07e1 100644
--- a/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
+++ b/src/javascript/app/Assets/Trading/Categories/icon-trade-categories.jsx
@@ -1,7 +1,7 @@
-import classNames from 'classnames';
-import PropTypes  from 'prop-types';
-import React      from 'react';
-import Icon       from 'Assets/icon.jsx';
+import classNames    from 'classnames';
+import PropTypes     from 'prop-types';
+import React         from 'react';
+import IconTradeType from 'Assets/Trading/Types/icon-trade-types.jsx';
 
 const IconTradeCategory = ({ category, className }) => {
     let IconCategory;
@@ -11,15 +11,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='call'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='put'
                             />
@@ -31,15 +29,14 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='calle'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
+                                
                                 className='category-type'
                                 type='pute'
                             />
@@ -51,15 +48,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='call_barrier'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='put_barrier'
                             />
@@ -71,15 +66,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='expirymiss'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='expiryrange'
                             />
@@ -91,15 +84,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='range'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='upordown'
                             />
@@ -111,15 +102,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='digitmatch'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='digitdiff'
                             />
@@ -131,15 +120,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='digiteven'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='digitodd'
                             />
@@ -151,15 +138,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='digitover'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='digitunder'
                             />
@@ -171,15 +156,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='onetouch'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='notouch'
                             />
@@ -191,15 +174,13 @@ const IconTradeCategory = ({ category, className }) => {
                 IconCategory = (
                     <React.Fragment>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='asianu'
                             />
                         </div>
                         <div className='category-wrapper'>
-                            <Icon
-                                icon='IconTradeType'
+                            <IconTradeType
                                 className='category-type'
                                 type='asiand'
                             />
@@ -210,8 +191,7 @@ const IconTradeCategory = ({ category, className }) => {
             case 'lb_call':
                 IconCategory = (
                     <div className='category-wrapper'>
-                        <Icon
-                            icon='IconTradeType'
+                        <IconTradeType
                             className='category-type'
                             type='lbfloatcall'
                         />
@@ -221,8 +201,7 @@ const IconTradeCategory = ({ category, className }) => {
             case 'lb_put':
                 IconCategory = (
                     <div className='category-wrapper'>
-                        <Icon
-                            icon='IconTradeType'
+                        <IconTradeType
                             className='category-type'
                             type='lbfloatput'
                         />
@@ -232,8 +211,7 @@ const IconTradeCategory = ({ category, className }) => {
             case 'lb_high_low':
                 IconCategory = (
                     <div className='category-wrapper'>
-                        <Icon
-                            icon='IconTradeType'
+                        <IconTradeType
                             className='category-type'
                             type='lbhighlow'
                         />
@@ -243,8 +221,7 @@ const IconTradeCategory = ({ category, className }) => {
             default:
                 IconCategory = (
                     <div className='category-wrapper'>
-                        <Icon
-                            icon='IconTradeType'
+                        <IconTradeType
                             className='category-type'
                             type='unknown'
                         />
diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
index ae8ed2be6d53..3bd44ced457e 100644
--- a/src/javascript/app/Assets/icon.jsx
+++ b/src/javascript/app/Assets/icon.jsx
@@ -35,11 +35,11 @@ class Icon extends React.PureComponent {
             IconWip               : React.lazy(() => import('./Common/icon-wip.jsx')),
             
             // Contract
-            // IconContractClose: React.lazy(() => import('./Contract/icon-contract-close.jsx')),
-            // IconEndTimeSVG   : React.lazy(() => import('./Contract/icon-end-time.jsx')),
-            // IconFlagSVG      : React.lazy(() => import('./Contract/icon-flag.jsx')),
-            // IconStartTimeSVG : React.lazy(() => import('./Contract/icon-start-time.jsx')),
-            // IconTickSVG      : React.lazy(() => import('./Contract/icon-tick.jsx')),
+            IconContractClose: React.lazy(() => import('./Contract/icon-contract-close.jsx')),
+            IconEndTime      : React.lazy(() => import('./Contract/icon-end-time.jsx')),
+            IconFlagSVG      : React.lazy(() => import('./Contract/icon-flag.jsx')),
+            IconStartTime    : React.lazy(() => import('./Contract/icon-start-time.jsx')),
+            IconTick         : React.lazy(() => import('./Contract/icon-tick.jsx')),
 
             // Footer
             IconMaximize : React.lazy(() => import('./Footer/icon-maximize.jsx')),
@@ -78,14 +78,14 @@ class Icon extends React.PureComponent {
             IconWithdrawal: React.lazy(() => import('./Statement/icon-withdrawal.jsx')),
 
             // Trading
-            IconBarrierDown: React.lazy(() => import('./Trading/Barriers/icon-barrier-down.jsx')),
-            IconBarrierUp  : React.lazy(() => import('./Trading/Barriers/icon-barrier-up.jsx')),
-            // IconTradeCategory : React.lazy(() => import('./Trading/Categories')),
-            // TradeCategoriesGIF: React.lazy(() => import('./Trading/Categories')),
-            // TradeCategories   : React.lazy(() => import('./Trading/Categories')),
-            IconTradeType  : React.lazy(() => import('./Trading/Types/icon-trade-types.jsx')),
-            IconLock       : React.lazy(() => import('./Trading/icon-lock.jsx')),
-            IconPriceMove  : React.lazy(() => import('./Trading/icon-price-move.jsx')),
+            IconBarrierDown   : React.lazy(() => import('./Trading/Barriers/icon-barrier-down.jsx')),
+            IconBarrierUp     : React.lazy(() => import('./Trading/Barriers/icon-barrier-up.jsx')),
+            IconTradeCategory : React.lazy(() => import('./Trading/Categories/icon-trade-categories.jsx')),
+            TradeCategoriesGIF: React.lazy(() => import('./Trading/Categories/trade-categories-gif.jsx')),
+            TradeCategories   : React.lazy(() => import('./Trading/Categories/trade-categories.jsx')),
+            IconTradeType     : React.lazy(() => import('./Trading/Types/icon-trade-types.jsx')),
+            IconLock          : React.lazy(() => import('./Trading/icon-lock.jsx')),
+            IconPriceMove     : React.lazy(() => import('./Trading/icon-price-move.jsx')),
         };
     }
 
diff --git a/src/javascript/app/Constants/icons.js b/src/javascript/app/Constants/icons.js
deleted file mode 100644
index 091cb6261c73..000000000000
--- a/src/javascript/app/Constants/icons.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import { IconArrow }              from 'Assets/Common/icon-arrow.jsx';
-import { IconArrowBold }          from 'Assets/Common/icon-arrow-bold.jsx';
-import { IconBack }               from 'Assets/Common/icon-back.jsx';
-import { IconCalendar }           from 'Assets/Common/icon-calendar.jsx';
-import { IconCalendarToday }      from 'Assets/Common/icon-calendar-today.jsx';
-import { IconChevronDoubleLeft }  from 'Assets/Common/icon-chevron-double-left.jsx';
-import { IconChevronDoubleRight } from 'Assets/Common/icon-chevron-double-right.jsx';
-import { IconChevronLeft }        from 'Assets/Common/icon-chevron-left.jsx';
-import { IconChevronRight }       from 'Assets/Common/icon-chevron-right.jsx';
-import { IconClear }              from 'Assets/Common/icon-clear.jsx';
-import { IconClock }              from 'Assets/Common/icon-clock.jsx';
-import { IconClose }              from 'Assets/Common/icon-close.jsx';
-import { IconCountryFlag }        from 'Assets/Common/icon-country-flag.jsx';
-import { IconDanger }             from 'Assets/Common/icon-danger.jsx';
-import { IconExclamation }        from 'Assets/Common/icon-exclamation.jsx';
-import { IconFlag }               from 'Assets/Common/icon-flag.jsx';
-import { IconInfoBlue }           from 'Assets/Common/icon-info-blue.jsx';
-import { IconInfoOutline }        from 'Assets/Common/icon-info-outline.jsx';
-import { IconInformation }        from 'Assets/Common/icon-information.jsx';
-import { IconMinimize }           from 'Assets/Common/icon-minimize.jsx';
-import { IconMinus }              from 'Assets/Common/icon-minus.jsx';
-import { IconPlus }               from 'Assets/Common/icon-plus.jsx';
-import { IconQuestion }           from 'Assets/Common/icon-question.jsx';
-import { IconRedDot }             from 'Assets/Common/icon-red-dot.jsx';
-import { IconSuccess }            from 'Assets/Common/icon-success.jsx';
-import { IconWarning }            from 'Assets/Common/icon-warning.jsx';
-
-// import { IconEntrySpotSVG }       from 'Assets/Contract/icon-entry-spot.jsx';
-import { IconEndTimeSVG }         from 'Assets/Contract/icon-end-time.jsx';
-import { IconFlagSVG }            from 'Assets/Contract/icon-flag.jsx';
-import { IconStartTimeSVG }       from 'Assets/Contract/icon-start-time.jsx';
-import { IconTickSVG }            from 'Assets/Contract/icon-tick.jsx';
-
-import { IconMaximize }  from 'Assets/Footer/icon-maximize.jsx';
-import { IconPositions } from 'Assets/Footer/icon-positions.jsx';
-import { IconSettings }  from 'Assets/Footer/icon-settings.jsx';
-
-import { IconAccountsCurrency } from 'Assets/Header/AccountsCurrency/icon_accounts_currency.jsx';
-import { IconLogout }           from 'Assets/Header/Drawer/icon-logout.jsx';
-import { IconBell }             from 'Assets/Header/NavBar/icon-bell.jsx';
-import { IconCashier }          from 'Assets/Header/NavBar/icon-cashier.jsx';
-import { IconHamburger }        from 'Assets/Header/NavBar/icon-hamburger.jsx';
-import { IconPortfolio }        from 'Assets/Header/NavBar/icon-portfolio.jsx';
-import { IconReports }          from 'Assets/Header/NavBar/icon-reports.jsx';
-import { IconTrade }            from 'Assets/Header/NavBar/icon-trade.jsx';
-
-import { IconBuy }        from 'Assets/Statement/icon-buy.jsx';
-import { IconDeposit }    from 'Assets/Statement/icon-deposit.jsx';
-import { IconPayout }     from 'Assets/Statement/icon-payout.jsx';
-import { IconSell }       from 'Assets/Statement/icon-sell.jsx';
-import { IconWallet }     from 'Assets/Statement/icon-wallet.jsx';
-import { IconWithdrawal } from 'Assets/Statement/icon-withdrawal.jsx';
-
-import { IconBarrierDown }   from 'Assets/Trading/Barriers/icon-barrier-down.jsx';
-import { IconBarrierUp }     from 'Assets/Trading/Barriers/icon-barrier-up.jsx';
-import { IconTradeCategory } from 'Assets/Trading/Categories/icon-trade-categories.jsx';
-import { IconTradeType }     from 'Assets/Trading/Types/icon-trade-types.jsx';
-import { IconLock }          from 'Assets/Trading/icon-lock.jsx';
-import { IconPriceMove }     from 'Assets/Trading/icon-price-move.jsx';
-
-const ICONS = {
-    COMMON: {
-        ARROW               : IconArrow,
-        ARROW_BOLD          : IconArrowBold,
-        BACK                : IconBack,
-        CALENDAR_TODAY      : IconCalendarToday,
-        CALENDAR            : IconCalendar,
-        CHEVRON_DOUBLE_LEFT : IconChevronDoubleLeft,
-        CHEVRON_DOUBLE_RIGHT: IconChevronDoubleRight,
-        CHEVRON_LEFT        : IconChevronLeft,
-        CHEVRON_RIGHT       : IconChevronRight,
-        CLEAR               : IconClear,
-        CLOCK               : IconClock,
-        CLOSE               : IconClose,
-        COUNTRY_FLAG        : IconCountryFlag,
-        DANGER              : IconDanger,
-        EXCLAMATION         : IconExclamation,
-        FLAG                : IconFlag,
-        INFORMATION         : IconInformation,
-        INFO_BLUE           : IconInfoBlue,
-        INFO_OUTLINE        : IconInfoOutline,
-        MINIMIZE            : IconMinimize,
-        MINUS               : IconMinus,
-        PLUS                : IconPlus,
-        QUESTION            : IconQuestion,
-        RED_DOT             : IconRedDot,
-        SUCCESS             : IconSuccess,
-        WARNING             : IconWarning,
-    },
-    CONTRACT: {
-        // ENTRY_SPOT: IconEntrySpotSVG,
-        END_TIME  : IconEndTimeSVG,
-        FLAG      : IconFlagSVG,
-        START_TIME: IconStartTimeSVG,
-        TICK      : IconTickSVG,
-    },
-    FOOTER: {
-        MAXIMIZE : IconMaximize,
-        POSITIONS: IconPositions,
-        SETTINGS : IconSettings,
-    },
-    HEADER: {
-        ACCOUNTS_CURRENCY: IconAccountsCurrency,
-        LOGOUT           : IconLogout,
-        BELL             : IconBell,
-        CASHIER          : IconCashier,
-        HAMBURGER        : IconHamburger,
-        PORTFOLIO        : IconPortfolio,
-        REPORTS          : IconReports,
-        TRADE            : IconTrade,
-    },
-    STATEMENT: {
-        BUY       : IconBuy,
-        DEPOSIT   : IconDeposit,
-        PAYOUT    : IconPayout,
-        SELL      : IconSell,
-        WALLET    : IconWallet,
-        WITHDRAWAL: IconWithdrawal,
-    },
-    TRADING: {
-        BARRIER_DOWN  : IconBarrierDown,
-        BARRIER_UP    : IconBarrierUp,
-        TRADE_CATEGORY: IconTradeCategory,
-        TRADE_TYPES   : IconTradeType,
-        LOCK          : IconLock,
-        PRICE_MOVE    : IconPriceMove,
-    },
-};
-
-export { ICONS };
diff --git a/src/javascript/app/Constants/index.js b/src/javascript/app/Constants/index.js
index 227120929b86..cc269b578bdf 100644
--- a/src/javascript/app/Constants/index.js
+++ b/src/javascript/app/Constants/index.js
@@ -1,4 +1,3 @@
 export *      from './contract';
 export routes from './routes';
 export *      from './ui';
-export *      from './icons';
diff --git a/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx b/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
index 71b5ae5a2326..28300e651be9 100644
--- a/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
+++ b/src/javascript/app/Modules/SmartChart/Components/Markers/marker-line.jsx
@@ -16,7 +16,7 @@ const MarkerLine = ({
         <div className={classNames('chart-marker-line__wrapper', `chart-marker-line--${line_style}`)}>
             { label === marker_config.LINE_END.content_config.label &&
                 <Icon
-                    icon='IconEndTimeSVG'
+                    icon='IconEndTime'
                     className={classNames('chart-marker-line__icon', {
                         'chart-marker-line__icon--won' : status === 'won',
                         'chart-marker-line__icon--lost': status === 'lost',
@@ -25,7 +25,7 @@ const MarkerLine = ({
             }
             { label === marker_config.LINE_START.content_config.label &&
                 <Icon
-                    icon='IconStartTimeSVG'
+                    icon='IconStartTime'
                     className={classNames(
                         'chart-marker-line__icon',
                         'chart-marker-line__icon--time',

From 7792332c1f12b32d7bab26d54f1314eaf9126441 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 4 Jun 2019 14:00:57 +0800
Subject: [PATCH 09/19] use correct icons

---
 .../Components/Elements/SettingsDialog/settings-dialog.jsx    | 2 +-
 .../Modules/Contract/Components/InfoBox/info-box-expired.jsx  | 2 +-
 .../app/Modules/Contract/Containers/contract-replay.jsx       | 2 +-
 src/javascript/app/Modules/Reports/Containers/reports.jsx     | 2 +-
 src/javascript/app/Stores/Modules/Contract/Constants/ui.js    | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx b/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
index 81468dad014c..53853142e40c 100644
--- a/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
+++ b/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
@@ -51,7 +51,7 @@ class SettingsDialog extends React.PureComponent {
                     <h3 className='dialog-header__sidebar'>{localize('Platform settings')}</h3>
                     <div className='dialog-header__main'>
                         <div className='dialog-header__close' onClick={this.props.toggleDialog}>
-                            <Icon icon='IconClose' />
+                            <Icon icon='IconCloseSettings' />
                         </div>
                     </div>
                 </div>
diff --git a/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx b/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
index d2207ad442c9..7b46b84d3413 100644
--- a/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
+++ b/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
@@ -26,7 +26,7 @@ const InfoBoxExpired = ({
                 <SellInfo contract_info={contract_info} sell_info={sell_info} />
             }
             { has_flag &&
-                <Icon icon='IconFlag' />
+                <Icon icon='IconFlagSVG' />
             }
             <div>
                 <div>{localize('Profit/Loss')}:</div>
diff --git a/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx b/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
index 65bad9091806..e07119fd7d30 100644
--- a/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
+++ b/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
@@ -52,7 +52,7 @@ class ContractReplay extends React.Component {
         const action_bar_items = [
             {
                 onClick: () => this.props.history.push(AppRoutes.trade),
-                icon   : 'IconClose',
+                icon   : 'IconCloseSettings',
                 title  : localize('Close'),
             },
         ];
diff --git a/src/javascript/app/Modules/Reports/Containers/reports.jsx b/src/javascript/app/Modules/Reports/Containers/reports.jsx
index 845891864642..b28787cb00ea 100644
--- a/src/javascript/app/Modules/Reports/Containers/reports.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/reports.jsx
@@ -60,7 +60,7 @@ class Reports extends React.Component {
                     this.props.history.push(AppRoutes.trade);
                     this.setState({ is_visible: false });
                 },
-                icon : <Icon icon='IconClose' />,
+                icon : <Icon icon='IconCloseSettings' />,
                 title: localize('Close'),
             },
         ];
diff --git a/src/javascript/app/Stores/Modules/Contract/Constants/ui.js b/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
index 7a73118badf3..26f0ea96ea1e 100644
--- a/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
+++ b/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
@@ -4,6 +4,6 @@ import Icon         from 'Assets/icon.jsx';
 
 export const getHeaderConfig = () => ({
     purchased: { title: localize('Contract Purchased'), icon: <Icon icon='IconTick' /> },
-    won      : { title: localize('Contract Won'),       icon: <Icon icon='IconFlag' /> },
-    lost     : { title: localize('Contract Lost'),      icon: <Icon icon='IconFlag' /> },
+    won      : { title: localize('Contract Won'),       icon: <Icon icon='IconFlagSVG' /> },
+    lost     : { title: localize('Contract Lost'),      icon: <Icon icon='IconFlagSVG' /> },
 });

From f99a49649c22ef1a7a5c1920965aa6f5d6a6386a Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 4 Jun 2019 14:22:47 +0800
Subject: [PATCH 10/19] icon name changes

---
 .../Components/Elements/SettingsDialog/settings-dialog.jsx  | 2 +-
 .../Contract/{icon-contract-close.jsx => icon-close.jsx}    | 6 +++---
 src/javascript/app/Assets/Contract/icon-flag.jsx            | 6 +++---
 src/javascript/app/Assets/icon.jsx                          | 6 +++---
 .../Contract/Components/InfoBox/info-box-expired.jsx        | 2 +-
 .../app/Modules/Contract/Containers/contract-replay.jsx     | 2 +-
 src/javascript/app/Modules/Reports/Containers/reports.jsx   | 2 +-
 .../app/Modules/SmartChart/Components/chart-close-btn.jsx   | 2 +-
 src/javascript/app/Stores/Modules/Contract/Constants/ui.js  | 4 ++--
 9 files changed, 16 insertions(+), 16 deletions(-)
 rename src/javascript/app/Assets/Contract/{icon-contract-close.jsx => icon-close.jsx} (87%)

diff --git a/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx b/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
index 53853142e40c..5fd445f6e73a 100644
--- a/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
+++ b/src/javascript/app/App/Components/Elements/SettingsDialog/settings-dialog.jsx
@@ -51,7 +51,7 @@ class SettingsDialog extends React.PureComponent {
                     <h3 className='dialog-header__sidebar'>{localize('Platform settings')}</h3>
                     <div className='dialog-header__main'>
                         <div className='dialog-header__close' onClick={this.props.toggleDialog}>
-                            <Icon icon='IconCloseSettings' />
+                            <Icon icon='SettingsIconClose' />
                         </div>
                     </div>
                 </div>
diff --git a/src/javascript/app/Assets/Contract/icon-contract-close.jsx b/src/javascript/app/Assets/Contract/icon-close.jsx
similarity index 87%
rename from src/javascript/app/Assets/Contract/icon-contract-close.jsx
rename to src/javascript/app/Assets/Contract/icon-close.jsx
index 2be34daaf289..3247f508c202 100644
--- a/src/javascript/app/Assets/Contract/icon-contract-close.jsx
+++ b/src/javascript/app/Assets/Contract/icon-close.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes    from 'prop-types';
 import React        from 'react';
 
-const IconContractClose = ({ className, classNamePath }) => (
+const IconClose = ({ className, classNamePath }) => (
     <svg className={classNames('inline-icon', className)} width='32' height='32' viewBox='0 0 32 32'>
         <path className={classNamePath || 'color1-fill'} fill='rgba(0, 0, 0, 0.8)' fillRule='evenodd' d='M9.753 8L5.166 3.872a.5.5 0 0 1 .668-.744l5 4.5a.5.5 0 0 1 0 .744l-5 4.5a.5.5 0 1 1-.668-.744L9.753 8z' />
         <path className={classNamePath || 'color1-fill'}  fill='#7F8397' fillRule='nonzero' d='M16 14.586l-4.293-4.293a1 1 0 0 0-1.414 1.414L14.586 16l-4.293 4.293a1 1 0 0 0 1.414 1.414L16 17.414l4.293 4.293a1 1 0 0 0 1.414-1.414L17.414 16l4.293-4.293a1 1 0 0 0-1.414-1.414L16 14.586zM16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16z' />
@@ -10,9 +10,9 @@ const IconContractClose = ({ className, classNamePath }) => (
 
 );
 
-IconContractClose.propTypes = {
+IconClose.propTypes = {
     className    : PropTypes.string,
     classNamePath: PropTypes.string,
 };
 
-export default IconContractClose;
+export default IconClose;
diff --git a/src/javascript/app/Assets/Contract/icon-flag.jsx b/src/javascript/app/Assets/Contract/icon-flag.jsx
index 55d0ff4190d6..08ef5d021fcf 100644
--- a/src/javascript/app/Assets/Contract/icon-flag.jsx
+++ b/src/javascript/app/Assets/Contract/icon-flag.jsx
@@ -1,6 +1,6 @@
-import React        from 'react';
+import React from 'react';
 
-export const IconFlagSVG = () => (
+export const IconFlag = () => (
     <svg className='chart-spot__icon' width='16' height='16' viewBox='0 0 16 16'>
         <g fill='none' fillRule='evenodd'>
             <path d='M0 0h16v16H0z' />
@@ -9,4 +9,4 @@ export const IconFlagSVG = () => (
     </svg>
 );
 
-export default IconFlagSVG;
+export default IconFlag;
diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
index 3bd44ced457e..d7c5ae07d74f 100644
--- a/src/javascript/app/Assets/icon.jsx
+++ b/src/javascript/app/Assets/icon.jsx
@@ -35,9 +35,9 @@ class Icon extends React.PureComponent {
             IconWip               : React.lazy(() => import('./Common/icon-wip.jsx')),
             
             // Contract
-            IconContractClose: React.lazy(() => import('./Contract/icon-contract-close.jsx')),
+            ContractIconClose: React.lazy(() => import('./Contract/icon-close.jsx')),
             IconEndTime      : React.lazy(() => import('./Contract/icon-end-time.jsx')),
-            IconFlagSVG      : React.lazy(() => import('./Contract/icon-flag.jsx')),
+            ContractIconFlag : React.lazy(() => import('./Contract/icon-flag.jsx')),
             IconStartTime    : React.lazy(() => import('./Contract/icon-start-time.jsx')),
             IconTick         : React.lazy(() => import('./Contract/icon-tick.jsx')),
 
@@ -64,7 +64,7 @@ class Icon extends React.PureComponent {
 
             // Settings
             IconCharts       : React.lazy(() => import('./Settings/icon-charts.jsx')),
-            IconCloseSettings: React.lazy(() => import('./Settings/icon-close.jsx')), // Previously IconClose, so replace IconClose that has the same import path with this.
+            SettingsIconClose: React.lazy(() => import('./Settings/icon-close.jsx')), // Previously IconClose, so replace IconClose that has the same import path with this.
             IconLanguage     : React.lazy(() => import('./Settings/icon-language.jsx')),
             IconPurchase     : React.lazy(() => import('./Settings/icon-purchase.jsx')),
             IconTheme        : React.lazy(() => import('./Settings/icon-theme.jsx')),
diff --git a/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx b/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
index 7b46b84d3413..7bc24d74fcef 100644
--- a/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
+++ b/src/javascript/app/Modules/Contract/Components/InfoBox/info-box-expired.jsx
@@ -26,7 +26,7 @@ const InfoBoxExpired = ({
                 <SellInfo contract_info={contract_info} sell_info={sell_info} />
             }
             { has_flag &&
-                <Icon icon='IconFlagSVG' />
+                <Icon icon='ContractIconFlag' />
             }
             <div>
                 <div>{localize('Profit/Loss')}:</div>
diff --git a/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx b/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
index e07119fd7d30..ea2eca350368 100644
--- a/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
+++ b/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
@@ -52,7 +52,7 @@ class ContractReplay extends React.Component {
         const action_bar_items = [
             {
                 onClick: () => this.props.history.push(AppRoutes.trade),
-                icon   : 'IconCloseSettings',
+                icon   : 'SettingsIconClose',
                 title  : localize('Close'),
             },
         ];
diff --git a/src/javascript/app/Modules/Reports/Containers/reports.jsx b/src/javascript/app/Modules/Reports/Containers/reports.jsx
index b28787cb00ea..3b1fa85b389f 100644
--- a/src/javascript/app/Modules/Reports/Containers/reports.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/reports.jsx
@@ -60,7 +60,7 @@ class Reports extends React.Component {
                     this.props.history.push(AppRoutes.trade);
                     this.setState({ is_visible: false });
                 },
-                icon : <Icon icon='IconCloseSettings' />,
+                icon : <Icon icon='SettingsIconClose' />,
                 title: localize('Close'),
             },
         ];
diff --git a/src/javascript/app/Modules/SmartChart/Components/chart-close-btn.jsx b/src/javascript/app/Modules/SmartChart/Components/chart-close-btn.jsx
index 45180bfde600..0154ebc2afb9 100644
--- a/src/javascript/app/Modules/SmartChart/Components/chart-close-btn.jsx
+++ b/src/javascript/app/Modules/SmartChart/Components/chart-close-btn.jsx
@@ -13,7 +13,7 @@ const ChartCloseBtn = ({
             onClick={onClose}
         >
             <Icon
-                icon='IconContractClose'
+                icon='ContractIconClose'
                 className='ic-chart-close'
             />
         </div>
diff --git a/src/javascript/app/Stores/Modules/Contract/Constants/ui.js b/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
index 26f0ea96ea1e..2a5e1050c32c 100644
--- a/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
+++ b/src/javascript/app/Stores/Modules/Contract/Constants/ui.js
@@ -4,6 +4,6 @@ import Icon         from 'Assets/icon.jsx';
 
 export const getHeaderConfig = () => ({
     purchased: { title: localize('Contract Purchased'), icon: <Icon icon='IconTick' /> },
-    won      : { title: localize('Contract Won'),       icon: <Icon icon='IconFlagSVG' /> },
-    lost     : { title: localize('Contract Lost'),      icon: <Icon icon='IconFlagSVG' /> },
+    won      : { title: localize('Contract Won'),       icon: <Icon icon='ContractIconFlag' /> },
+    lost     : { title: localize('Contract Lost'),      icon: <Icon icon='ContractIconFlag' /> },
 });

From 0b91a40d125d881540c298439cc293c2d41a92c6 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 4 Jun 2019 14:58:24 +0800
Subject: [PATCH 11/19] fix broken icons

---
 .../app/App/Constants/routes-config.js        | 12 ++----
 .../empty-trade-history-message.jsx           | 41 +++++++++----------
 .../Components/placeholder-component.jsx      |  2 +-
 .../Reports/Containers/open-positions.jsx     |  2 +-
 .../Reports/Containers/profit-table.jsx       |  2 +-
 .../Modules/Reports/Containers/reports.jsx    |  3 +-
 .../Modules/Reports/Containers/statement.jsx  |  2 +-
 7 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/src/javascript/app/App/Constants/routes-config.js b/src/javascript/app/App/Constants/routes-config.js
index f3c00a1d47c5..7ade0e1d6614 100644
--- a/src/javascript/app/App/Constants/routes-config.js
+++ b/src/javascript/app/App/Constants/routes-config.js
@@ -3,10 +3,6 @@ import { Redirect }    from 'react-router-dom';
 import { localize }    from '_common/localize';
 import { routes }      from 'Constants';
 
-import IconPortfolio     from 'Assets/Header/NavBar/icon-portfolio.jsx';
-import IconProfitTable   from 'Assets/Reports/icon-profit-table.jsx';
-import IconOpenPositions from 'Assets/Reports/icon-open-positions.jsx';
-import IconStatement     from 'Assets/Reports/icon-statement.jsx';
 // import Statement       from 'Modules/Statement';
 import Trade             from 'Modules/Trading';
 
@@ -37,7 +33,7 @@ const Page404 = lazy(() => import(/* webpackChunkName: "404" */ 'Modules/Page404
 const initRoutesConfig = () => ([
     { path: routes.contract,  component: ContractDetails, title: localize('Contract Details'),  is_authenticated: true },
     { path: routes.index,     component: Redirect,        title: '',                            to: '/trade' },
-    { path: routes.portfolio, component: Portfolio,       title: localize('Portfolio'),         is_authenticated: true, icon_component: IconPortfolio },
+    { path: routes.portfolio, component: Portfolio,       title: localize('Portfolio'),         is_authenticated: true, icon_component: 'IconPortfolio' },
     { path: routes.root,      component: Redirect,        title: '',                            exact: true, to: '/trade' },
     {
         path            : routes.reports,
@@ -45,9 +41,9 @@ const initRoutesConfig = () => ([
         is_authenticated: true,
         title           : localize('Reports'),
         routes          : [
-            { path: routes.positions, component: OpenPositions, title: localize('Open Positions'), icon_component: IconOpenPositions, default: true },
-            { path: routes.profit,    component: ProfitTable,   title: localize('Profit Table'),   icon_component: IconProfitTable },
-            { path: routes.statement, component: Statement,     title: localize('Statement'),      icon_component: IconStatement },
+            { path: routes.positions, component: OpenPositions, title: localize('Open Positions'), icon_component: 'IconOpenPositions', default: true },
+            { path: routes.profit,    component: ProfitTable,   title: localize('Profit Table'),   icon_component: 'IconProfitTable' },
+            { path: routes.statement, component: Statement,     title: localize('Statement'),      icon_component: 'IconStatement' },
         ],
     },
     { path: routes.trade,     component: Trade,           title: localize('Trade'),             exact: true },
diff --git a/src/javascript/app/Modules/Reports/Components/empty-trade-history-message.jsx b/src/javascript/app/Modules/Reports/Components/empty-trade-history-message.jsx
index 5a2ee2ffeeae..96283a1d8c35 100644
--- a/src/javascript/app/Modules/Reports/Components/empty-trade-history-message.jsx
+++ b/src/javascript/app/Modules/Reports/Components/empty-trade-history-message.jsx
@@ -1,33 +1,30 @@
-import PropTypes       from 'prop-types';
-import React           from 'react';
+import PropTypes from 'prop-types';
+import React     from 'react';
+import Icon      from 'Assets/icon.jsx';
 
 const EmptyTradeHistoryMessage = ({
     has_selected_date,
     component_icon,
     localized_message,
     localized_period_message,
-}) => {
-    const ComponentIcon = component_icon;
-
-    return (
-        <React.Fragment>
-            <div className='empty-trade-history'>
-                <ComponentIcon className='empty-trade-history__icon' />
-                <span className='empty-trade-history__text'>
-                    {
-                        !has_selected_date ?
-                            localized_message
-                            :
-                            localized_period_message
-                    }
-                </span>
-            </div>
-        </React.Fragment>
-    );
-};
+}) => (
+    <React.Fragment>
+        <div className='empty-trade-history'>
+            <Icon icon={component_icon} className='empty-trade-history__icon' />
+            <span className='empty-trade-history__text'>
+                {
+                    !has_selected_date ?
+                        localized_message
+                        :
+                        localized_period_message
+                }
+            </span>
+        </div>
+    </React.Fragment>
+);
 
 EmptyTradeHistoryMessage.propTypes = {
-    component_icon          : PropTypes.func,
+    component_icon          : PropTypes.string,
     has_selected_date       : PropTypes.bool,
     localized_message       : PropTypes.string,
     localized_period_message: PropTypes.string,
diff --git a/src/javascript/app/Modules/Reports/Components/placeholder-component.jsx b/src/javascript/app/Modules/Reports/Components/placeholder-component.jsx
index 16b83a1b0612..63fa7ea44aad 100644
--- a/src/javascript/app/Modules/Reports/Components/placeholder-component.jsx
+++ b/src/javascript/app/Modules/Reports/Components/placeholder-component.jsx
@@ -19,7 +19,7 @@ const PlaceholderComponent = (props) => {
 };
 
 PlaceholderComponent.propTypes = {
-    component_icon         : PropTypes.func,
+    component_icon         : PropTypes.string,
     empty_message_component: PropTypes.func,
     has_selected_date      : PropTypes.bool,
     localized_message      : PropTypes.string,
diff --git a/src/javascript/app/Modules/Reports/Containers/open-positions.jsx b/src/javascript/app/Modules/Reports/Containers/open-positions.jsx
index f904f86ac4c3..087484d9606b 100644
--- a/src/javascript/app/Modules/Reports/Containers/open-positions.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/open-positions.jsx
@@ -90,7 +90,7 @@ class OpenPositions extends React.Component {
 
 OpenPositions.propTypes = {
     active_positions: MobxPropTypes.arrayOrObservableArray,
-    component_icon  : PropTypes.func,
+    component_icon  : PropTypes.string,
     currency        : PropTypes.string,
     error           : PropTypes.string,
     history         : PropTypes.object,
diff --git a/src/javascript/app/Modules/Reports/Containers/profit-table.jsx b/src/javascript/app/Modules/Reports/Containers/profit-table.jsx
index 43b55ba29a12..08c43dd0790e 100644
--- a/src/javascript/app/Modules/Reports/Containers/profit-table.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/profit-table.jsx
@@ -94,7 +94,7 @@ class ProfitTable extends React.Component {
 }
 
 ProfitTable.propTypes = {
-    component_icon   : PropTypes.func,
+    component_icon   : PropTypes.string,
     currency         : PropTypes.string,
     data             : MobxPropTypes.arrayOrObservableArray,
     error            : PropTypes.string,
diff --git a/src/javascript/app/Modules/Reports/Containers/reports.jsx b/src/javascript/app/Modules/Reports/Containers/reports.jsx
index 3b1fa85b389f..aef4d0fba954 100644
--- a/src/javascript/app/Modules/Reports/Containers/reports.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/reports.jsx
@@ -4,7 +4,6 @@ import { withRouter }  from 'react-router-dom';
 import { connect }     from 'Stores/connect';
 import { FadeWrapper } from 'App/Components/Animations';
 import VerticalTab     from 'App/Components/Elements/VerticalTabs/vertical-tab.jsx';
-import Icon            from 'Assets/icon.jsx';
 import AppRoutes       from 'Constants/routes';
 import { localize }    from '_common/localize';
 
@@ -60,7 +59,7 @@ class Reports extends React.Component {
                     this.props.history.push(AppRoutes.trade);
                     this.setState({ is_visible: false });
                 },
-                icon : <Icon icon='SettingsIconClose' />,
+                icon : 'SettingsIconClose',
                 title: localize('Close'),
             },
         ];
diff --git a/src/javascript/app/Modules/Reports/Containers/statement.jsx b/src/javascript/app/Modules/Reports/Containers/statement.jsx
index f772aa2b4bf8..0c8b11f2cfbe 100644
--- a/src/javascript/app/Modules/Reports/Containers/statement.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/statement.jsx
@@ -103,7 +103,7 @@ class Statement extends React.Component {
 }
 
 Statement.propTypes = {
-    component_icon   : PropTypes.func,
+    component_icon   : PropTypes.string,
     data             : MobxPropTypes.arrayOrObservableArray,
     error            : PropTypes.string,
     handleScroll     : PropTypes.func,

From ca18a5718e44e843a55eb49b4bdbfdc7e79b28cb Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 4 Jun 2019 17:00:53 +0800
Subject: [PATCH 12/19] fix tests

---
 .../Elements/VerticalTabs/__tests__/vertical-tab.spec.js  | 4 ++--
 .../Layout/Footer/__tests__/network-status.spec.js        | 2 --
 .../Layout/Footer/__tests__/toggle-positions.spec.js      | 2 +-
 .../App/Components/Routes/__tests__/button-link.spec.js   | 8 ++++----
 .../ContractType/__tests__/contract-type-item.spec.js     | 2 +-
 .../ContractType/__tests__/contract-type-list.spec.js     | 2 +-
 6 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/javascript/app/App/Components/Elements/VerticalTabs/__tests__/vertical-tab.spec.js b/src/javascript/app/App/Components/Elements/VerticalTabs/__tests__/vertical-tab.spec.js
index 05a0db977cff..04608be2a0aa 100644
--- a/src/javascript/app/App/Components/Elements/VerticalTabs/__tests__/vertical-tab.spec.js
+++ b/src/javascript/app/App/Components/Elements/VerticalTabs/__tests__/vertical-tab.spec.js
@@ -6,12 +6,12 @@ import VerticalTab from '../vertical-tab.jsx';
 describe('<VerticalTab />', () => {
     const valid_tab_items = [
         {
-            icon: () => <svg />,
+            icon: '',
             label: 'Label 1',
             value: () => <svg />
         },
         {
-            icon: () => <svg />,
+            icon: '',
             label: 'Label 2',
             value: () => <svg />
         }
diff --git a/src/javascript/app/App/Components/Layout/Footer/__tests__/network-status.spec.js b/src/javascript/app/App/Components/Layout/Footer/__tests__/network-status.spec.js
index 8daa1c526ab3..1f0752a7b277 100644
--- a/src/javascript/app/App/Components/Layout/Footer/__tests__/network-status.spec.js
+++ b/src/javascript/app/App/Components/Layout/Footer/__tests__/network-status.spec.js
@@ -26,7 +26,6 @@ describe('NetworkStatus', () => {
     });
     it('should contain Tooltip message passed in status', () => {
         const wrapper = shallow(<NetworkStatus status={status} />);
-        console.log(wrapper);
         expect(wrapper.contains(
             <Popover classNameBubble='network-status__tooltip' alignment='top' message='Network status: Online'>
                 <div className='network-status__circle network-status__circle--online' />
@@ -36,7 +35,6 @@ describe('NetworkStatus', () => {
     it('should contain Popover with default message and div with only default class if status does not contain them', () => {
         status = {};
         const wrapper = shallow(<NetworkStatus status={status} />);
-        console.log(wrapper);
         expect(wrapper.contains(
             <Popover classNameBubble='network-status__tooltip' alignment='top' message='Network status: Connecting to server'>
                 <div className='network-status__circle' />
diff --git a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
index 45b741da282c..325898659bea 100644
--- a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
+++ b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-positions.spec.js
@@ -4,7 +4,7 @@ import { fake }               from 'sinon';
 import { configure, shallow } from 'enzyme';
 import Adapter                from 'enzyme-adapter-react-16';
 import { TogglePositions }    from '../toggle-positions.jsx';
-import { Icon }               from 'Assets/icon.jsx';
+import Icon                   from 'Assets/icon.jsx';
 
 configure({ adapter: new Adapter() });
 
diff --git a/src/javascript/app/App/Components/Routes/__tests__/button-link.spec.js b/src/javascript/app/App/Components/Routes/__tests__/button-link.spec.js
index 3332461dbdf0..a823ceea7fc2 100644
--- a/src/javascript/app/App/Components/Routes/__tests__/button-link.spec.js
+++ b/src/javascript/app/App/Components/Routes/__tests__/button-link.spec.js
@@ -10,21 +10,21 @@ configure({ adapter: new Adapter() });
 
 describe('<ButtonLink />', () => {
     it('should render one <ButtonLink /> component', () => {
-        const wrapper = shallow(<ButtonLink />);
+        const wrapper = shallow(<ButtonLink to='' />);
         expect(wrapper).to.have.length(1);
     });
     it('should render children when passed in', () => {
-        testChildren(<ButtonLink />);
+        testChildren(<ButtonLink to='' />);
     })
     it('should render one <Link />', () => {
         const wrapper = shallow(
-            <ButtonLink />
+            <ButtonLink to='' />
         );
         expect(wrapper.find(Link)).to.have.length(1);
     });
     it('should render component with className if any given', () => {
         const wrapper = shallow(
-            <ButtonLink className='a-cool-classname' />
+            <ButtonLink className='a-cool-classname' to='' />
         );
         expect(wrapper.find('.a-cool-classname').exists());
     });
diff --git a/src/javascript/app/Modules/Trading/Components/Form/ContractType/__tests__/contract-type-item.spec.js b/src/javascript/app/Modules/Trading/Components/Form/ContractType/__tests__/contract-type-item.spec.js
index b46aab67d356..fba8c781506f 100644
--- a/src/javascript/app/Modules/Trading/Components/Form/ContractType/__tests__/contract-type-item.spec.js
+++ b/src/javascript/app/Modules/Trading/Components/Form/ContractType/__tests__/contract-type-item.spec.js
@@ -13,6 +13,6 @@ describe('ContractTypeItem', () => {
             { value:'high_low', text:'Higher/Lower' },
         ];
         const wrapper = shallow(<ContractTypeItem contracts={contracts} />);
-        expect(wrapper).to.have.length(1);
+        expect(wrapper).to.have.length(2);
     });
 });
diff --git a/src/javascript/app/Modules/Trading/Components/Form/ContractType/__tests__/contract-type-list.spec.js b/src/javascript/app/Modules/Trading/Components/Form/ContractType/__tests__/contract-type-list.spec.js
index 9c8eca7d4c82..aa62cfe1af24 100644
--- a/src/javascript/app/Modules/Trading/Components/Form/ContractType/__tests__/contract-type-list.spec.js
+++ b/src/javascript/app/Modules/Trading/Components/Form/ContractType/__tests__/contract-type-list.spec.js
@@ -18,6 +18,6 @@ describe('ContractTypeList', () => {
     };
     it('should render one <ContractTypeList /> component', () => {
         const wrapper = shallow(<ContractTypeList list={list} />);
-        expect(wrapper).to.have.length(1);
+        expect(wrapper).to.have.length(2);
     });
 });

From 6c8df3976caa7cfbee3fd2d8473f45ffe1ca4f26 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Wed, 5 Jun 2019 11:39:35 +0800
Subject: [PATCH 13/19] clean up comments

---
 src/javascript/app/Assets/icon.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
index d7c5ae07d74f..97fc6bead1db 100644
--- a/src/javascript/app/Assets/icon.jsx
+++ b/src/javascript/app/Assets/icon.jsx
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 class Icon extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.icons = { /* When adding a new icon, arrange it by following the ascending file system arrangement */
+        /* When adding a new icon, arrange it by following the ascending file system arrangement */
+        this.icons = {
             // Common
             IconArrowBold         : React.lazy(() => import('./Common/icon-arrow-bold.jsx')),
             IconArrow             : React.lazy(() => import('./Common/icon-arrow.jsx')),
@@ -64,7 +65,7 @@ class Icon extends React.PureComponent {
 
             // Settings
             IconCharts       : React.lazy(() => import('./Settings/icon-charts.jsx')),
-            SettingsIconClose: React.lazy(() => import('./Settings/icon-close.jsx')), // Previously IconClose, so replace IconClose that has the same import path with this.
+            SettingsIconClose: React.lazy(() => import('./Settings/icon-close.jsx')),
             IconLanguage     : React.lazy(() => import('./Settings/icon-language.jsx')),
             IconPurchase     : React.lazy(() => import('./Settings/icon-purchase.jsx')),
             IconTheme        : React.lazy(() => import('./Settings/icon-theme.jsx')),

From 5e0cfcc05741c5135773d3f767a0bf6704db232a Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Wed, 5 Jun 2019 13:44:02 +0800
Subject: [PATCH 14/19] fix warnings

---
 src/javascript/_common/base/login.js               | 14 ++++++++------
 src/javascript/_common/url.js                      |  2 +-
 .../Elements/VerticalTabs/vertical-tab.jsx         |  6 +++---
 .../app/Stores/Modules/Trading/Helpers/end-time.js | 14 +++++++-------
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/javascript/_common/base/login.js b/src/javascript/_common/base/login.js
index 553a98c5a637..b7db736857ee 100644
--- a/src/javascript/_common/base/login.js
+++ b/src/javascript/_common/base/login.js
@@ -24,12 +24,14 @@ const Login = (() => {
         const marketing_queries  = `&signup_device=${signup_device}${date_first_contact ? `&date_first_contact=${date_first_contact}` : ''}`;
         const default_binary_url = `https://oauth.binary.com/oauth2/authorize?app_id=${getAppId()}&l=${language}${marketing_queries}`;
 
-        return ((server_url && /qa/.test(server_url)) ?
-            `https://${server_url}/oauth2/authorize?app_id=${getAppId()}&l=${language}${marketing_queries}` :
-            getAppId() === domain_app_ids['deriv.app'] ?
-                default_binary_url
-                : urlForCurrentDomain(default_binary_url)
-        );
+        if (server_url && /qa/.test(server_url)) {
+            return `https://${server_url}/oauth2/authorize?app_id=${getAppId()}&l=${language}${marketing_queries}`;
+        }
+        if (getAppId === domain_app_ids['deriv.app']) {
+            return default_binary_url;
+        }
+
+        return urlForCurrentDomain(default_binary_url);
     };
 
     // TODO: update this to handle logging into /app/ url
diff --git a/src/javascript/_common/url.js b/src/javascript/_common/url.js
index ef6eabbcc359..50e9a2092b0a 100644
--- a/src/javascript/_common/url.js
+++ b/src/javascript/_common/url.js
@@ -46,7 +46,7 @@ const Url = (() => {
             if (/localhost|binary\.sx/.test(domain)) {
                 domain = `https://binary.com/${url_lang}/`;
             } else {
-                domain = domain.replace(/deriv\.app/, 'binary\.com');
+                domain = domain.replace(/deriv\.app/, 'binary.com');
             }
         }
         const new_url = `${domain}${(normalizePath(path) || 'home')}.html${(pars ? `?${pars}` : '')}`;
diff --git a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx
index 361a103974d4..8ac61c9b46e8 100644
--- a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx
+++ b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx
@@ -11,9 +11,9 @@ class VerticalTab extends React.PureComponent {
             const applicable_routes = props.list.filter(item => (
                 item.path === props.current_path || item.default
             ));
-            const selected = applicable_routes.length > 1 ?
-                applicable_routes[applicable_routes.length - 1]
-                : applicable_routes.length === 1 ? applicable_routes[0] : undefined;
+            const selected = applicable_routes.length > 1
+                ? applicable_routes[applicable_routes.length - 1]
+                : applicable_routes[0];
 
             this.state = {
                 selected,
diff --git a/src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js b/src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js
index ce479a4a2396..2cac8d964748 100644
--- a/src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js
+++ b/src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js
@@ -8,14 +8,14 @@ export const getSelectedTime = (
     selected_time,
     market_open_time,
 ) => {
-    let value = selected_time.isBefore(market_open_time)
-        ? market_open_time.isBefore(server_time)
-            ? server_time
-            : market_open_time
-        : selected_time;
+    if (selected_time.isAfter(market_open_time)) {
+        getClosestTime(selected_time, 5).format('HH:mm');
+    }
+    if (market_open_time.isAfter(server_time)) {
+        getClosestTime(market_open_time, 5).format('HH:mm');
+    }
 
-    value = getClosestTime(value, 5);
-    return value.format('HH:mm');
+    return getClosestTime(server_time, 5).format('HH:mm');
 };
 
 export const getBoundaries = (

From 408fa91b76b93b7206e7a9d2762adff9fbed1666 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Wed, 5 Jun 2019 14:02:56 +0800
Subject: [PATCH 15/19] change Notifications list proptype to array as oppose
 to object

---
 .../app/App/Components/Elements/Notifications/notifications.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/javascript/app/App/Components/Elements/Notifications/notifications.jsx b/src/javascript/app/App/Components/Elements/Notifications/notifications.jsx
index 4e90fb502f85..e528460d97ee 100644
--- a/src/javascript/app/App/Components/Elements/Notifications/notifications.jsx
+++ b/src/javascript/app/App/Components/Elements/Notifications/notifications.jsx
@@ -20,7 +20,7 @@ const Notifications = ({ list }) => (
 );
 
 Notifications.propTypes = {
-    list: PropTypes.object,
+    list: PropTypes.array,
 };
 
 export { Notifications };

From ddd76767ecece4c94fff5eb9d5c5703c95f9fa98 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Wed, 5 Jun 2019 14:44:52 +0800
Subject: [PATCH 16/19] fix test

---
 .../Layout/Footer/__tests__/toggle-fullscreen.spec.js       | 6 +++---
 .../app/App/Components/Layout/Footer/toggle-fullscreen.jsx  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-fullscreen.spec.js b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-fullscreen.spec.js
index e511b8ca9ccb..c751d4853172 100644
--- a/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-fullscreen.spec.js
+++ b/src/javascript/app/App/Components/Layout/Footer/__tests__/toggle-fullscreen.spec.js
@@ -15,7 +15,7 @@ describe('ToggleFullScreen', () => {
         expect(wrapper).to.have.length(1);
     });
     it('should call componentWillMount', () => {
-        mount(<ToggleFullScreen  />);
+        shallow(<ToggleFullScreen  />);
         expect(ToggleFullScreen.prototype.componentDidMount).to.have.property('called', true);
     });
     it('should have .ic-fullscreen', () => {
@@ -40,13 +40,13 @@ describe('ToggleFullScreen', () => {
         expect(wrapper.prop('onClick')).to.be.an.instanceof(Function);
     });
     it('should set is_full_screen equal to false in state, after onclick, when is_full_screen is false and there is no browser', () => {
-        const wrapper = mount(<ToggleFullScreen />);
+        const wrapper = shallow(<ToggleFullScreen />);
         wrapper.setState({ is_full_screen: false });
         wrapper.find('a').prop('onClick')({stopPropagation: () => {}});
         expect(wrapper.state().is_full_screen).to.be.false;
     });
     it('should set is_full_screen equal to false in state, after onclick, when is_full_screen is true and there is no browser', () => {
-        const wrapper = mount(<ToggleFullScreen />);
+        const wrapper = shallow(<ToggleFullScreen />);
         wrapper.setState({ is_full_screen: true });
         wrapper.find('a').prop('onClick')({stopPropagation: () => {}});
         expect(wrapper.state().is_full_screen).to.be.false;
diff --git a/src/javascript/app/App/Components/Layout/Footer/toggle-fullscreen.jsx b/src/javascript/app/App/Components/Layout/Footer/toggle-fullscreen.jsx
index 19525df5d990..9f75a6a6ad9a 100644
--- a/src/javascript/app/App/Components/Layout/Footer/toggle-fullscreen.jsx
+++ b/src/javascript/app/App/Components/Layout/Footer/toggle-fullscreen.jsx
@@ -1,6 +1,6 @@
-import classNames       from 'classnames';
-import React            from 'react';
-import Icon             from 'Assets/icon.jsx';
+import classNames from 'classnames';
+import React      from 'react';
+import Icon       from 'Assets/icon.jsx';
 
 class ToggleFullScreen extends React.Component {
     constructor(props) {

From 5c5184ab23abc94d758b187043d3cdc7b2ea2f62 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Wed, 5 Jun 2019 16:46:23 +0800
Subject: [PATCH 17/19] fix import spaces

---
 .../app/App/Components/Layout/Footer/toggle-positions.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/javascript/app/App/Components/Layout/Footer/toggle-positions.jsx b/src/javascript/app/App/Components/Layout/Footer/toggle-positions.jsx
index 56db21d15130..7ce91fe82ee7 100644
--- a/src/javascript/app/App/Components/Layout/Footer/toggle-positions.jsx
+++ b/src/javascript/app/App/Components/Layout/Footer/toggle-positions.jsx
@@ -1,7 +1,7 @@
-import classNames        from 'classnames';
-import PropTypes         from 'prop-types';
-import React             from 'react';
-import Icon              from 'Assets/icon.jsx';
+import classNames from 'classnames';
+import PropTypes  from 'prop-types';
+import React      from 'react';
+import Icon       from 'Assets/icon.jsx';
 
 const TogglePositions = ({
     positions_count,

From 6196001c9a4b3a70bbe1c25f0db2784a5d999acd Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Wed, 5 Jun 2019 16:49:49 +0800
Subject: [PATCH 18/19] timepicker : add return statements that got forgotten
 :skull:

---
 src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js b/src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js
index 2cac8d964748..1277bc7ac24a 100644
--- a/src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js
+++ b/src/javascript/app/Stores/Modules/Trading/Helpers/end-time.js
@@ -9,10 +9,10 @@ export const getSelectedTime = (
     market_open_time,
 ) => {
     if (selected_time.isAfter(market_open_time)) {
-        getClosestTime(selected_time, 5).format('HH:mm');
+        return getClosestTime(selected_time, 5).format('HH:mm');
     }
     if (market_open_time.isAfter(server_time)) {
-        getClosestTime(market_open_time, 5).format('HH:mm');
+        return getClosestTime(market_open_time, 5).format('HH:mm');
     }
 
     return getClosestTime(server_time, 5).format('HH:mm');

From 4af772ce1020ecda7dd46e44edef577e59327488 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Mon, 10 Jun 2019 16:13:23 +0800
Subject: [PATCH 19/19] removed redundant withdrawal and deposit icons and use
 the proper one

---
 .../app/Assets/Common/icon-deposit.jsx          |  2 +-
 .../app/Assets/Common/icon-withdrawal.jsx       |  2 +-
 .../app/Assets/Statement/icon-deposit.jsx       | 17 -----------------
 .../app/Assets/Statement/icon-withdrawal.jsx    | 17 -----------------
 src/javascript/app/Assets/icon.jsx              | 12 ++++++------
 5 files changed, 8 insertions(+), 42 deletions(-)
 delete mode 100644 src/javascript/app/Assets/Statement/icon-deposit.jsx
 delete mode 100644 src/javascript/app/Assets/Statement/icon-withdrawal.jsx

diff --git a/src/javascript/app/Assets/Common/icon-deposit.jsx b/src/javascript/app/Assets/Common/icon-deposit.jsx
index 2417060258e7..eae07022d0b7 100644
--- a/src/javascript/app/Assets/Common/icon-deposit.jsx
+++ b/src/javascript/app/Assets/Common/icon-deposit.jsx
@@ -12,4 +12,4 @@ const IconDeposit = ({ className }) => (
     </svg>
 );
 
-export { IconDeposit };
+export default IconDeposit;
diff --git a/src/javascript/app/Assets/Common/icon-withdrawal.jsx b/src/javascript/app/Assets/Common/icon-withdrawal.jsx
index 07269bdb5b20..9b927f31afc9 100644
--- a/src/javascript/app/Assets/Common/icon-withdrawal.jsx
+++ b/src/javascript/app/Assets/Common/icon-withdrawal.jsx
@@ -12,4 +12,4 @@ const IconWithdrawal = ({ className }) => (
     </svg>
 );
 
-export { IconWithdrawal };
+export default IconWithdrawal;
diff --git a/src/javascript/app/Assets/Statement/icon-deposit.jsx b/src/javascript/app/Assets/Statement/icon-deposit.jsx
deleted file mode 100644
index d3233829b9f5..000000000000
--- a/src/javascript/app/Assets/Statement/icon-deposit.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import classNames from 'classnames';
-import PropTypes  from 'prop-types';
-import React      from 'react';
-
-const IconDeposit = ({ className }) => (
-    <svg className={classNames('inline-icon', className)} width='16' height='16' viewBox='0 0 16 16'>
-        <path className='color1-fill' d='M8.5 11.413l2.675-2.293a.5.5 0 0 1 .65.76l-3.497 2.998a.498.498 0 0 1-.656 0L4.175 9.88a.5.5 0 1 1 .65-.76L7.5 11.413V1.5a.5.5 0 0 1 1 0v9.913zM14 14v-2.5a.5.5 0 1 1 1 0v3a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-3a.5.5 0 1 1 1 0V14h12z' fill='#4CAF50' />
-    </svg>
-);
-
-IconDeposit.propTypes = {
-    className    : PropTypes.string,
-    classNamePath: PropTypes.string,
-    onClick      : PropTypes.func,
-};
-
-export default IconDeposit;
diff --git a/src/javascript/app/Assets/Statement/icon-withdrawal.jsx b/src/javascript/app/Assets/Statement/icon-withdrawal.jsx
deleted file mode 100644
index 7117bfa00d76..000000000000
--- a/src/javascript/app/Assets/Statement/icon-withdrawal.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import classNames from 'classnames';
-import PropTypes  from 'prop-types';
-import React      from 'react';
-
-const IconWithdrawal = ({ className }) => (
-    <svg className={classNames('inline-icon', className)} width='16' height='16' viewBox='0 0 16 16'>
-        <path className='color1-fill' d='M7.672 1.122a.498.498 0 0 1 .656 0l3.497 2.998a.5.5 0 1 1-.65.76L8.5 2.587V12.5a.5.5 0 1 1-1 0V2.587L4.825 4.88a.5.5 0 1 1-.65-.76l3.497-2.998zM14 14v-2.5a.5.5 0 1 1 1 0v3a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-3a.5.5 0 1 1 1 0V14h12z' fill='#F44336' />
-    </svg>
-);
-
-IconWithdrawal.propTypes = {
-    className    : PropTypes.string,
-    classNamePath: PropTypes.string,
-    onClick      : PropTypes.func,
-};
-
-export default IconWithdrawal;
diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
index 97fc6bead1db..208f2a90ff3d 100644
--- a/src/javascript/app/Assets/icon.jsx
+++ b/src/javascript/app/Assets/icon.jsx
@@ -21,6 +21,7 @@ class Icon extends React.PureComponent {
             IconClose             : React.lazy(() => import('./Common/icon-close.jsx')),
             IconCountryFlag       : React.lazy(() => import('./Common/icon-country-flag.jsx')),
             IconDanger            : React.lazy(() => import('./Common/icon-danger.jsx')),
+            IconDeposit           : React.lazy(() => import('./Common/icon-deposit.jsx')),
             IconExclamation       : React.lazy(() => import('./Common/icon-exclamation.jsx')),
             IconFlag              : React.lazy(() => import('./Common/icon-flag.jsx')),
             IconInfoBlue          : React.lazy(() => import('./Common/icon-info-blue.jsx')),
@@ -34,6 +35,7 @@ class Icon extends React.PureComponent {
             IconSuccess           : React.lazy(() => import('./Common/icon-success.jsx')),
             IconWarning           : React.lazy(() => import('./Common/icon-warning.jsx')),
             IconWip               : React.lazy(() => import('./Common/icon-wip.jsx')),
+            IconWithdrawal        : React.lazy(() => import('./Common/icon-withdrawal.jsx')),
             
             // Contract
             ContractIconClose: React.lazy(() => import('./Contract/icon-close.jsx')),
@@ -71,12 +73,10 @@ class Icon extends React.PureComponent {
             IconTheme        : React.lazy(() => import('./Settings/icon-theme.jsx')),
 
             // Statement
-            IconBuy       : React.lazy(() => import('./Statement/icon-buy.jsx')),
-            IconDeposit   : React.lazy(() => import('./Statement/icon-deposit.jsx')),
-            IconPayout    : React.lazy(() => import('./Statement/icon-payout.jsx')),
-            IconSell      : React.lazy(() => import('./Statement/icon-sell.jsx')),
-            IconWallet    : React.lazy(() => import('./Statement/icon-wallet.jsx')),
-            IconWithdrawal: React.lazy(() => import('./Statement/icon-withdrawal.jsx')),
+            IconBuy   : React.lazy(() => import('./Statement/icon-buy.jsx')),
+            IconPayout: React.lazy(() => import('./Statement/icon-payout.jsx')),
+            IconSell  : React.lazy(() => import('./Statement/icon-sell.jsx')),
+            IconWallet: React.lazy(() => import('./Statement/icon-wallet.jsx')),
 
             // Trading
             IconBarrierDown   : React.lazy(() => import('./Trading/Barriers/icon-barrier-down.jsx')),