diff --git a/src/app/about/about.component.css b/src/app/about/about.component.css
index 1ed79d1..4953840 100644
--- a/src/app/about/about.component.css
+++ b/src/app/about/about.component.css
@@ -35,8 +35,8 @@
     text-transform: uppercase;
 }
 
-.about-background a.next svg path {
-    fill: var(--portal-main-color);
+.about-background a.next svg {
+    fill: currentColor;
 }
 
 .about-background a.next:hover {
diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
index 604b93f..7356f93 100644
--- a/src/app/about/about.component.html
+++ b/src/app/about/about.component.html
@@ -11,14 +11,7 @@
     </div>
     <a class="uk-visible@l next uk-flex uk-flex-middle" (click)="goTo('architecture')">
       Architecture
-      <svg height="17.155" viewBox="0 0 17.155 17.155" width="17.155" class="uk-margin-left"
-           xmlns="http://www.w3.org/2000/svg">
-        <g data-name="Group 2442" id="Group_2442" transform="translate(-1221 -675)">
-          <path
-              d="M14.405,4.3,6.022,12.68V9.055A1.011,1.011,0,0,0,4,9.055V15.12a1.009,1.009,0,0,0,1.011,1.01h6.065a1.011,1.011,0,1,0,0-2.022H7.451l8.383-8.383A1.011,1.011,0,0,0,14.405,4.3h0Z"
-              fill="#e95420" id="arrow-down-left2" transform="translate(1215.343 683.578) rotate(-45)"></path>
-        </g>
-      </svg>
+      <icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
     </a>
     <div class="uk-hidden@l">
       <h2 class="uk-text-bold">About</h2>
diff --git a/src/app/about/about.module.ts b/src/app/about/about.module.ts
index 3bc44e5..9854e67 100644
--- a/src/app/about/about.module.ts
+++ b/src/app/about/about.module.ts
@@ -3,17 +3,23 @@ import {CommonModule} from "@angular/common";
 import {RouterModule} from "@angular/router";
 
 import {AboutComponent} from "./about.component";
+import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
+import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
+import {arrow_down} from '../openaireLibrary/utils/icons/icons';
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule.forChild([{
       path: '', component: AboutComponent
-    }])
+    }]),
+    IconsModule
   ],
   declarations: [AboutComponent],
   exports: [AboutComponent]
 })
 export class AboutModule {
-
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([arrow_down]);
+  }
 }
diff --git a/src/app/analytics/analytics.component.css b/src/app/analytics/analytics.component.css
index ae8a85f..70c4431 100644
--- a/src/app/analytics/analytics.component.css
+++ b/src/app/analytics/analytics.component.css
@@ -18,6 +18,14 @@
   z-index: 1;
 }
 
+.countries a.next svg {
+  fill: currentColor
+}
+
+.countries a.next:hover {
+  color: var(--portal-dark-color);
+}
+
 .countries input, .countries input:focus {
   background: transparent 0 0 no-repeat padding-box;
   border-radius: 4px;
diff --git a/src/app/analytics/analytics.component.html b/src/app/analytics/analytics.component.html
index 7153f09..ee5f918 100644
--- a/src/app/analytics/analytics.component.html
+++ b/src/app/analytics/analytics.component.html
@@ -2,14 +2,7 @@
   <div *ngIf="countryFb" class="uk-container uk-text-center countries">
     <a class="uk-visible@l next uk-flex uk-flex-middle uk-text-uppercase" (click)="goTo('graph-analysis')">
       Graph Analysis
-      <svg height="17.155" viewBox="0 0 17.155 17.155" width="17.155" class="uk-margin-left"
-           xmlns="http://www.w3.org/2000/svg">
-        <g data-name="Group 2442" id="Group_2442" transform="translate(-1221 -675)">
-          <path
-              d="M14.405,4.3,6.022,12.68V9.055A1.011,1.011,0,0,0,4,9.055V15.12a1.009,1.009,0,0,0,1.011,1.01h6.065a1.011,1.011,0,1,0,0-2.022H7.451l8.383-8.383A1.011,1.011,0,0,0,14.405,4.3h0Z"
-              fill="#e95420" id="arrow-down-left2" transform="translate(1215.343 683.578) rotate(-45)"></path>
-        </g>
-      </svg>
+      <icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
     </a>
     <div class="uk-section uk-section-small">
       <h2 class="uk-margin-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
@@ -36,9 +29,9 @@
             <span (click)="toggle()">{{country}}</span>
             <span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
               <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
-                  fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
-                                                                                             stroke-width="1.06"
-                                                                                             d="M16,4 L4,16"></path></svg>
+                  fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
+                <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
+              </svg>
             </span>
           </span>
             </div>
diff --git a/src/app/analytics/analytics.module.ts b/src/app/analytics/analytics.module.ts
index ddb4c4d..bb27add 100644
--- a/src/app/analytics/analytics.module.ts
+++ b/src/app/analytics/analytics.module.ts
@@ -7,6 +7,9 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
+import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
+import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
+import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons';
 
 @NgModule({
   imports: [
@@ -17,11 +20,14 @@ import {MatInputModule} from '@angular/material/input';
     MatInputModule,
     RouterModule.forChild([{
       path: '', component: AnalyticsComponent
-    }])
+    }]),
+    IconsModule
   ],
   declarations: [AnalyticsComponent],
   exports: [AnalyticsComponent]
 })
 export class AnalyticsModule {
-
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([arrow_down]);
+  }
 }
diff --git a/src/app/resources/resources.component.css b/src/app/resources/resources.component.css
index af408a0..0fae0eb 100644
--- a/src/app/resources/resources.component.css
+++ b/src/app/resources/resources.component.css
@@ -38,8 +38,8 @@
     letter-spacing: 1.8px;
 }
 
-.provide-background a.next svg path {
-    fill: var(--portal-main-color);
+.provide-background a.next svg {
+    fill: currentColor;
 }
 
 .provide-background a.next:hover {
diff --git a/src/app/resources/resources.component.html b/src/app/resources/resources.component.html
index 7de3837..c10a4cf 100644
--- a/src/app/resources/resources.component.html
+++ b/src/app/resources/resources.component.html
@@ -29,25 +29,12 @@
         <div class="uk-flex uk-flex-center">
           <a class="uk-button uk-button-primary uk-margin-small-top" href="https://provide.openaire.eu" target="_blank">
             GO TO OpenAIRE PROVIDE
-            <span class="space">
-              <svg xmlns="http://www.w3.org/2000/svg" width="14.142" height="14.142" viewBox="0 0 14.142 14.142">
-                <path id="arrow-down-left2"
-                      d="M12.578,4.244,5.667,11.155V8.167A.833.833,0,1,0,4,8.167v5A.832.832,0,0,0,4.833,14h5a.833.833,0,0,0,0-1.667H6.845l6.911-6.911a.833.833,0,1,0-1.178-1.178h0Z"
-                      transform="translate(7.071 19.799) rotate(-135)" fill="#fff"/>
-              </svg>
-            </span>
+            <icon name="arrow_right" ratio="0.8" class="space"></icon>
           </a>
         </div>
         <a class="uk-visible@l next uk-flex uk-flex-middle" (click)="goTo('apis')">
           APIs AND REPORTS
-          <svg height="17.155" viewBox="0 0 17.155 17.155" width="17.155" class="uk-margin-left"
-               xmlns="http://www.w3.org/2000/svg">
-            <g data-name="Group 2442" id="Group_2442" transform="translate(-1221 -675)">
-              <path
-                  d="M14.405,4.3,6.022,12.68V9.055A1.011,1.011,0,0,0,4,9.055V15.12a1.009,1.009,0,0,0,1.011,1.01h6.065a1.011,1.011,0,1,0,0-2.022H7.451l8.383-8.383A1.011,1.011,0,0,0,14.405,4.3h0Z"
-                  fill="#e95420" id="arrow-down-left2" transform="translate(1215.343 683.578) rotate(-45)"></path>
-            </g>
-          </svg>
+          <icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
         </a>
       </div>
     </div>
diff --git a/src/app/resources/resources.module.ts b/src/app/resources/resources.module.ts
index ef24f8b..a31e1da 100644
--- a/src/app/resources/resources.module.ts
+++ b/src/app/resources/resources.module.ts
@@ -3,17 +3,23 @@ import {CommonModule} from "@angular/common";
 import {RouterModule} from "@angular/router";
 
 import {ResourcesComponent} from "./resources.component";
+import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
+import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons';
+import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule.forChild([{
       path: '', component: ResourcesComponent
-    }])
+    }]),
+    IconsModule
   ],
   declarations: [ResourcesComponent],
   exports: [ResourcesComponent]
 })
 export class ResourcesModule {
-
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([arrow_right, arrow_down]);
+  }
 }
diff --git a/src/styles.css b/src/styles.css
index f386947..3bf76cf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3,9 +3,6 @@
 @import "assets/common-assets/common/custom.css";
 @import "assets/common-assets/library.css";
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-@import "assets/common-assets/common/theme-changes.css";
-
 :root {
   --portal-main-color: #e95420;
   --portal-main-contrast: white;