diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 482c91f08..1d246561c 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -45,7 +45,7 @@ import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt } from '@fortawesome/free-solid-svg-icons';
+  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { CodeTemplateComponent } from './components/api-docs/code-template.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@@ -136,5 +136,6 @@ export class AppModule {
     library.addIcons(faChevronDown);
     library.addIcons(faFileAlt);
     library.addIcons(faRedoAlt);
+    library.addIcons(faArrowAltCircleRight);
   }
 }
diff --git a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html
index 229e84dbc..0388ea418 100644
--- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html
+++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html
@@ -7,11 +7,13 @@
             <tr *ngIf="input.isVerified">
               <td class="arrow-td">
                 <ng-template [ngIf]="input.spendingTxId === null" [ngIfElse]="hasPreoutput">
-                  <i class="arrow grey"></i>
+                  <span class="grey">
+                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                  </span>
                 </ng-template>
                 <ng-template #hasPreoutput>
-                  <a [routerLink]="['/tx/' | relativeUrl, input.spendingTxId]">
-                    <i class="arrow red"></i>
+                  <a [routerLink]="['/tx/' | relativeUrl, input.spendingTxId]" class="red">
+                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                   </a>
                 </ng-template>
               </td>
@@ -44,10 +46,14 @@
               <td class="text-right nowrap">
                 <app-bsq-amount [bsq]="output.bsqAmount"></app-bsq-amount>
               </td>
-              <td class="pl-1 arrow-td">
-                <i *ngIf="!output.spentInfo; else spent" class="arrow green"></i>
+              <td class="arrow-td">
+                <span *ngIf="!output.spentInfo; else spent" class="green">
+                  <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                </span>
                 <ng-template #spent>
-                  <a [routerLink]="['/tx/' | relativeUrl, output.spentInfo.txId]"><i class="arrow red"></i></a>
+                  <a [routerLink]="['/tx/' | relativeUrl, output.spentInfo.txId]" class="red">
+                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                  </a>
                 </ng-template>
               </td>
             </tr>
diff --git a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss
index 123007d3f..bffd646d8 100644
--- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss
+++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss
@@ -1,62 +1,26 @@
+
 .arrow-td {
-	width: 22px;
+	width: 20px;
 }
-
-.arrow {
-	display: inline-block!important;
+.green, .grey, .red {
+	font-size: 16px;
+    top: -2px;
 	position: relative;
-	width: 14px;
-	height: 22px;
-	box-sizing: content-box
+	@media( min-width: 576px){
+		font-size: 19px;
+	}
 }
 
-.arrow:before {
-	position: absolute;
-	content: '';
-	margin: auto;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: calc(-1*30px/3);
-	width: 0;
-  height: 0;
-	border-top: 6.66px solid transparent;
-  border-bottom: 6.66px solid transparent
+.green {
+  	color:#28a745;
 }
 
-.arrow:after {
-	position: absolute;
-	content: '';
-	margin: auto;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: calc(30px/6);
-	width: calc(30px/3);
-	height: calc(20px/3);
-	background: rgba(0, 0, 0, 0);
+.red {
+  	color:#dc3545;
 }
 
-.arrow.green:before {
-  border-left: 10px solid #28a745;
-}
-.arrow.green:after {
-  background-color:#28a745;
-}
-
-.arrow.red:before {
-  border-left: 10px solid #dc3545;
-}
-.arrow.red:after {
-  background-color:#dc3545;
-}
-
-.arrow.grey:before {
-  border-left: 10px solid #6c757d;
-}
-
-.arrow.grey:after {
-  background-color:#6c757d;
+.grey {
+  	color:#6c757d;
 }
 
 @media (max-width: 767.98px) {
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 20dee92e5..f445e1b20 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -18,21 +18,23 @@
     <div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
     <div class="row">
       <div class="col">
-        <table class="table table-borderless smaller-text table-sm" style="margin: 0;" id="table-tx-vin">
+        <table class="table table-borderless smaller-text table-sm" id="table-tx-vin">
           <tbody>
             <ng-template ngFor let-vin [ngForOf]="tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="assetsMinimal && assetsMinimal[vin.prevout.asset] && vin.prevout.scriptpubkey_address ? 'assetBox' : ''">
                 <td class="arrow-td">
                   <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
-                    <i class="arrow grey"></i>
+                    <span class="grey">
+                      <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                    </span>
                   </ng-template>
                   <ng-template #hasPrevout>
-                    <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
-                      <i class="arrow red"></i>
+                    <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]" class="red">
+                      <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                     </a>
                     <ng-template #defaultPrevout>
-                      <a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
-                        <i class="arrow red"></i>
+                      <a [routerLink]="['/tx/' | relativeUrl, vin.txid]" class="red">
+                        <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                       </a>
                     </ng-template>
                   </ng-template>
@@ -117,7 +119,7 @@
       </div>
       <div class="w-100 d-block d-md-none"></div>
       <div class="col mobile-bottomcol">
-        <table class="table table-borderless smaller-text table-sm"  style="margin: 0;" id="table-tx-vout">
+        <table class="table table-borderless smaller-text table-sm"  id="table-tx-vout">
           <tbody>
             <ng-template ngFor let-vout let-vindex="index"  [ngForOf]="tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address ? 'assetBox' : ''">
@@ -154,12 +156,18 @@
                     <app-amount [satoshis]="vout.value"></app-amount>
                   </ng-template>
                 </td>
-                <td class="pl-1 arrow-td">
-                  <i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
+                <td class="arrow-td">
+                  <span *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="grey">
+                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                  </span>
                   <ng-template #outspend>
-                    <i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
+                    <span *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="green">
+                      <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                    </span>
                     <ng-template #spent>
-                      <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
+                      <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]" class="red">
+                        <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
+                      </a>
                     </ng-template>
                   </ng-template>
                 </td>
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index b85069650..42da648d6 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -1,63 +1,25 @@
+
 .arrow-td {
-	width: 22px;
+	width: 20px;
+}
+.green, .grey, .red {
+	font-size: 16px;
+    top: -2px;
+	position: relative;
+	@media( min-width: 576px){
+		font-size: 19px;
+	}
+}
+.green {
+  	color:#28a745;
 }
 
-.arrow {
-	display: inline-block!important;
-	position: absolute;
-	width: 14px;
-	margin-top: 10px;
-	margin-left: -5px;
-	box-sizing: content-box
+.red {
+  	color:#dc3545;
 }
 
-.arrow:before {
-	position: absolute;
-	content: '';
-	margin: auto;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: calc(-1*30px/3);
-	width: 0;
-  	height: 0;
-	border-top: 6.66px solid transparent;
-  	border-bottom: 6.66px solid transparent
-}
-
-.arrow:after {
-	position: absolute;
-	content: '';
-	margin: auto;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: calc(30px/6);
-	width: calc(30px/3);
-	height: calc(20px/3);
-	background: rgba(0, 0, 0, 0);
-}
-
-.arrow.green:before {
-  	border-left: 10px solid #28a745;
-}
-.arrow.green:after {
-  	background-color:#28a745;
-}
-
-.arrow.red:before {
-  	border-left: 10px solid #dc3545;
-}
-.arrow.red:after {
-  	background-color:#dc3545;
-}
-
-.arrow.grey:before {
-  	border-left: 10px solid #6c757d;
-}
-
-.arrow.grey:after {
-  	background-color:#6c757d;
+.grey {
+  	color:#6c757d;
 }
 
 .mobile-bottomcol {