Use the common currencies icons instead of local ones

src/components/DashboardPage/AccountCard.js

@@ -1,11 +1,10 @@
 // @flow
 
 import React from 'react'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
 import type { Account } from 'types/common'
 
-import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
-
 import { AreaChart } from 'components/base/Chart'
 import Bar from 'components/base/Bar'
 import Box, { Card } from 'components/base/Box'
@@ -19,11 +18,13 @@ const AccountCard = ({
   account: Account,
   data: Array<Object>,
   onClick: Function,
-}) => (
+}) => {
+  const Icon = getIconByCoinType(account.currency.coinType)
+  return (
     <Card p={4} flow={4} flex={1} style={{ cursor: 'pointer' }} onClick={onClick}>
       <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
         <Box alignItems="center" justifyContent="center" style={{ color: '#fcb653' }}>
-        <IconCurrencyBitcoin height={20} width={20} />
+          {Icon && <Icon size={20} />}
         </Box>
         <Box>
           <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="warmGrey">
@@ -57,5 +58,6 @@ const AccountCard = ({
       />
     </Card>
   )
+}
 
 export default AccountCard

src/components/SideBar/index.js

@@ -5,6 +5,7 @@ import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
 import { MODAL_SEND, MODAL_RECEIVE, MODAL_ADD_ACCOUNT } from 'constants'
 
@@ -19,7 +20,6 @@ import IconArrowDown from 'icons/ArrowDown'
 import IconArrowUp from 'icons/ArrowUp'
 import IconSettings from 'icons/Settings'
 import IconPlus from 'icons/Plus'
-import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
 
 import Box, { Tabbable } from 'components/base/Box'
 import FormattedVal from 'components/base/FormattedVal'
@@ -99,7 +99,9 @@ class SideBar extends PureComponent<Props> {
               </Tooltip>
             </CapsSubtitle>
             <GrowScroll pb={4} px={4} flow={2}>
-              {accounts.map(account => (
+              {accounts.map(account => {
+                const Icon = getIconByCoinType(account.currency.coinType)
+                return (
                   <Item
                     big
                     desc={
@@ -111,14 +113,15 @@ class SideBar extends PureComponent<Props> {
                         val={account.data ? account.data.balance : 0}
                       />
                     }
-                  iconActiveColor="#fcb653"
-                  icon={<IconCurrencyBitcoin height={16} width={16} />}
+                    iconActiveColor={account.currency.color}
+                    icon={Icon ? <Icon size={16} /> : null}
                     key={account.id}
                     linkTo={`/account/${account.id}`}
                   >
                     {account.name}
                   </Item>
-              ))}
+                )
+              })}
             </GrowScroll>
           </Box>
         </Box>

src/components/TransactionsList/index.js

@@ -6,6 +6,7 @@ import moment from 'moment'
 import get from 'lodash/get'
 import noop from 'lodash/noop'
 import isEqual from 'lodash/isEqual'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
 import type { Transaction as TransactionType } from 'types/common'
 
@@ -14,8 +15,6 @@ import Defer from 'components/base/Defer'
 import FormattedVal from 'components/base/FormattedVal'
 import Text from 'components/base/Text'
 
-import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
-
 const DATE_COL_SIZE = 80
 const ACCOUNT_COL_SIZE = 150
 const AMOUNT_COL_SIZE = 150
@@ -79,6 +78,7 @@ const Transaction = ({
   tx: TransactionType,
 }) => {
   const time = moment(tx.received_at)
+  const Icon = getIconByCoinType(tx.account.currency.coinType)
   return (
     <TransactionRaw>
       <Cell size={DATE_COL_SIZE} justifyContent="space-between">
@@ -96,7 +96,7 @@ const Transaction = ({
           onClick={() => onAccountClick && onAccountClick(tx.account)}
         >
           <Box alignItems="center" justifyContent="center" style={{ color: '#fcb653' }}>
-            <IconCurrencyBitcoin height={16} width={16} />
+            {Icon && <Icon size={16} />}
           </Box>
           <Box ff="Open Sans|SemiBold" fontSize={4} color="dark">
             {tx.account.name}

src/icons/currencies/Bitcoin.js

@@ -1,10 +0,0 @@
-import React from 'react'
-
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
-    <path
-      fill="currentColor"
-      d="M7.61970553 0h1.70000005v3.05846154H7.61970553V0zm1.70000005 0v3.05846154H7.61970553V0h1.70000005zM7.81303887 12.9415385h1.70000004V16H7.81303887v-3.0584615zm1.70000004 0V16H7.81303887v-3.0584615h1.70000004zM4.4063722 0h1.70000005v3.05846154H4.4063722V0zm1.70000005 0v3.05846154H4.4063722V0h1.70000005zM4.59970553 12.9415385h1.70000005V16H4.59970553v-3.0584615zm1.70000005 0V16H4.59970553v-3.0584615h1.70000005zM2.6663722 8.81307695V1.94999998h.85000002l6.13827333.00156806c1.80778725.10996034 3.21199965 1.5663186 3.11839335 3.25458581l-.0017039.27851419c.110634 1.74464117-1.2981636 3.21696546-3.16829611 3.32840891H2.6663722zm.85000002 0l.85000003-.85000003v4.31926938l5.60765891.000255c.95057664-.0249932 1.67559124-.7265334 1.65900774-1.5564475l.0002249-.3703244c.0187355-.81415185-.7068616-1.51805139-1.63689158-1.54275245h-6.48zm7.55666668-3.27461541l.0012684-.37872715c.042116-.77004688-.6196246-1.45636138-1.47126841-1.50973437H4.36637225v3.46311513l5.20484808.0002342c.89861507-.06354201 1.55224847-.7529014 1.50181857-1.57488781zM4.36637225 7.11311515l5.18540306.00150901c.00432951-.00026159.15996192-.00067981.46689729-.00125468 1.859875.04881191 3.3551536 1.49937703 3.3143663 3.26201512l-.0001732.3336104c.0359164 1.7788337-1.4578252 3.2242112-3.33649348 3.2733127H2.6663722V7.1130769h.85000002l.85000003.00003825zm0 .00017966v.84978211l-.85000003-.85000002.85000003.00021791z"
-    />
-  </svg>
-)