fix icons

icons/arrows/left.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9.535 9.293c-.63.63-.184 1.707.707 1.707H19a1 1 0 0 1 0 2h-8.758c-.89 0-1.337 1.077-.707 1.707l2.95 2.95a1 1 0 1 1-1.414 1.414l-6.364-6.364a1 1 0 0 1 0-1.414l6.364-6.364a1 1 0 1 1 1.414 1.414l-2.95 2.95Z" fill="currentColor"/>
-</svg>

icons/arrows/right-mini.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12.465 12.707a1 1 0 0 0 0-1.414L8.929 7.757a1 1 0 1 1 1.414-1.414l4.95 4.95a1 1 0 0 1 0 1.414l-4.95 4.95a1 1 0 1 1-1.414-1.414l3.536-3.536Z" fill="currentColor"/>
-</svg>

icons/external-link.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="m10.67 6.276-5.267 5.267a.667.667 0 0 1-.943-.943l5.266-5.267h-4.39a.667.667 0 1 1 0-1.333h6.667v6.667a.667.667 0 0 1-1.334 0V6.276Z" fill="currentColor"/>
-</svg>

ui/pages/Transaction.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
-import leftArrowIcon from 'icons/arrows/left.svg';
+import eastArrowIcon from 'icons/arrows/east.svg';
 import useLink from 'lib/link/useLink';
 import ExternalLink from 'ui/shared/ExternalLink';
 import Page from 'ui/shared/Page';
@@ -34,7 +34,7 @@ const TransactionPageContent = ({ tab }: Props) => {
     <Page>
       { /* TODO should be shown only when navigating from txs list */ }
       <Link mb={ 6 } display="inline-flex" href={ link('txs') }>
-        <Icon as={ leftArrowIcon } boxSize={ 6 } mr={ 2 }/>
+        <Icon as={ eastArrowIcon } boxSize={ 6 } mr={ 2 } transform="rotate(180deg)"/>
         Transactions
       </Link>
       <PageHeader text="Transaction details"/>

ui/shared/ExternalLink.tsx

@@ -1,7 +1,7 @@
 import { Link, Icon } from '@chakra-ui/react';
 import React from 'react';
 
-import externalLinkIcon from 'icons/external-link.svg';
+import arrowIcon from 'icons/arrows/north-east.svg';
 
 interface Props {
   href: string;
@@ -12,7 +12,7 @@ const ExternalLink = ({ href, title }: Props) => {
   return (
     <Link fontSize="sm" display="inline-flex" alignItems="center" target="_blank" href={ href }>
       { title }
-      <Icon as={ externalLinkIcon }/>
+      <Icon as={ arrowIcon } boxSize={ 4 }/>
     </Link>
   );
 };

ui/shared/PrevNext.tsx

@@ -1,8 +1,7 @@
 import { Box, Icon, IconButton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import leftArrow from 'icons/arrows/left-mini.svg';
-import rightArrow from 'icons/arrows/right-mini.svg';
+import eastArrow from 'icons/arrows/east-mini.svg';
 
 interface Props {
   className?: string;
@@ -13,7 +12,7 @@ const PrevNext = ({ className }: Props) => {
     <Box className={ className }>
       <IconButton
         aria-label="prev"
-        icon={ <Icon as={ leftArrow } boxSize={ 6 }/> }
+        icon={ <Icon as={ eastArrow } boxSize={ 6 }/> }
         h={ 6 }
         borderRadius="sm"
         variant="subtle"
@@ -21,7 +20,7 @@ const PrevNext = ({ className }: Props) => {
       />
       <IconButton
         aria-label="next"
-        icon={ <Icon as={ rightArrow }boxSize={ 6 }/> }
+        icon={ <Icon as={ eastArrow }boxSize={ 6 } transform="rotate(180deg)"/> }
         h={ 6 }
         borderRadius="sm"
         variant="subtle"

ui/tx/internals/TxInternalsListItem.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type ArrayElement from 'types/utils/ArrayElement';
 
 import type { data } from 'data/txInternal';
-import rightArrowIcon from 'icons/arrows/right.svg';
+import eastArrowIcon from 'icons/arrows/east.svg';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -26,7 +26,7 @@ const TxInternalsListItem = ({ type, status, from, to, value, gasLimit }: Props)
           <AddressIcon hash={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from }/>
         </Address>
-        <Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500"/>
+        <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         <Address width="calc((100% - 48px) / 2)">
           <AddressIcon hash={ to }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to }/>