diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 3f16f1938e..333ca2df5b 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -1,12 +1,20 @@
 # Changelog
 
-## \[10.10.1\] - 06.02.2024
+## \[10.10.1\] - xx.02.2024
 
 ## Component changes
 
 ### Non breaking UI changes
 
 - Icons migration step 2 (still non-breaking. But the migrations is decided and is happening, so move when you can. Silent support of Material-icons until next major version release).
+  - Toast icons are modified. Since Toast is created entirely via a script shipped in the package, nothing is requiring from devs consuming the package. But expect a change in the icon used by the Toast component.
+
+### NON Breaking UI changes BUT CAN & SHOULD modify code when have time
+
+- Tags
+  - the close icon is now a cross set via CSS only, no need to add an `<i>` element anymore
+- Dialog
+  - the close icon is now a cross set via CSS only, no need to add an `<i>` element anymore
 
 ## Maintenance
 
@@ -14,4 +22,4 @@
 
 ## Design System website
 
-- Migrated the icons used on the documentation website from Material-icons to a combination of Atlas and our own custom swepay-icons
+- Migrate icons used on the DS documentation website from Material-icons to Atlas + Swepay-icon custom icons
diff --git a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Chrome-darwin.png
index 9fd8fb3617..9c956768bb 100644
Binary files a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Safari-darwin.png
index 2fa00d9ea2..3b14ccd5b3 100644
Binary files a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-webkit-darwin.png
index 441b86103b..f6e353df2a 100644
Binary files a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap
index 7874655d42..c9f4913e17 100644
--- a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap
@@ -682,7 +682,7 @@ exports[`Components: ActionList renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-exclamation-triangle"
+        className="swepay-icon-error-triangle-filled"
       />
       <p>
         <b>
@@ -752,10 +752,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              bookmark
-            </i>
+              className="at-bookmark-star small"
+            />
             Add bookmark
           </a>
           
@@ -766,10 +764,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              business_center
-            </i>
+              className="at-business-suitcase small"
+            />
             Add client
           </a>
           
@@ -780,10 +776,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              add_circle
-            </i>
+              className="at-plus-circle small"
+            />
             Add document
           </a>
           
@@ -794,10 +788,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              person_add
-            </i>
+              className="at-user-plus small"
+            />
             Add user
           </a>
           
@@ -893,16 +885,16 @@ exports[`Components: ActionList renders 1`] = `
                       &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
                   
 
                       &lt;/div&gt;
@@ -976,10 +968,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              bookmark
-            </i>
+              className="at-bookmark-star small"
+            />
             Add bookmark
           </a>
           
@@ -990,10 +980,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              business_center
-            </i>
+              className="at-business-suitcase small"
+            />
             Add client
           </a>
           
@@ -1004,10 +992,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              add_circle
-            </i>
+              className="at-plus-circle small"
+            />
             Add document
           </a>
           
@@ -1018,10 +1004,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              person_add
-            </i>
+              className="at-user-plus small"
+            />
             Add user
           </a>
           
@@ -1117,16 +1101,16 @@ exports[`Components: ActionList renders 1`] = `
                       &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
                   
 
                       &lt;/div&gt;
@@ -1192,10 +1176,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              bookmark
-            </i>
+              className="at-bookmark-star small"
+            />
             Add bookmark
           </a>
           
@@ -1206,10 +1188,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              business_center
-            </i>
+              className="at-business-suitcase small"
+            />
             Add client
           </a>
           
@@ -1220,10 +1200,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              add_circle
-            </i>
+              className="at-plus-circle small"
+            />
             Add document
           </a>
           
@@ -1234,10 +1212,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              person_add
-            </i>
+              className="at-user-plus small"
+            />
             Add user
           </a>
           
@@ -1333,16 +1309,16 @@ exports[`Components: ActionList renders 1`] = `
                       &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
                   
 
                       &lt;/div&gt;
@@ -1408,10 +1384,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              bookmark
-            </i>
+              className="at-bookmark-star small"
+            />
             Add bookmark
           </a>
           
@@ -1422,10 +1396,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              business_center
-            </i>
+              className="at-business-suitcase small"
+            />
             Add client
           </a>
           
@@ -1436,10 +1408,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              add_circle
-            </i>
+              className="at-plus-circle small"
+            />
             Add document
           </a>
           
@@ -1450,10 +1420,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              person_add
-            </i>
+              className="at-user-plus small"
+            />
             Add user
           </a>
           
@@ -1549,16 +1517,16 @@ exports[`Components: ActionList renders 1`] = `
                       &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
                   
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
                   
 
                       &lt;/div&gt;
diff --git a/src/App/ComponentsDocumentation/components/ActionList/index.js b/src/App/ComponentsDocumentation/components/ActionList/index.js
index 8b6ea1a31d..4587164441 100644
--- a/src/App/ComponentsDocumentation/components/ActionList/index.js
+++ b/src/App/ComponentsDocumentation/components/ActionList/index.js
@@ -11,19 +11,19 @@ import NpmInformation from "@docutils/NpmInformation";
 const items = [
 	{
 		name: "Add bookmark",
-		icon: "bookmark",
+		icon: "at-bookmark-star",
 	},
 	{
 		name: "Add client",
-		icon: "business_center",
+		icon: "at-business-suitcase",
 	},
 	{
 		name: "Add document",
-		icon: "add_circle",
+		icon: "at-plus-circle",
 	},
 	{
 		name: "Add user",
-		icon: "person_add",
+		icon: "at-user-plus",
 	},
 ];
 
@@ -87,7 +87,7 @@ const ActionList = () => {
 		<DocContainer>
 			<Alert
 				type="danger"
-				icon="exclamation-triangle"
+				icon="swepay-icon-error-triangle-filled"
 				text={
 					<p>
 						<b>Deprecated:</b> Be aware, this component will not be maintained
diff --git a/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap
index 520ef4159f..63641309fe 100644
--- a/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap
@@ -20,7 +20,7 @@ exports[`Documentation: Alerts Content guidelines renders 1`] = `
 
         <i
           aria-hidden="true"
-          className="at-info-circle"
+          className="swepay-icon-info-circle-filled"
         />
         <p>
           <b>
diff --git a/src/App/ComponentsDocumentation/components/Alerts/constants.js b/src/App/ComponentsDocumentation/components/Alerts/constants.js
index 1925138029..4382433d8c 100644
--- a/src/App/ComponentsDocumentation/components/Alerts/constants.js
+++ b/src/App/ComponentsDocumentation/components/Alerts/constants.js
@@ -17,7 +17,7 @@ export const alertsShowCase = {
 			component: (
 				<Alert
 					type="danger"
-					icon="exclamation-triangle"
+					icon="swepay-icon-error-triangle-filled"
 					text={titleBuilder("Danger")}
 				/>
 			),
@@ -44,7 +44,11 @@ export const alertsShowCase = {
 		{
 			tab: "Warning",
 			component: (
-				<Alert type="warning" icon="warning" text={titleBuilder("Warning")} />
+				<Alert
+					type="warning"
+					icon="swepay-icon-warning-triangle-filled"
+					text={titleBuilder("Warning")}
+				/>
 			),
 			options: {
 				checkbox: [
@@ -71,7 +75,7 @@ export const alertsShowCase = {
 			component: (
 				<Alert
 					type="informative"
-					icon="info-circle"
+					icon="swepay-icon-info-circle-filled"
 					text={titleBuilder("Informative")}
 				/>
 			),
@@ -100,7 +104,7 @@ export const alertsShowCase = {
 			component: (
 				<Alert
 					type="success"
-					icon="check-circle"
+					icon="swepay-icon-check-circle-filled"
 					text={titleBuilder("Success")}
 				/>
 			),
diff --git a/src/App/ComponentsDocumentation/components/Alerts/index.js b/src/App/ComponentsDocumentation/components/Alerts/index.js
index 6050ca779a..b975219855 100644
--- a/src/App/ComponentsDocumentation/components/Alerts/index.js
+++ b/src/App/ComponentsDocumentation/components/Alerts/index.js
@@ -58,7 +58,7 @@ const HowTo = () => (
 			<span className="h3">Do</span>
 			<Alert
 				type="informative"
-				icon="info-circle"
+				icon="swepay-icon-info-circle-filled"
 				text={
 					<p>
 						<b>Best practices:</b> To minimize the risk for a challenge request,
@@ -69,7 +69,7 @@ const HowTo = () => (
 			/>
 			<Alert
 				type="warning"
-				icon="warning"
+				icon="swepay-icon-warning-triangle-filled"
 				text={
 					<p>
 						<b>GDPR sensitive data:</b> If it is necessary to use GDPR sensitive
@@ -90,7 +90,7 @@ const HowTo = () => (
 				<div className="flex-fill mr-1">
 					<Alert
 						type="informative"
-						icon="info-circle"
+						icon="swepay-icon-info-circle-filled"
 						text={
 							<p>
 								<b>Best practices:</b> To minimize the risk for a challenge
@@ -103,7 +103,7 @@ const HowTo = () => (
 				<div className="flex-fill ml-1">
 					<Alert
 						type="warning"
-						icon="warning"
+						icon="swepay-icon-warning-triangle-filled"
 						text={
 							<p>
 								<b>GDPR sensitive data:</b> If it is necessary to use GDPR
@@ -137,7 +137,7 @@ const ContentGuidelines = () => (
 			<div className="d-flex justify-content-center align-items-center pt-3">
 				<Alert
 					type="danger"
-					icon="info-circle"
+					icon="swepay-icon-info-circle-filled"
 					text={
 						<p>
 							<b>Error title:</b> Content text <a href="">link</a>
diff --git a/src/App/ComponentsDocumentation/components/Buttons/constants.js b/src/App/ComponentsDocumentation/components/Buttons/constants.js
index 50d35e1bb3..8f7a06cf4b 100644
--- a/src/App/ComponentsDocumentation/components/Buttons/constants.js
+++ b/src/App/ComponentsDocumentation/components/Buttons/constants.js
@@ -13,13 +13,13 @@ const ButtonOptions = (idAddOn) => ({
 				{
 					name: "Before",
 					value: {
-						icon: "cloud",
+						icon: "at-cloud-database",
 					},
 				},
 				{
 					name: "After",
 					value: {
-						icon: "keyboard_arrow_down",
+						icon: "swepay-icon-chevron-down",
 						iconAfter: true,
 					},
 				},
@@ -153,13 +153,13 @@ export const overviewButtons = {
 							{
 								name: "Before",
 								value: {
-									icon: "cloud",
+									icon: "at-cloud-database",
 								},
 							},
 							{
 								name: "After",
 								value: {
-									icon: "keyboard_arrow_down",
+									icon: "swepay-icon-chevron-down",
 									iconAfter: true,
 								},
 							},
@@ -225,7 +225,12 @@ export const overviewButtons = {
 		{
 			tab: "Icon only",
 			component: (
-				<ButtonComponent type="icon" icon="cloud" size="lg" iconOnly={true} />
+				<ButtonComponent
+					type="icon"
+					icon="at-cloud-database"
+					size="lg"
+					iconOnly={true}
+				/>
 			),
 			title: "Icon only button",
 			options: IconButtonOptions(),
diff --git a/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap
index 99ec93fec4..ea7d2bd791 100644
--- a/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap
@@ -225,10 +225,8 @@ Array [
                  
                 <i
                   aria-hidden="true"
-                  className="material-icons text-muted"
-                >
-                  verified_user
-                </i>
+                  className="at-check-shield text-muted"
+                />
                  
                 
 
@@ -599,7 +597,7 @@ Array [
                                     &lt;div class="media-img"&gt;
                 
 
-                                        &lt;i class="material-icons text-muted" aria-hidden="true"&gt;verified_user&lt;/i&gt;
+                                        &lt;i class="at-check-shield text-muted" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                     &lt;/div&gt;
@@ -864,10 +862,8 @@ Array [
                  
                 <i
                   aria-hidden="true"
-                  className="material-icons text-muted"
-                >
-                  account_balance
-                </i>
+                  className="at-building-column text-muted"
+                />
                  
                 
 
@@ -948,10 +944,8 @@ Array [
                  
                 <i
                   aria-hidden="true"
-                  className="material-icons text-muted"
-                >
-                  verified_user
-                </i>
+                  className="at-check-shield text-muted"
+                />
                  
                 
 
@@ -1311,7 +1305,7 @@ Array [
                                     &lt;div class="media-img"&gt;
                 
 
-                                        &lt;i class="material-icons text-muted" aria-hidden="true"&gt;account_balance&lt;/i&gt;
+                                        &lt;i class="at-building-column text-muted" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                     &lt;/div&gt;
@@ -1386,7 +1380,7 @@ Array [
                                     &lt;div class="media-img"&gt;
                 
 
-                                        &lt;i class="material-icons text-muted" aria-hidden="true"&gt;verified_user&lt;/i&gt;
+                                        &lt;i class="at-check-shield text-muted" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                     &lt;/div&gt;
diff --git a/src/App/ComponentsDocumentation/components/Card/constants.js b/src/App/ComponentsDocumentation/components/Card/constants.js
index 9edc727444..3c66f24f5f 100644
--- a/src/App/ComponentsDocumentation/components/Card/constants.js
+++ b/src/App/ComponentsDocumentation/components/Card/constants.js
@@ -14,14 +14,7 @@ export const overviewCards = {
 					titleTxt="Title"
 					type="primary"
 					text="Write the supportive paragraph here."
-					icon={
-						<i
-							className="material-icons material-icons-outlined"
-							aria-hidden="true"
-						>
-							shopping_basket
-						</i>
-					}
+					icon={<i className="at-shop-cart" aria-hidden="true"></i>}
 				/>
 			),
 			options: {
@@ -40,14 +33,7 @@ export const overviewCards = {
 								name: "With icon",
 								default: true,
 								value: {
-									icon: (
-										<i
-											className="material-icons material-icons-outlined"
-											aria-hidden="true"
-										>
-											shopping_basket
-										</i>
-									),
+									icon: <i className="at-shop-cart" aria-hidden="true"></i>,
 								},
 							},
 							{
diff --git a/src/App/ComponentsDocumentation/components/Card/index.js b/src/App/ComponentsDocumentation/components/Card/index.js
index 9b11bd6b05..39323e5141 100644
--- a/src/App/ComponentsDocumentation/components/Card/index.js
+++ b/src/App/ComponentsDocumentation/components/Card/index.js
@@ -128,7 +128,7 @@ const OldCard = () => (
 					>
 						<MediaObject
 							size="sm"
-							icon="verified_user"
+							icon="at-check-shield"
 							heading="75%"
 							text="Complete"
 							textSmall
@@ -197,7 +197,7 @@ const OldCard = () => (
 					>
 						<MediaObject
 							size="sm"
-							icon="account_balance"
+							icon="at-building-column"
 							heading="725 NOK"
 							text="Outstanding balance"
 							textSmall
@@ -215,7 +215,7 @@ const OldCard = () => (
 					>
 						<MediaObject
 							size="sm"
-							icon="verified_user"
+							icon="at-check-shield"
 							heading="75%"
 							text="Complete"
 							textSmall
diff --git a/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap
index be0de6a9ce..86f52b8dfb 100644
--- a/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap
@@ -2507,7 +2507,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-exclamation-triangle"
+        className="swepay-icon-error-triangle-filled"
       />
       <p>
         <b>
@@ -3311,7 +3311,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -3633,7 +3633,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -3859,7 +3859,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -4156,7 +4156,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -4481,7 +4481,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -4832,7 +4832,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -5069,7 +5069,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -5294,7 +5294,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -5615,7 +5615,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
@@ -5870,7 +5870,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle"
+        className="swepay-icon-info-circle-filled"
       />
       <p>
         <b>
diff --git a/src/App/ComponentsDocumentation/components/Charts/index.js b/src/App/ComponentsDocumentation/components/Charts/index.js
index dc95736600..26ddec43a1 100644
--- a/src/App/ComponentsDocumentation/components/Charts/index.js
+++ b/src/App/ComponentsDocumentation/components/Charts/index.js
@@ -9,7 +9,7 @@ import Alert from "@components/Alert";
 const AccessibilityAlert = () => (
 	<Alert
 		type="informative"
-		icon="info-circle"
+		icon="swepay-icon-info-circle-filled"
 		className="mt-3"
 		text={
 			<p>
@@ -838,7 +838,7 @@ const Charts = () => (
 	<DocContainer>
 		<Alert
 			type="danger"
-			icon="exclamation-triangle"
+			icon="swepay-icon-error-triangle-filled"
 			text={
 				<p>
 					<b>Deprecated:</b> Be aware, this component will not be maintained
diff --git a/src/App/ComponentsDocumentation/components/Checkbox/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Checkbox/__snapshots__/index.test.js.snap
index ee0d1293f8..4a11b9c429 100644
--- a/src/App/ComponentsDocumentation/components/Checkbox/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Checkbox/__snapshots__/index.test.js.snap
@@ -355,10 +355,9 @@ exports[`Component: Checkbox DeveloperDocumentation renders 1`] = `
               className="help-block"
             >
               <i
-                className="material-icons"
-              >
-                warning
-              </i>
+                aria-hidden="true"
+                className="swepay-icon-error-triangle-filled small"
+              />
               Descriptive helpful error message.
             </div>
             
@@ -506,7 +505,7 @@ exports[`Component: Checkbox DeveloperDocumentation renders 1`] = `
                           &lt;/div&gt;
                   
 
-                          &lt;div class="help-block"&gt;&lt;i class="material-icons"&gt;warning&lt;/i&gt;Descriptive helpful error message.&lt;/div&gt;
+                          &lt;div class="help-block"&gt;&lt;i class="swepay-icon-error-triangle-filled small" aria-hidden="true"&gt;&lt;/i&gt;Descriptive helpful error message.&lt;/div&gt;
                   
 
                       &lt;/fieldset&gt;
diff --git a/src/App/ComponentsDocumentation/components/CodeTags/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/CodeTags/__snapshots__/index.test.js.snap
index 5e5275f340..6c5eeccd88 100644
--- a/src/App/ComponentsDocumentation/components/CodeTags/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/CodeTags/__snapshots__/index.test.js.snap
@@ -20,18 +20,18 @@ exports[`Documentation: CodeTags ContentGuidelines renders 1`] = `
     <span
       className="tag tag-tertiary removable mr-2"
     >
+      
+
       Removable
+      
+
       <button
+        aria-label="remove tag"
         className="close-button"
         type="button"
-      >
-        <i
-          aria-label="remove tag"
-          className="material-icons m-auto"
-        >
-          close
-        </i>
-      </button>
+      />
+      
+
     </span>
     <code
       className="code-tags code-tags-tertiary"
diff --git a/src/App/ComponentsDocumentation/components/CodeTags/index.js b/src/App/ComponentsDocumentation/components/CodeTags/index.js
index 0539c86d24..195570431a 100644
--- a/src/App/ComponentsDocumentation/components/CodeTags/index.js
+++ b/src/App/ComponentsDocumentation/components/CodeTags/index.js
@@ -37,7 +37,11 @@ const Overview = () => (
 								id="tag-dropdown-example"
 								className="btn btn-secondary btn-xs"
 							>
-								Color <i className="material-icons ml-1">keyboard_arrow_down</i>
+								Color{" "}
+								<i
+									className="swepay-icon-chevron-down small ml-1"
+									aria-hidden="true"
+								></i>
 							</button>
 							<div className="d-flex  flex-row">
 								<CodeTagsComponent
diff --git a/src/App/ComponentsDocumentation/components/Datepickers/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Datepickers/__snapshots__/index.test.js.snap
index 471b7c9900..30779324d6 100644
--- a/src/App/ComponentsDocumentation/components/Datepickers/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Datepickers/__snapshots__/index.test.js.snap
@@ -59,12 +59,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -144,6 +146,12 @@ Array [
                 7
                 
 
+                8
+                
+
+                9
+                
+
               </pre>
             </td>
             <td
@@ -159,7 +167,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="simple-datepicker" class="form-control" type="text" data-datepicker data-datepicker-allowinput="true" /&gt;
@@ -228,12 +242,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -277,12 +293,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -326,12 +344,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -375,12 +395,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -424,12 +446,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -473,12 +497,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -663,6 +689,42 @@ Array [
                 42
                 
 
+                43
+                
+
+                44
+                
+
+                45
+                
+
+                46
+                
+
+                47
+                
+
+                48
+                
+
+                49
+                
+
+                50
+                
+
+                51
+                
+
+                52
+                
+
+                53
+                
+
+                54
+                
+
               </pre>
             </td>
             <td
@@ -678,7 +740,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="nb-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="nb" data-datepicker-value="28.12.1972" /&gt;
@@ -699,7 +767,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="sv-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="sv" data-datepicker-value="1972-12-28" /&gt;
@@ -720,7 +794,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="da-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="da" data-datepicker-value="28.12.1972" /&gt;
@@ -741,7 +821,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="fi-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="fi" data-datepicker-value="28.12.1972" /&gt;
@@ -762,7 +848,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="en-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="en" data-datepicker-value="28/12/1972" /&gt;
@@ -783,7 +875,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="iso8601-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="iso8601" data-datepicker-value="1972-12-28" /&gt;
@@ -845,12 +943,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -930,6 +1030,12 @@ Array [
                 7
                 
 
+                8
+                
+
+                9
+                
+
               </pre>
             </td>
             <td
@@ -945,7 +1051,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="date-range-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="nb" data-datepicker-min="10.12.1972" data-datepicker-mode="range" /&gt;
@@ -1006,12 +1118,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -1091,6 +1205,12 @@ Array [
                 7
                 
 
+                8
+                
+
+                9
+                
+
               </pre>
             </td>
             <td
@@ -1106,7 +1226,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="init-value-datepicker" class="form-control" type="text" data-datepicker data-datepicker-value="1972-12-28" data-datepicker-fulldate="true" /&gt;
@@ -1175,12 +1301,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -1260,6 +1388,12 @@ Array [
                 7
                 
 
+                8
+                
+
+                9
+                
+
               </pre>
             </td>
             <td
@@ -1275,7 +1409,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="include-time-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="nb" data-datepicker-time="true" /&gt;
@@ -1337,12 +1477,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -1422,6 +1564,12 @@ Array [
                 7
                 
 
+                8
+                
+
+                9
+                
+
               </pre>
             </td>
             <td
@@ -1437,7 +1585,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="init-value-datepicker" class="form-control" type="text" data-datepicker data-datepicker-value="1972-12-28" /&gt;
@@ -1884,12 +2038,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -1969,6 +2125,12 @@ Array [
                 7
                 
 
+                8
+                
+
+                9
+                
+
               </pre>
             </td>
             <td
@@ -1984,7 +2146,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="multiple-months-datepicker" class="form-control" type="text" data-datepicker data-datepicker-months="2" /&gt;
@@ -2052,12 +2220,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -2137,6 +2307,12 @@ Array [
                 7
                 
 
+                8
+                
+
+                9
+                
+
               </pre>
             </td>
             <td
@@ -2152,7 +2328,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="simple-datepicker" class="form-control" type="text" data-datepicker /&gt;
@@ -2221,12 +2403,14 @@ Array [
         <span
           className="input-group-addon "
         >
+          
+
           <i
             aria-hidden="true"
-            className="material-icons material-icons-outlined"
-          >
-            event
-          </i>
+            className="at-calendar-dots small"
+          />
+          
+
         </span>
         
 
@@ -2306,6 +2490,12 @@ Array [
                 7
                 
 
+                8
+                
+
+                9
+                
+
               </pre>
             </td>
             <td
@@ -2321,7 +2511,13 @@ Array [
                     &lt;div class="input-group"&gt;
                 
 
-                        &lt;span class="input-group-addon "&gt;&lt;i class="material-icons material-icons-outlined" aria-hidden="true"&gt;event&lt;/i&gt;&lt;/span&gt;
+                        &lt;span class="input-group-addon "&gt;
+                
+
+                            &lt;i class="at-calendar-dots small" aria-hidden="true"&gt;&lt;/i&gt;
+                
+
+                        &lt;/span&gt;
                 
 
                         &lt;input id="valid-dates-datepicker" class="form-control" type="text" data-datepicker data-datepicker-format="nb" data-datepicker-min="28.12.1972" data-datepicker-max="10.05.2017" data-datepicker-value="28.12.1972" /&gt;
diff --git a/src/App/ComponentsDocumentation/components/Datepickers/index.js b/src/App/ComponentsDocumentation/components/Datepickers/index.js
index 6f6fe62435..73b0755989 100644
--- a/src/App/ComponentsDocumentation/components/Datepickers/index.js
+++ b/src/App/ComponentsDocumentation/components/Datepickers/index.js
@@ -37,7 +37,7 @@ const SimpleDatepicker = () => (
 			<DatepickerComponent
 				label="Date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="simple-datepicker"
 			/>
 		</ComponentPreview>
@@ -58,7 +58,7 @@ const AllowInput = () => (
 			<DatepickerComponent
 				label="Date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="simple-datepicker"
 				allowinput
 			/>
@@ -79,7 +79,7 @@ const InitialValue = () => (
 				value="1972-12-28"
 				label="Date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="init-value-datepicker"
 			/>
 		</ComponentPreview>
@@ -98,7 +98,7 @@ const HumanReadable = () => (
 				value="1972-12-28"
 				label="Date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				fulldate
 				id="init-value-datepicker"
 			/>
@@ -125,7 +125,7 @@ const CustomFormat = () => (
 				value="28.12.1972"
 				format="nb"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="nb-datepicker"
 			/>
 			<DatepickerComponent
@@ -133,7 +133,7 @@ const CustomFormat = () => (
 				value="1972-12-28"
 				format="sv"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="sv-datepicker"
 			/>
 			<DatepickerComponent
@@ -141,7 +141,7 @@ const CustomFormat = () => (
 				value="28.12.1972"
 				format="da"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="da-datepicker"
 			/>
 			<DatepickerComponent
@@ -149,7 +149,7 @@ const CustomFormat = () => (
 				value="28.12.1972"
 				format="fi"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="fi-datepicker"
 			/>
 			<DatepickerComponent
@@ -157,7 +157,7 @@ const CustomFormat = () => (
 				value="28/12/1972"
 				format="en"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="en-datepicker"
 			/>
 			<DatepickerComponent
@@ -165,7 +165,7 @@ const CustomFormat = () => (
 				value="1972-12-28"
 				format="iso8601"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="iso8601-datepicker"
 			/>
 		</ComponentPreview>
@@ -187,7 +187,7 @@ const IncludeTime = () => (
 				format="nb"
 				label="Date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="include-time-datepicker"
 			/>
 		</ComponentPreview>
@@ -207,7 +207,7 @@ const ShowingMultipleMonths = () => (
 				months="2"
 				label="Date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="multiple-months-datepicker"
 			/>
 		</ComponentPreview>
@@ -230,7 +230,7 @@ const ValidDates = () => (
 				format="nb"
 				label="Date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="valid-dates-datepicker"
 			/>
 		</ComponentPreview>
@@ -249,7 +249,7 @@ const DateRange = () => (
 				min="10.12.1972"
 				label="date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="date-range-datepicker"
 				mode="range"
 				format="nb"
@@ -270,7 +270,7 @@ const MultipleDates = () => (
 				min="10.12.1972"
 				label="date"
 				prefixType="icon"
-				prefixValue="event"
+				prefixValue="at-calendar-dots small"
 				id="date-range-datepicker"
 				mode="multiple"
 				format="nb"
@@ -278,7 +278,7 @@ const MultipleDates = () => (
 		</ComponentPreview>
 		<Alert
 			type="warning"
-			icon="warning"
+			icon="swepay-icon-warning-triangle-filled"
 			text={
 				<p>
 					<b>Max number of dates:</b> The{" "}
diff --git a/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap
index d58c7d409a..64bb2b197f 100644
--- a/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap
@@ -43,17 +43,7 @@ Array [
             aria-label="Close dialog"
             className="dialog-close"
             type="button"
-          >
-            
-
-            <i
-              className="material-icons"
-            >
-              close
-            </i>
-            
-
-          </button>
+          />
         </header>
         <div
           className="dialog-body"
@@ -180,12 +170,6 @@ Array [
                 18
                 
 
-                19
-                
-
-                20
-                
-
               </pre>
             </td>
             <td
@@ -213,13 +197,7 @@ Array [
                             &lt;h4&gt;Delete&lt;/h4&gt;
                 
 
-                            &lt;button type="button" class="dialog-close" aria-label="Close dialog"&gt;
-                
-
-                                &lt;i class="material-icons"&gt;close&lt;/i&gt;
-                
-
-                            &lt;/button&gt;
+                            &lt;button type="button" class="dialog-close" aria-label="Close dialog"&gt;&lt;/button&gt;
                 
 
                         &lt;/header&gt;
@@ -274,10 +252,8 @@ Array [
      
     <i
       aria-label="close button"
-      className="material-icons d-inline-flex"
-    >
-      close
-    </i>
+      className="swepay-icon-close d-inline-flex"
+    />
      
     to close the dialog.
   </p>,
@@ -298,7 +274,7 @@ Array [
 
     <i
       aria-hidden="true"
-      className="at-warning"
+      className="swepay-icon-warning-triangle-filled"
     />
     <p>
       <b>
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Chrome-darwin.png
index 9f42372989..87c6209270 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Safari-darwin.png
index d4f7ae6b0d..e6830116c3 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png
index d917caf9f2..e422427538 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-firefox-darwin.png
index f698e9ebe1..9e8ac6f388 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png
index b70f96a483..f1f21b4563 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Safari-darwin.png
index e15fccb2cb..4109f9f5b2 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png
index 21b87951ce..57d49cbf69 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png
index a4d745176a..6e79242e98 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png
index 845e7fff64..5671caa423 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png
index db00a0539c..8fa5f32ba3 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/index.js b/src/App/ComponentsDocumentation/components/Dialog/index.js
index 3274d75bd2..97ec15aa9a 100644
--- a/src/App/ComponentsDocumentation/components/Dialog/index.js
+++ b/src/App/ComponentsDocumentation/components/Dialog/index.js
@@ -19,9 +19,10 @@ const HowItWorks = () => (
 			you want to &quot;force&quot; the user to make a choice. Therefore the
 			only way to close a dialog is to choose one of the presented actions or,
 			if given, press the{" "}
-			<i className="material-icons d-inline-flex" aria-label="close button">
-				close
-			</i>{" "}
+			<i
+				className="swepay-icon-close d-inline-flex"
+				aria-label="close button"
+			></i>{" "}
 			to close the dialog.
 		</p>
 		<p>
@@ -37,7 +38,7 @@ const HowItWorks = () => (
 		</p>
 		<Alert
 			type="warning"
-			icon="warning"
+			icon="swepay-icon-warning-triangle-filled"
 			text={
 				<p>
 					<b>Initializing dialog buttons:</b> To make a button open the dialog
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap
index d11dd40a1e..fe0544d7d3 100644
--- a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap
@@ -45,10 +45,9 @@ exports[`Documentation: Dropdown ContentGuidelines renders 1`] = `
                 
 
                 <i
-                  className="material-icons"
-                >
-                  more_vert
-                </i>
+                  aria-hidden="true"
+                  className="at-dots-vertical"
+                />
                 
 
               </button>
@@ -110,10 +109,9 @@ exports[`Documentation: Dropdown ContentGuidelines renders 1`] = `
                 
 
                 <i
-                  className="material-icons"
-                >
-                  more_vert
-                </i>
+                  aria-hidden="true"
+                  className="at-dots-vertical"
+                />
                 
 
               </button>
@@ -178,10 +176,9 @@ exports[`Documentation: Dropdown ContentGuidelines renders 1`] = `
                 
 
                 <i
-                  className="material-icons"
-                >
-                  more_vert
-                </i>
+                  aria-hidden="true"
+                  className="at-dots-vertical"
+                />
                 
 
               </button>
@@ -243,10 +240,9 @@ exports[`Documentation: Dropdown ContentGuidelines renders 1`] = `
                 
 
                 <i
-                  className="material-icons"
-                >
-                  more_vert
-                </i>
+                  aria-hidden="true"
+                  className="at-dots-vertical"
+                />
                 
 
               </button>
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/constants.js b/src/App/ComponentsDocumentation/components/Dropdown/constants.js
index 639a2c4a66..046ff9c5b0 100644
--- a/src/App/ComponentsDocumentation/components/Dropdown/constants.js
+++ b/src/App/ComponentsDocumentation/components/Dropdown/constants.js
@@ -2,7 +2,6 @@ import React from "react";
 import { Link } from "react-router-dom";
 import DropdownComponent from "@components/Dropdown";
 import ButtonComponent from "@components/Button";
-import { Icon } from "@docutils";
 import CheckboxComponent from "@components/FormComponents/Checkbox";
 import Radio from "@components/FormComponents/Radio";
 import InputGroup from "@components/InputGroup";
@@ -15,7 +14,7 @@ const tabsContent = {
 				className="dropdown-option"
 				key="item-overview-action-1"
 			>
-				<Icon type="bookmark" />
+				<i className="at-pencil small" aria-hidden="true" />
 				Edit
 			</button>
 			{"\n"}
@@ -24,7 +23,7 @@ const tabsContent = {
 				className="dropdown-option"
 				key="item-overview-action-2"
 			>
-				<Icon type="delete_outline" />
+				<i className="at-trash small" aria-hidden="true" />
 				Delete
 			</button>
 		</>
@@ -508,7 +507,7 @@ export const howToUse = [
 							label="Filter"
 							content={dropdownExamples.howToUseExamples.example1}
 							isIconButton={false}
-							icon="filter_list"
+							icon="at-funnel-sort small"
 							iconAfter={false}
 							largePadding={true}
 							noRotation={true}
@@ -517,7 +516,7 @@ export const howToUse = [
 							type="secondary"
 							label="Edit"
 							className="ml-2"
-							icon="edit"
+							icon="at-pencil small"
 						/>
 					</>
 				),
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png
index 112cd2a3a9..cfdb17dab5 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png
index c7748cec61..a80eec623a 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png
index 48fad3f5e6..3cbbb33d20 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png
index c66aa36a68..bd6f01905d 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png
index c2161b7953..c8a7b39c82 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png
index cf6f02d86c..0523a9f97b 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png
index 3bc547b689..74f9146f98 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png
index e8e0f53501..37dc846346 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png
index 1cf87c50bc..3d73cfb32e 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png
index 377dd4941d..375a6ee061 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png
index af4440191f..03361ca9ba 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png
index 9bf3f88a38..e00e4b15cd 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png
index 67110fa5ec..d90cec5726 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png
index f271cababa..99b0054fc8 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png
index d35c8072e9..f3788a5cda 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png
index 7f0c5e1445..9d1480326f 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png
index f979c625f4..56993f3c57 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png
index 763693f351..3f700f7eea 100644
Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Expandable/constants.js b/src/App/ComponentsDocumentation/components/Expandable/constants.js
index 03dd3912e4..eaf07e00b4 100644
--- a/src/App/ComponentsDocumentation/components/Expandable/constants.js
+++ b/src/App/ComponentsDocumentation/components/Expandable/constants.js
@@ -56,7 +56,7 @@ export const expandableSidebarOptions = {
 								id: "icon",
 								name: "Icon",
 								value: {
-									icon: "credit_card",
+									icon: "at-credit-card",
 								},
 							},
 						],
diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Chrome-darwin.png
index eb735c8cce..8f231bbd8b 100644
Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Safari-darwin.png
index 2190de0d6b..61618ef671 100644
Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-chromium-darwin.png
index ea16441180..de844a7ff6 100644
Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-firefox-darwin.png
index bd769b4f85..2afdd0a986 100644
Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-webkit-darwin.png
index fccedb1615..8e211b4f8c 100644
Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/InputField/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/InputField/__snapshots__/index.test.js.snap
index de9a51b42d..0be75c7fb5 100644
--- a/src/App/ComponentsDocumentation/components/InputField/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/InputField/__snapshots__/index.test.js.snap
@@ -106,12 +106,14 @@ exports[`Component: InputField ContentGuidelines renders 1`] = `
             <span
               className="input-group-addon "
             >
+              
+
               <i
                 aria-hidden="true"
-                className="material-icons material-icons-outlined"
-              >
-                account_circle
-              </i>
+                className="at-account small"
+              />
+              
+
             </span>
             
 
@@ -221,12 +223,14 @@ exports[`Component: InputField ContentGuidelines renders 1`] = `
           <span
             className="input-group-addon postfix"
           >
+            
+
             <i
               aria-hidden="true"
-              className="material-icons material-icons-outlined"
-            >
-              warning
-            </i>
+              className="swepay-icon-error-triangle-filled small"
+            />
+            
+
           </span>
           
 
@@ -282,12 +286,14 @@ exports[`Component: InputField ContentGuidelines renders 1`] = `
           <span
             className="input-group-addon postfix"
           >
+            
+
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              check_circle
-            </i>
+              className="swepay-icon-check-circle-filled small"
+            />
+            
+
           </span>
           
 
diff --git a/src/App/ComponentsDocumentation/components/InputField/constants.js b/src/App/ComponentsDocumentation/components/InputField/constants.js
index 01d0cbc0d8..3a5286983f 100644
--- a/src/App/ComponentsDocumentation/components/InputField/constants.js
+++ b/src/App/ComponentsDocumentation/components/InputField/constants.js
@@ -33,7 +33,7 @@ const InputOptions = () => ({
 					value: {
 						type: "email",
 						addOnType: "icon",
-						prefixValue: "email",
+						prefixValue: "at-envelope small",
 					},
 				},
 				{
diff --git a/src/App/ComponentsDocumentation/components/InputField/index.js b/src/App/ComponentsDocumentation/components/InputField/index.js
index 4a410f4e5d..c5becd9912 100644
--- a/src/App/ComponentsDocumentation/components/InputField/index.js
+++ b/src/App/ComponentsDocumentation/components/InputField/index.js
@@ -79,7 +79,7 @@ const ContentGuidelines = forwardRef((props, ref) => (
 				<div className="form-group">
 					<InputGroup
 						label="Username"
-						prefixValue="account_circle"
+						prefixValue="at-account small"
 						addOnType="icon"
 					/>
 					<InputGroup
diff --git a/src/App/ComponentsDocumentation/components/Links/constants.js b/src/App/ComponentsDocumentation/components/Links/constants.js
index ec64f265d7..371b83174a 100644
--- a/src/App/ComponentsDocumentation/components/Links/constants.js
+++ b/src/App/ComponentsDocumentation/components/Links/constants.js
@@ -137,7 +137,7 @@ export const overviewLinks = {
 								id: "external_link",
 								name: "External link",
 								value: {
-									rightIcon: "launch",
+									rightIcon: "at-export-arrow-up-right small",
 								},
 							},
 							{
@@ -210,19 +210,19 @@ export const overviewLinks = {
 							{
 								name: "External link",
 								value: {
-									leftIcon: "launch",
+									leftIcon: "at-export-arrow-up-right small",
 								},
 							},
 							{
 								name: "Back",
 								value: {
-									leftIcon: "arrow_back_ios",
+									leftIcon: "swepay-icon-chevron-left",
 								},
 							},
 							{
 								name: "Other type",
 								value: {
-									leftIcon: "edit",
+									leftIcon: "at-pencil small",
 								},
 							},
 						],
diff --git a/src/App/ComponentsDocumentation/components/Links/index.js b/src/App/ComponentsDocumentation/components/Links/index.js
index ead7a66d95..cabd28b8e8 100644
--- a/src/App/ComponentsDocumentation/components/Links/index.js
+++ b/src/App/ComponentsDocumentation/components/Links/index.js
@@ -55,7 +55,11 @@ const Overview = ({ scrollToRef }) => (
 					<div className="loader-preview-container d-flex justify-content-center align-items-center mt-3 pt-3">
 						<p>
 							Paragraph text with a{" "}
-							<LinkComponent linkText="Inline link" leftIcon="edit" />.
+							<LinkComponent
+								linkText="Inline link"
+								leftIcon="at-pencil small"
+							/>
+							.
 						</p>
 					</div>
 				</div>
diff --git a/src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap
index 0b816c34ac..f872e87751 100644
--- a/src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap
@@ -2748,10 +2748,8 @@ exports[`Documentation: Lists renders 1`] = `
 
           <i
             aria-hidden="true"
-            className="material-icons text-success"
-          >
-            check
-          </i>
+            className="swepay-icon-check-circle-filled small align-self-center"
+          />
           Shovels and tapestry newsletter
           
 
@@ -2761,10 +2759,8 @@ exports[`Documentation: Lists renders 1`] = `
 
           <i
             aria-hidden="true"
-            className="material-icons text-warning"
-          >
-            remove
-          </i>
+            className="swepay-icon-warning-triangle-filled small align-self-center"
+          />
           Spoon collectors weekly newsletter
           
 
@@ -2774,10 +2770,8 @@ exports[`Documentation: Lists renders 1`] = `
 
           <i
             aria-hidden="true"
-            className="material-icons text-danger"
-          >
-            clear
-          </i>
+            className="swepay-icon-error-circle-filled small align-self-center"
+          />
           Energetic squirrels newsletter
           
 
@@ -2863,7 +2857,7 @@ exports[`Documentation: Lists renders 1`] = `
                       &lt;li&gt;
                   
 
-                          &lt;i class="material-icons text-success" aria-hidden="true"&gt;check&lt;/i&gt;Shovels and tapestry newsletter
+                          &lt;i class="swepay-icon-check-circle-filled small align-self-center" aria-hidden="true"&gt;&lt;/i&gt;Shovels and tapestry newsletter
                   
 
                       &lt;/li&gt;
@@ -2872,7 +2866,7 @@ exports[`Documentation: Lists renders 1`] = `
                       &lt;li&gt;
                   
 
-                          &lt;i class="material-icons text-warning" aria-hidden="true"&gt;remove&lt;/i&gt;Spoon collectors weekly newsletter
+                          &lt;i class="swepay-icon-warning-triangle-filled small align-self-center" aria-hidden="true"&gt;&lt;/i&gt;Spoon collectors weekly newsletter
                   
 
                       &lt;/li&gt;
@@ -2881,7 +2875,7 @@ exports[`Documentation: Lists renders 1`] = `
                       &lt;li&gt;
                   
 
-                          &lt;i class="material-icons text-danger" aria-hidden="true"&gt;clear&lt;/i&gt;Energetic squirrels newsletter
+                          &lt;i class="swepay-icon-error-circle-filled small align-self-center" aria-hidden="true"&gt;&lt;/i&gt;Energetic squirrels newsletter
                   
 
                       &lt;/li&gt;
@@ -3955,10 +3949,8 @@ exports[`Documentation: Lists renders 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  className="material-icons"
-                >
-                  bookmark
-                </i>
+                  className="at-bookmark-star small"
+                />
                 Add bookmark
               </a>
               
@@ -3969,10 +3961,8 @@ exports[`Documentation: Lists renders 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  className="material-icons"
-                >
-                  business_center
-                </i>
+                  className="at-business-suitcase small"
+                />
                 Add client
               </a>
               
@@ -3983,10 +3973,8 @@ exports[`Documentation: Lists renders 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  className="material-icons"
-                >
-                  add_circle
-                </i>
+                  className="at-plus-circle small"
+                />
                 Add document
               </a>
               
@@ -3997,10 +3985,8 @@ exports[`Documentation: Lists renders 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  className="material-icons"
-                >
-                  person_add
-                </i>
+                  className="at-user-plus small"
+                />
                 Add user
               </a>
               
@@ -4047,10 +4033,8 @@ exports[`Documentation: Lists renders 1`] = `
 
           <i
             aria-hidden="true"
-            className="material-icons"
-          >
-            star
-          </i>
+            className="at-bookmark-star"
+          />
           
 
         </li>
@@ -4074,10 +4058,9 @@ exports[`Documentation: Lists renders 1`] = `
             type="button"
           >
             <i
-              className="material-icons"
-            >
-              delete
-            </i>
+              aria-hidden="true"
+              className="at-trash"
+            />
           </button>
           
 
@@ -4238,16 +4221,16 @@ exports[`Documentation: Lists renders 1`] = `
                               &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
                   
 
-                                  &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                                  &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
                   
 
-                                  &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                                  &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
                   
 
-                                  &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                                  &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
                   
 
-                                  &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                                  &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
                   
 
                               &lt;/div&gt;
@@ -4286,7 +4269,7 @@ exports[`Documentation: Lists renders 1`] = `
                           &lt;span&gt;4925*********004&lt;/span&gt;
                   
 
-                          &lt;i class="material-icons" aria-hidden="true"&gt;star&lt;/i&gt;
+                          &lt;i class="at-bookmark-star" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                       &lt;/li&gt;
@@ -4301,7 +4284,7 @@ exports[`Documentation: Lists renders 1`] = `
                           &lt;span class="status status-success"&gt;Active&lt;/span&gt;
                   
 
-                          &lt;button type="button" class="btn btn-danger btn-xs"&gt;&lt;i class="material-icons"&gt;delete&lt;/i&gt;&lt;/button&gt;
+                          &lt;button type="button" class="btn btn-danger btn-xs"&gt;&lt;i class="at-trash" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                   
 
                       &lt;/li&gt;
diff --git a/src/App/ComponentsDocumentation/components/Lists/index.js b/src/App/ComponentsDocumentation/components/Lists/index.js
index ac2f561a5d..3f70e185c5 100644
--- a/src/App/ComponentsDocumentation/components/Lists/index.js
+++ b/src/App/ComponentsDocumentation/components/Lists/index.js
@@ -9,19 +9,19 @@ import { actionList } from "@src/scripts/main";
 const items = [
 	{
 		name: "Add bookmark",
-		icon: "bookmark",
+		icon: "at-bookmark-star",
 	},
 	{
 		name: "Add client",
-		icon: "business_center",
+		icon: "at-business-suitcase",
 	},
 	{
 		name: "Add document",
-		icon: "add_circle",
+		icon: "at-plus-circle",
 	},
 	{
 		name: "Add user",
-		icon: "person_add",
+		icon: "at-user-plus",
 	},
 ];
 
@@ -131,23 +131,26 @@ const SettingsList = () => (
 			<ul className="settings-list">
 				<li>
 					{"\n"}
-					<i className="material-icons text-success" aria-hidden="true">
-						check
-					</i>
+					<i
+						className="swepay-icon-check-circle-filled small align-self-center"
+						aria-hidden="true"
+					></i>
 					Shovels and tapestry newsletter{"\n"}
 				</li>
 				<li>
 					{"\n"}
-					<i className="material-icons text-warning" aria-hidden="true">
-						remove
-					</i>
+					<i
+						className="swepay-icon-warning-triangle-filled small align-self-center"
+						aria-hidden="true"
+					></i>
 					Spoon collectors weekly newsletter{"\n"}
 				</li>
 				<li>
 					{"\n"}
-					<i className="material-icons text-danger" aria-hidden="true">
-						clear
-					</i>
+					<i
+						className="swepay-icon-error-circle-filled small align-self-center"
+						aria-hidden="true"
+					></i>
 					Energetic squirrels newsletter{"\n"}
 				</li>
 			</ul>
@@ -361,9 +364,7 @@ const StripedItemList = () => (
 					{"\n"}
 					<span>4925*********004</span>
 					{"\n"}
-					<i className="material-icons" aria-hidden="true">
-						star
-					</i>
+					<i className="at-bookmark-star" aria-hidden="true"></i>
 					{"\n"}
 				</li>
 				<li>
@@ -373,7 +374,7 @@ const StripedItemList = () => (
 					<span className="status status-success">Active</span>
 					{"\n"}
 					<button type="button" className="btn btn-danger btn-xs">
-						<i className="material-icons">delete</i>
+						<i className="at-trash" aria-hidden="true"></i>
 					</button>
 					{"\n"}
 				</li>
diff --git a/src/App/ComponentsDocumentation/components/MediaObject/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/MediaObject/__snapshots__/index.test.js.snap
index 2342c0feb9..ce26f216bc 100644
--- a/src/App/ComponentsDocumentation/components/MediaObject/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/MediaObject/__snapshots__/index.test.js.snap
@@ -828,10 +828,8 @@ exports[`Documentation: MediaObject renders 1`] = `
            
           <i
             aria-hidden="true"
-            className="material-icons"
-          >
-            account_circle
-          </i>
+            className="at-customer-service-agent "
+          />
            
           
 
@@ -978,7 +976,7 @@ exports[`Documentation: MediaObject renders 1`] = `
                       &lt;div class="media-img"&gt;
                   
 
-                          &lt;i class="material-icons" aria-hidden="true"&gt;account_circle&lt;/i&gt;
+                          &lt;i class="at-customer-service-agent " aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                       &lt;/div&gt;
@@ -1075,10 +1073,8 @@ exports[`Documentation: MediaObject renders 1`] = `
            
           <i
             aria-hidden="true"
-            className="material-icons"
-          >
-            account_circle
-          </i>
+            className="at-customer-service-agent "
+          />
            
           
 
@@ -1225,7 +1221,7 @@ exports[`Documentation: MediaObject renders 1`] = `
                       &lt;div class="media-img"&gt;
                   
 
-                          &lt;i class="material-icons" aria-hidden="true"&gt;account_circle&lt;/i&gt;
+                          &lt;i class="at-customer-service-agent " aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                       &lt;/div&gt;
@@ -1301,10 +1297,8 @@ exports[`Documentation: MediaObject renders 1`] = `
            
           <i
             aria-hidden="true"
-            className="material-icons"
-          >
-            account_circle
-          </i>
+            className="at-customer-service-agent "
+          />
            
           
 
@@ -1451,7 +1445,7 @@ exports[`Documentation: MediaObject renders 1`] = `
                       &lt;div class="media-img"&gt;
                   
 
-                          &lt;i class="material-icons" aria-hidden="true"&gt;account_circle&lt;/i&gt;
+                          &lt;i class="at-customer-service-agent " aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                       &lt;/div&gt;
@@ -1538,10 +1532,8 @@ exports[`Documentation: MediaObject renders 1`] = `
            
           <i
             aria-hidden="true"
-            className="material-icons"
-          >
-            account_circle
-          </i>
+            className="at-customer-service-agent "
+          />
            
           
 
@@ -1688,7 +1680,7 @@ exports[`Documentation: MediaObject renders 1`] = `
                       &lt;div class="media-img"&gt;
                   
 
-                          &lt;i class="material-icons" aria-hidden="true"&gt;account_circle&lt;/i&gt;
+                          &lt;i class="at-customer-service-agent " aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                       &lt;/div&gt;
diff --git a/src/App/ComponentsDocumentation/components/MediaObject/index.js b/src/App/ComponentsDocumentation/components/MediaObject/index.js
index 346530fba5..e17571f278 100644
--- a/src/App/ComponentsDocumentation/components/MediaObject/index.js
+++ b/src/App/ComponentsDocumentation/components/MediaObject/index.js
@@ -21,7 +21,7 @@ const Overview = () => (
 				text={`bob.corlsan@${brand}.com`}
 			/>
 			<MediaObjectComponent
-				icon="account_circle"
+				icon="at-customer-service-agent"
 				heading="Bob Corlsan"
 				text={`bob.corlsan@${brand}.com`}
 			/>
@@ -47,7 +47,7 @@ const Sizes = () => (
 			/>
 			<MediaObjectComponent
 				size="sm"
-				icon="account_circle"
+				icon="at-customer-service-agent"
 				heading="Bob Corlsan"
 				text={`bob.corlsan@${brand}.com`}
 			/>
@@ -62,7 +62,7 @@ const Sizes = () => (
 			/>
 			<MediaObjectComponent
 				size="lg"
-				icon="account_circle"
+				icon="at-customer-service-agent"
 				heading="Bob Corlsan"
 				text={`bob.corlsan@${brand}.com`}
 			/>
@@ -86,7 +86,7 @@ const MediaPosition = () => (
 			/>
 			<MediaObjectComponent
 				mediaRight
-				icon="account_circle"
+				icon="at-customer-service-agent"
 				heading="Bob Corlsan"
 				text={`bob.corlsan@${brand}.com`}
 			/>
diff --git a/src/App/ComponentsDocumentation/components/Nav/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Nav/__snapshots__/index.test.js.snap
index ede3986058..c3469e3005 100644
--- a/src/App/ComponentsDocumentation/components/Nav/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Nav/__snapshots__/index.test.js.snap
@@ -66,10 +66,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              home
-            </i>
+              className="at-home small"
+            />
             
 
             <span>
@@ -95,10 +93,8 @@ Array [
             >
               <i
                 aria-hidden="true"
-                className="material-icons"
-              >
-                shopping_cart
-              </i>
+                className="at-shop-cart small"
+              />
               
 
               <span>
@@ -149,10 +145,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              notification_important
-            </i>
+              className="at-bell-reminder small"
+            />
             
 
             <span>
@@ -176,10 +170,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              language
-            </i>
+              className="at-language-translation small"
+            />
             
 
             <span>
@@ -203,10 +195,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              account_balance
-            </i>
+              className="at-building-column small"
+            />
             
 
             <span>
@@ -230,10 +220,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              fingerprint
-            </i>
+              className="at-fingerprint small"
+            />
             
 
             <span>
@@ -435,7 +423,7 @@ Array [
                             &lt;a href="#" class="active"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;home&lt;/i&gt;
+                                &lt;i class="at-home small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Home&lt;/span&gt;
@@ -453,7 +441,7 @@ Array [
                             &lt;div class="submenu"&gt;
                 
 
-                                &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;shopping_cart&lt;/i&gt;
+                                &lt;a href="#"&gt;&lt;i class="at-shop-cart small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                     &lt;span&gt;Transactions&lt;/span&gt;
@@ -486,7 +474,7 @@ Array [
                             &lt;a href="#"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;notification_important&lt;/i&gt;
+                                &lt;i class="at-bell-reminder small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Notifications&lt;/span&gt;
@@ -504,7 +492,7 @@ Array [
                             &lt;a href="#"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;language&lt;/i&gt;
+                                &lt;i class="at-language-translation small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Language&lt;/span&gt;
@@ -522,7 +510,7 @@ Array [
                             &lt;a href="#"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;account_balance&lt;/i&gt;
+                                &lt;i class="at-building-column small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Account&lt;/span&gt;
@@ -540,7 +528,7 @@ Array [
                             &lt;a href="#"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;fingerprint&lt;/i&gt;
+                                &lt;i class="at-fingerprint small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Authentication&lt;/span&gt;
@@ -604,10 +592,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              home
-            </i>
+              className="at-home small"
+            />
             
 
             <span>
@@ -633,10 +619,8 @@ Array [
             >
               <i
                 aria-hidden="true"
-                className="material-icons"
-              >
-                shopping_cart
-              </i>
+                className="at-shop-cart small"
+              />
               
 
               <span>
@@ -687,10 +671,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              notification_important
-            </i>
+              className="at-bell-reminder small"
+            />
             
 
             <span>
@@ -714,10 +696,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              language
-            </i>
+              className="at-language-translation small"
+            />
             
 
             <span>
@@ -741,10 +721,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              account_balance
-            </i>
+              className="at-building-column small"
+            />
             
 
             <span>
@@ -768,10 +746,8 @@ Array [
 
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              fingerprint
-            </i>
+              className="at-fingerprint small"
+            />
             
 
             <span>
@@ -973,7 +949,7 @@ Array [
                             &lt;a href="#" class="active"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;home&lt;/i&gt;
+                                &lt;i class="at-home small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Home&lt;/span&gt;
@@ -991,7 +967,7 @@ Array [
                             &lt;div class="submenu"&gt;
                 
 
-                                &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;shopping_cart&lt;/i&gt;
+                                &lt;a href="#"&gt;&lt;i class="at-shop-cart small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                     &lt;span&gt;Transactions&lt;/span&gt;
@@ -1024,7 +1000,7 @@ Array [
                             &lt;a href="#"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;notification_important&lt;/i&gt;
+                                &lt;i class="at-bell-reminder small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Notifications&lt;/span&gt;
@@ -1042,7 +1018,7 @@ Array [
                             &lt;a href="#"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;language&lt;/i&gt;
+                                &lt;i class="at-language-translation small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Language&lt;/span&gt;
@@ -1060,7 +1036,7 @@ Array [
                             &lt;a href="#"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;account_balance&lt;/i&gt;
+                                &lt;i class="at-building-column small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Account&lt;/span&gt;
@@ -1078,7 +1054,7 @@ Array [
                             &lt;a href="#"&gt;
                 
 
-                                &lt;i class="material-icons" aria-hidden="true"&gt;fingerprint&lt;/i&gt;
+                                &lt;i class="at-fingerprint small" aria-hidden="true"&gt;&lt;/i&gt;
                 
 
                                 &lt;span&gt;Authentication&lt;/span&gt;
diff --git a/src/App/ComponentsDocumentation/components/Nav/index.js b/src/App/ComponentsDocumentation/components/Nav/index.js
index ab7a41eb3e..b3a65e189e 100644
--- a/src/App/ComponentsDocumentation/components/Nav/index.js
+++ b/src/App/ComponentsDocumentation/components/Nav/index.js
@@ -11,28 +11,28 @@ import NpmInformation from "@docutils/NpmInformation";
 const navItems = [
 	{
 		name: "Home",
-		icon: "home",
+		icon: "at-home small",
 	},
 	{
 		name: "Transactions",
-		icon: "shopping_cart",
+		icon: "at-shop-cart small",
 		subItems: ["Purchase history", "Invoice"],
 	},
 	{
 		name: "Notifications",
-		icon: "notification_important",
+		icon: "at-bell-reminder small",
 	},
 	{
 		name: "Language",
-		icon: "language",
+		icon: "at-language-translation small",
 	},
 	{
 		name: "Account",
-		icon: "account_balance",
+		icon: "at-building-column small",
 	},
 	{
 		name: "Authentication",
-		icon: "fingerprint",
+		icon: "at-fingerprint small",
 	},
 ];
 
@@ -87,7 +87,7 @@ const Nav = () => {
 		<DocContainer>
 			<Alert
 				type="danger"
-				icon="exclamation-triangle"
+				icon="swepay-icon-error-triangle-filled"
 				text={
 					<p>
 						<b>Deprecated:</b> Be aware, this component will not be maintained
diff --git a/src/App/ComponentsDocumentation/components/Pagination/index.js b/src/App/ComponentsDocumentation/components/Pagination/index.js
index 675ca4e21d..cbcde8c9d0 100644
--- a/src/App/ComponentsDocumentation/components/Pagination/index.js
+++ b/src/App/ComponentsDocumentation/components/Pagination/index.js
@@ -28,17 +28,17 @@ const Overview = () => (
 				aria-label="Pagination Navigation"
 			>
 				<button className="arrow-start d-block disabled">
-					<i className="material-icons" aria-label="start"></i>
+					<i className="at-arrow-right-line" aria-label="start"></i>
 				</button>
 				<button className="arrow-back disabled">
-					<i className="material-icons" aria-label="back"></i>
+					<i className="swepay-icon-chevron-left" aria-label="back"></i>
 				</button>
 				<span className="mobile d-block font-weight-bold">Page 1 of 10</span>
 				<button className="arrow-forward">
-					<i className="material-icons" aria-label="forward"></i>
+					<i className="swepay-icon-chevron-right" aria-label="forward"></i>
 				</button>
 				<button className="arrow-end d-block">
-					<i className="material-icons" aria-label="end"></i>
+					<i className="at-arrow-left-line" aria-label="end"></i>
 				</button>
 			</nav>
 		</div>
@@ -89,13 +89,13 @@ const Overview = () => (
 						<nav className="pagination example">
 							<button className="arrow-back">
 								{"\n"}
-								<i className="material-icons"></i>
+								<i className="swepay-icon-chevron-left"></i>
 								{"\n"}
 							</button>
 							<div className="example-box my-auto"></div>
 							<button className="arrow-forward">
 								{"\n"}
-								<i className="material-icons"></i>
+								<i className="swepay-icon-chevron-right"></i>
 								{"\n"}
 							</button>
 						</nav>
diff --git a/src/App/ComponentsDocumentation/components/ProgressSteps/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/ProgressSteps/__snapshots__/index.test.js.snap
index 34020c949a..4b2fa43bda 100644
--- a/src/App/ComponentsDocumentation/components/ProgressSteps/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/ProgressSteps/__snapshots__/index.test.js.snap
@@ -742,11 +742,9 @@ exports[`Documentation: Progress Steps renders 1`] = `
           <li
             className="steps-completed"
           >
-            <div
-              className="material-icons steps-icon"
-            >
-              check
-            </div>
+            <i
+              className="completed steps-icon"
+            />
             
 
             Step one
@@ -894,9 +892,6 @@ exports[`Documentation: Progress Steps renders 1`] = `
                   20
                   
 
-                  21
-                  
-
                 </pre>
               </td>
               <td
@@ -909,10 +904,7 @@ exports[`Documentation: Progress Steps renders 1`] = `
                       &lt;ol&gt;
                   
 
-                          &lt;li class="steps-completed"&gt;
-                  
-
-                              &lt;div class="material-icons steps-icon"&gt;check&lt;/div&gt;
+                          &lt;li class="steps-completed"&gt;&lt;i class="completed steps-icon"&gt;&lt;/i&gt;
                   
 
                               Step one
@@ -1005,11 +997,9 @@ exports[`Documentation: Progress Steps renders 1`] = `
           <li
             className="steps-completed"
           >
-            <div
-              className="material-icons steps-icon"
-            >
-              check
-            </div>
+            <i
+              className="completed steps-icon"
+            />
             
 
             Step one
@@ -1144,12 +1134,6 @@ exports[`Documentation: Progress Steps renders 1`] = `
                   18
                   
 
-                  19
-                  
-
-                  20
-                  
-
                 </pre>
               </td>
               <td
@@ -1162,16 +1146,10 @@ exports[`Documentation: Progress Steps renders 1`] = `
                       &lt;ol&gt;
                   
 
-                          &lt;li class="steps-completed"&gt;
-                  
-
-                              &lt;div class="material-icons steps-icon"&gt;check&lt;/div&gt;
-                  
-
-                              Step one
+                          &lt;li class="steps-completed"&gt;&lt;i class="completed steps-icon"&gt;&lt;/i&gt;
                   
 
-                          &lt;/li&gt;
+                              Step one&lt;/li&gt;
                   
 
                           &lt;li class="steps-ongoing steps-selected"&gt;
@@ -1257,11 +1235,9 @@ exports[`Documentation: Progress Steps renders 1`] = `
 
              
             <a>
-              <div
-                className="material-icons steps-icon"
-              >
-                check
-              </div>
+              <i
+                className="completed steps-icon"
+              />
               
 
               Step one
@@ -1352,21 +1328,17 @@ exports[`Documentation: Progress Steps renders 1`] = `
         <div
           className="steps-responsive"
         >
-          <div
-            className="material-icons steps-nav-left"
-          >
-            keyboard_arrow_left
-          </div>
+          <i
+            className="swepay-icon-chevron-left steps-nav-left"
+          />
           <div
             className="steps-responsive-text"
           >
             Step 2
           </div>
-          <div
-            className="material-icons steps-nav-right"
-          >
-            keyboard_arrow_right
-          </div>
+          <i
+            className="swepay-icon-chevron-right steps-nav-right"
+          />
         </div>
       </div>
     </div>
@@ -1500,18 +1472,6 @@ exports[`Documentation: Progress Steps renders 1`] = `
                   32
                   
 
-                  33
-                  
-
-                  34
-                  
-
-                  35
-                  
-
-                  36
-                  
-
                 </pre>
               </td>
               <td
@@ -1527,16 +1487,10 @@ exports[`Documentation: Progress Steps renders 1`] = `
                           &lt;li class="steps-completed"&gt;
                   
 
-                              &lt;a&gt;
-                  
-
-                                  &lt;div class="material-icons steps-icon"&gt;check&lt;/div&gt;
-                  
-
-                                  Step one
+                              &lt;a&gt;&lt;i class="completed steps-icon"&gt;&lt;/i&gt;
                   
 
-                              &lt;/a&gt;
+                                  Step one&lt;/a&gt;
                   
 
                           &lt;/li&gt;
@@ -1608,16 +1562,10 @@ exports[`Documentation: Progress Steps renders 1`] = `
                       &lt;/ol&gt;
                   
 
-                      &lt;div class="steps-responsive"&gt;
-                  
-
-                          &lt;div class="material-icons steps-nav-left"&gt;keyboard_arrow_left&lt;/div&gt;
-                  
-
-                          &lt;div class="steps-responsive-text"&gt;Step 2&lt;/div&gt;
+                      &lt;div class="steps-responsive"&gt;&lt;i class="swepay-icon-chevron-left steps-nav-left"&gt;&lt;/i&gt;
                   
 
-                          &lt;div class="material-icons steps-nav-right"&gt;keyboard_arrow_right&lt;/div&gt;
+                          &lt;div class="steps-responsive-text"&gt;Step 2&lt;/div&gt;&lt;i class="swepay-icon-chevron-right steps-nav-right"&gt;&lt;/i&gt;
                   
 
                       &lt;/div&gt;
diff --git a/src/App/ComponentsDocumentation/components/RadioButton/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/RadioButton/__snapshots__/index.test.js.snap
index 7a30425625..17d5f63a36 100644
--- a/src/App/ComponentsDocumentation/components/RadioButton/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/RadioButton/__snapshots__/index.test.js.snap
@@ -357,10 +357,9 @@ exports[`Component: RadioButton DeveloperDocumentation renders 1`] = `
               className="help-block"
             >
               <i
-                className="material-icons"
-              >
-                warning
-              </i>
+                aria-hidden="true"
+                className="swepay-icon-error-triangle-filled small"
+              />
               Error message
             </div>
             
@@ -508,7 +507,7 @@ exports[`Component: RadioButton DeveloperDocumentation renders 1`] = `
                           &lt;/div&gt;
                   
 
-                          &lt;div class="help-block"&gt;&lt;i class="material-icons"&gt;warning&lt;/i&gt;Error message&lt;/div&gt;
+                          &lt;div class="help-block"&gt;&lt;i class="swepay-icon-error-triangle-filled small" aria-hidden="true"&gt;&lt;/i&gt;Error message&lt;/div&gt;
                   
 
                       &lt;/fieldset&gt;
diff --git a/src/App/ComponentsDocumentation/components/Sidebar/constants.js b/src/App/ComponentsDocumentation/components/Sidebar/constants.js
index c30f83b3c9..2924613e0c 100644
--- a/src/App/ComponentsDocumentation/components/Sidebar/constants.js
+++ b/src/App/ComponentsDocumentation/components/Sidebar/constants.js
@@ -4,34 +4,18 @@ import Sidebar from "@components/Sidebar";
 export const SidebarNavList = [
 	{
 		title: "Home Page",
-		icon: (
-			<i className="material-icons-outlined" aria-hidden="true">
-				home
-			</i>
-		),
+		icon: <i className="at-home" aria-hidden="true"></i>,
 	},
 	{
 		title: "Get Started",
-		icon: (
-			<i className="material-icons-outlined rotated" aria-hidden="true">
-				wb_incandescent
-			</i>
-		),
+		icon: <i className="at-rocket-launch" aria-hidden="true"></i>,
 		children: [
 			{
-				icon: (
-					<i className="material-icons-outlined rotated" aria-hidden="true">
-						accessibility
-					</i>
-				),
+				icon: <i className="at-vision" aria-hidden="true"></i>,
 				title: "Accessibility",
 			},
 			{
-				icon: (
-					<i className="material-icons-outlined rotated" aria-hidden="true">
-						palette
-					</i>
-				),
+				icon: <i className="at-paintbrush-paint-tool" aria-hidden="true"></i>,
 				title: "Colors",
 				group: true,
 				children: [
@@ -47,30 +31,18 @@ export const SidebarNavList = [
 				],
 			},
 			{
-				icon: (
-					<i className="material-icons-outlined rotated" aria-hidden="true">
-						grid_on
-					</i>
-				),
+				icon: <i className="at-grid" aria-hidden="true"></i>,
 				title: "Grid",
 			},
 			{
-				icon: (
-					<i className="material-icons-outlined rotated" aria-hidden="true">
-						space_bar
-					</i>
-				),
+				icon: <i className="move-arrow-left-right" aria-hidden="true"></i>,
 				title: "Spacing",
 			},
 		],
 	},
 	{
 		title: "Identity",
-		icon: (
-			<i className="material-icons-outlined" aria-hidden="true">
-				palette
-			</i>
-		),
+		icon: <i className="at-dna-science" aria-hidden="true"></i>,
 		children: [
 			{
 				title: "Introduction",
@@ -100,19 +72,11 @@ export const SidebarNavList = [
 export const SidebarNavListExtended = [
 	{
 		title: "Home Page",
-		icon: (
-			<i className="material-icons-outlined" aria-hidden="true">
-				home
-			</i>
-		),
+		icon: <i className="at-home" aria-hidden="true"></i>,
 	},
 	{
 		title: "Get started",
-		icon: (
-			<i className="material-icons-outlined" aria-hidden="true">
-				play_circle_outline
-			</i>
-		),
+		icon: <i className="at-launch-rocket" aria-hidden="true"></i>,
 		children: [
 			{
 				title: "Second level (li.group)",
@@ -169,11 +133,7 @@ export const SidebarNavListExtended = [
 	},
 	{
 		title: "Group",
-		icon: (
-			<i className="material-icons-outlined" aria-hidden="true">
-				expand_circle_down
-			</i>
-		),
+		icon: <i className="at-coins" aria-hidden="true"></i>,
 		children: [
 			{
 				title: "li.group",
diff --git a/src/App/ComponentsDocumentation/components/Sidebar/index.js b/src/App/ComponentsDocumentation/components/Sidebar/index.js
index 37c4d15fdb..bd648ffccf 100644
--- a/src/App/ComponentsDocumentation/components/Sidebar/index.js
+++ b/src/App/ComponentsDocumentation/components/Sidebar/index.js
@@ -189,9 +189,10 @@ const DeveloperDocumentation = () => (
 							{"\n"}
 							<a href="#" className="previous-nav">
 								{"\n"}
-								<i className="material-icons" aria-hidden="true">
-									arrow_back_ios
-								</i>
+								<i
+									className="swepay-icon-chevron-left"
+									aria-expanded="false"
+								></i>
 								{"\n"}
 								<span>Back to Previous</span>
 								{"\n"}
diff --git a/src/App/ComponentsDocumentation/components/Tables/constants.js b/src/App/ComponentsDocumentation/components/Tables/constants.js
index 051b156fda..d5fb725e51 100644
--- a/src/App/ComponentsDocumentation/components/Tables/constants.js
+++ b/src/App/ComponentsDocumentation/components/Tables/constants.js
@@ -10,20 +10,18 @@ const Buttons = ({ actionList, favBtn, deleteBtn }) => (
 		) : (
 			<>
 				<button className="table-button">
-					<i className="material-icons material-icons-outlined">edit</i>
+					<i className="at-pencil small" aria-hidden="true"></i>
 				</button>
 				{deleteBtn ? (
 					<button className="btn btn-secondary">Delete</button>
 				) : (
 					<button className="table-button">
-						<i className="material-icons material-icons-outlined">delete</i>
+						<i className="at-trash small" aria-hidden="true"></i>
 					</button>
 				)}
 				{favBtn && (
 					<button className="table-button">
-						<i className="material-icons material-icons-outlined">
-							favorite_border
-						</i>
+						<i className="at-plus-heart small" aria-hidden="true"></i>
 					</button>
 				)}
 			</>
@@ -214,8 +212,9 @@ export const consistencyTable = (chaos) => {
 		tableData.tbody.map((obj) =>
 			obj.tr.map(
 				(obj) =>
-					(obj.classname = classArray[Math.floor(Math.random() * 3).toString()])
-			)
+					(obj.classname =
+						classArray[Math.floor(Math.random() * 3).toString()]),
+			),
 		);
 	}
 
diff --git a/src/App/ComponentsDocumentation/components/Toast/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Toast/__snapshots__/index.test.js.snap
index 55dded1f9a..7fa4b10fec 100644
--- a/src/App/ComponentsDocumentation/components/Toast/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Toast/__snapshots__/index.test.js.snap
@@ -22,10 +22,8 @@ exports[`Components: Toast Content guidelines renders 1`] = `
         >
           <i
             aria-hidden="true"
-            className="material-icons"
-          >
-            info
-          </i>
+            className="swepay-icon-info-circle-filled"
+          />
           <div
             className="toast-content"
           >
@@ -38,10 +36,9 @@ exports[`Components: Toast Content guidelines renders 1`] = `
             className="toast-close ml-auto"
           >
             <i
-              className="material-icons"
-            >
-              close
-            </i>
+              aria-hidden="true"
+              className="swepay-icon-close"
+            />
           </button>
         </div>
       </div>
diff --git a/src/App/ComponentsDocumentation/components/Toast/constants.js b/src/App/ComponentsDocumentation/components/Toast/constants.js
index 1362ce3bcf..c42c10f760 100644
--- a/src/App/ComponentsDocumentation/components/Toast/constants.js
+++ b/src/App/ComponentsDocumentation/components/Toast/constants.js
@@ -81,7 +81,7 @@ const AlertBox = () => (
 	<Alert
 		id="toast-overview-alert"
 		type="informative"
-		icon={"info-circle"}
+		icon="swepay-icon-info-circle-filled"
 		text={
 			<p>
 				<b>Static code example</b> The code viewer shows an example on how to
diff --git a/src/App/ComponentsDocumentation/components/Toast/index.js b/src/App/ComponentsDocumentation/components/Toast/index.js
index c02fd3c766..f3a93975f0 100644
--- a/src/App/ComponentsDocumentation/components/Toast/index.js
+++ b/src/App/ComponentsDocumentation/components/Toast/index.js
@@ -43,14 +43,15 @@ const Overview = () => (
 				<div className="toast-example-container col-sm-10 col-12 p-0">
 					<div id="toast-container" className="col-12 ml-auto mt-3 p-0">
 						<div className="toast toast-neutral col-sm-11 col-12">
-							<i className="material-icons" aria-hidden="true">
-								info
-							</i>
+							<i
+								className="swepay-icon-info-circle-filled"
+								aria-hidden="true"
+							></i>
 							<div className="toast-content">
 								<b>Short information message</b>
 							</div>
 							<button className="toast-close ml-auto" aria-label="Close button">
-								<i className="material-icons">close</i>
+								<i className="swepay-icon-close" aria-hidden="true"></i>
 							</button>
 						</div>
 					</div>
@@ -69,14 +70,15 @@ const Overview = () => (
 						className="toast-dont-example col-12 m-auto px-0"
 					>
 						<div className="toast toast-neutral">
-							<i className="material-icons" aria-hidden="true">
-								info
-							</i>
+							<i
+								className="swepay-icon-info-circle-filled"
+								aria-hidden="true"
+							></i>
 							<div className="toast-content">
 								<b>Short information message</b>
 							</div>
 							<button className="toast-close ml-auto" aria-label="Close button">
-								<i className="material-icons">close</i>
+								<i className="swepay-icon-close" aria-hidden="true"></i>
 							</button>
 						</div>
 					</div>
@@ -97,14 +99,15 @@ const ContentGuidelines = () => (
 			<div className="toast-example-container py-5">
 				<div id="toast-container" className="m-auto col-12">
 					<div className="toast toast-neutral col-12">
-						<i className="material-icons" aria-hidden="true">
-							info
-						</i>
+						<i
+							className="swepay-icon-info-circle-filled"
+							aria-hidden="true"
+						></i>
 						<div className="toast-content">
 							<b>Message</b>
 						</div>
 						<button className="toast-close ml-auto" aria-label="Close button">
-							<i className="material-icons">close</i>
+							<i className="swepay-icon-close" aria-hidden="true"></i>
 						</button>
 					</div>
 				</div>
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js
index e7632df326..b26a02ed2f 100644
--- a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js
+++ b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js
@@ -26,22 +26,22 @@ test.describe("toast variants are styled and named accordingly", () => {
 		{
 			name: "neutral",
 			linkName: "Neutral",
-			icon: "info",
+			icon: "swepay-icon-info-circle-filled",
 		},
 		{
 			name: "success",
 			linkName: "Success",
-			icon: "check_circle",
+			icon: "swepay-icon-check-circle-filled",
 		},
 		{
 			name: "warning",
 			linkName: "Warning",
-			icon: "warning",
+			icon: "swepay-icon-warning-triangle-filled",
 		},
 		{
 			name: "danger",
 			linkName: "Danger",
-			icon: "error",
+			icon: "swepay-icon-error-triangle-filled",
 		},
 	];
 
@@ -53,18 +53,17 @@ test.describe("toast variants are styled and named accordingly", () => {
 				.getByRole("button", { name: `Show ${variant.linkName} toast` })
 				.click();
 
-			const toast = page.locator("#overviewToast");
+			const componentPreviewContainer = page.locator("#overviewToast");
+			const toast = componentPreviewContainer.locator("#toast-container");
 
-			await expect(
-				toast.getByText(variant.icon, { exact: true }),
-			).toBeVisible();
+			await expect(toast.locator(".toast > i")).toHaveClass(variant.icon);
 			await expect(toast.getByText(`${variant.linkName}  title`)).toBeVisible();
 
 			const brand = (await page.title()).includes("Swedbank")
 				? "SwedbankPay"
 				: "PayEx";
 
-			await expect(toast.locator("css=.toast")).toHaveScreenshot(
+			await expect(toast).toHaveScreenshot(
 				`${brand}-${variant.name}-toast.png`,
 				{
 					maxDiffPixelRatio: 0.001,
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Chrome-darwin.png
index 5298d2574d..cf6ae080a9 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Safari-darwin.png
index 1dc989fe96..ca0cfc05ee 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-chromium-darwin.png
index 90cbb75798..58001a2ac6 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-firefox-darwin.png
index 84c99a923e..ffc4f7c3e6 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-webkit-darwin.png
index d0222d892f..bdb06138ef 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Chrome-darwin.png
index 80f0b24c23..9f9a631e7e 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Safari-darwin.png
index 506d04b571..5aba29625f 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-chromium-darwin.png
index 5c5e9de66d..ae9b41e3e6 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-firefox-darwin.png
index 43f8c9abf0..98d1698db8 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-webkit-darwin.png
index e00c26186f..171ffd3469 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Chrome-darwin.png
index 786f17cbd1..1da4517a6e 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Safari-darwin.png
index 1a6f78fbd4..4584aa0c70 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-chromium-darwin.png
index 59613d1a9d..bee518453a 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-firefox-darwin.png
index 838f5afc93..3d1bcc48a9 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-webkit-darwin.png
index 235c7296cf..bf7eacae64 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Chrome-darwin.png
index bf41542da0..f996a879af 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Safari-darwin.png
index 74e7972b67..2c6e4ec55e 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-chromium-darwin.png
index 34022bdcf1..07cf4f919b 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-firefox-darwin.png
index e70b8caaae..bc8641fbb1 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-webkit-darwin.png
index 80285f2853..d45c05562c 100644
Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Tooltips/constants.js b/src/App/ComponentsDocumentation/components/Tooltips/constants.js
index 891d85d5f6..a02a97dcbd 100644
--- a/src/App/ComponentsDocumentation/components/Tooltips/constants.js
+++ b/src/App/ComponentsDocumentation/components/Tooltips/constants.js
@@ -2,7 +2,7 @@ import React from "react";
 import TooltipComponent from "@components/Tooltips";
 
 const Tooltip = ({ position }) => (
-	<TooltipComponent position={position} icon="edit" text="Edit" />
+	<TooltipComponent position={position} icon="at-pencil" text="Edit" />
 );
 
 export const tooltipShowCase = {
diff --git a/src/App/ComponentsDocumentation/components/Tooltips/index.js b/src/App/ComponentsDocumentation/components/Tooltips/index.js
index c298b98aef..47f10ab03a 100644
--- a/src/App/ComponentsDocumentation/components/Tooltips/index.js
+++ b/src/App/ComponentsDocumentation/components/Tooltips/index.js
@@ -41,7 +41,7 @@ const Overview = () => (
 							type="link"
 							label="Contact us"
 							id="do-example-tooltip"
-							icon="chat_bubble_outline"
+							icon="at-comment-dots"
 						/>
 					</div>
 				</div>
@@ -53,7 +53,7 @@ const Overview = () => (
 						<TooltipComponent
 							isVisible
 							text="Contact us"
-							icon="chat_bubble_outline"
+							icon="at-comment-dots"
 						/>
 					</div>
 				</div>
diff --git a/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap
index f2db636cc6..5d93a966c2 100644
--- a/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap
@@ -119,10 +119,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
               
 		
               <i
-                className="material-icons topbar-btn-icon"
-              >
-                menu
-              </i>
+                aria-hidden="true"
+                className="swepay-icon-menu-hamburger topbar-btn-icon"
+              />
               
 		
             </button>
@@ -134,10 +133,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
               
 
               <i
-                className="material-icons topbar-btn-icon"
-              >
-                close
-              </i>
+                aria-hidden="true"
+                className="swepay-icon-close topbar-btn-icon"
+              />
               
 		
             </button>
@@ -179,10 +177,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                   
 
                   <i
-                    className="material-icons"
-                  >
-                    home
-                  </i>
+                    aria-hidden="true"
+                    className="at-home small"
+                  />
                   
 
                   
@@ -201,10 +198,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                   
 
                   <i
-                    className="material-icons"
-                  >
-                    shopping_cart
-                  </i>
+                    aria-hidden="true"
+                    className="at-shop-cart small"
+                  />
                   
 
                   
@@ -223,10 +219,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                   
 
                   <i
-                    className="material-icons"
-                  >
-                    settings
-                  </i>
+                    aria-hidden="true"
+                    className="at-gear small"
+                  />
                   
 
                   
@@ -397,13 +392,13 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                               &lt;button type="button" class="topbar-btn" aria-label="Open menu" aria-haspopup="menu" aria-expanded="false" aria-controls="topbar-nav"&gt;
                   
 
-                                  &lt;i class="material-icons topbar-btn-icon"&gt;menu&lt;/i&gt;
+                                  &lt;i class="swepay-icon-menu-hamburger topbar-btn-icon" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                               &lt;/button&gt;&lt;button type="button" class="topbar-close" aria-label="Close menu"&gt;
                   
 
-                                  &lt;i class="material-icons topbar-btn-icon"&gt;close&lt;/i&gt;
+                                  &lt;i class="swepay-icon-close topbar-btn-icon" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                               &lt;/button&gt;
@@ -429,7 +424,7 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                                       &lt;a href="#" class="active"&gt;
                   
 
-                                          &lt;i class="material-icons"&gt;home&lt;/i&gt;
+                                          &lt;i class="at-home small" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                   
@@ -440,7 +435,7 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                                       &lt;a href="#"&gt;
                   
 
-                                          &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
+                                          &lt;i class="at-shop-cart small" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                   
@@ -451,7 +446,7 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                                       &lt;a href="#"&gt;
                   
 
-                                          &lt;i class="material-icons"&gt;settings&lt;/i&gt;
+                                          &lt;i class="at-gear small" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                   
@@ -531,10 +526,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
             
 		
             <i
-              className="material-icons topbar-btn-icon"
-            >
-              menu
-            </i>
+              aria-hidden="true"
+              className="swepay-icon-menu-hamburger topbar-btn-icon"
+            />
             
 		
           </button>
@@ -546,10 +540,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
             
 
             <i
-              className="material-icons topbar-btn-icon"
-            >
-              close
-            </i>
+              aria-hidden="true"
+              className="swepay-icon-close topbar-btn-icon"
+            />
             
 		
           </button>
@@ -801,10 +794,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                 
 
                 <i
-                  className="material-icons"
-                >
-                  sync_alt
-                </i>
+                  aria-hidden="true"
+                  className="at-movement-arrows-left-right small"
+                />
                 
 
                 
@@ -823,10 +815,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                 
 
                 <i
-                  className="material-icons"
-                >
-                  arrow_forward
-                </i>
+                  aria-hidden="true"
+                  className="at-arrow-right small"
+                />
                 
 
                 
@@ -845,10 +836,9 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                 
 
                 <i
-                  className="material-icons"
-                >
-                  exit_to_app
-                </i>
+                  aria-hidden="true"
+                  className="at-exit small"
+                />
                 
 
                 <span>
@@ -1135,13 +1125,13 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                           &lt;button type="button" class="topbar-btn" aria-label="Open menu" aria-haspopup="menu" aria-expanded="false" aria-controls="topbar-nav"&gt;
                   
 
-                              &lt;i class="material-icons topbar-btn-icon"&gt;menu&lt;/i&gt;
+                              &lt;i class="swepay-icon-menu-hamburger topbar-btn-icon" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                           &lt;/button&gt;&lt;button type="button" class="topbar-close" aria-label="Close menu"&gt;
                   
 
-                              &lt;i class="material-icons topbar-btn-icon"&gt;close&lt;/i&gt;
+                              &lt;i class="swepay-icon-close topbar-btn-icon" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                           &lt;/button&gt;
@@ -1279,7 +1269,7 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                                   &lt;a href="#" class=" pinned topbar-link-right"&gt;
                   
 
-                                      &lt;i class="material-icons"&gt;sync_alt&lt;/i&gt;
+                                      &lt;i class="at-movement-arrows-left-right small" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                   
@@ -1290,7 +1280,7 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                                   &lt;a href="#"&gt;
                   
 
-                                      &lt;i class="material-icons"&gt;arrow_forward&lt;/i&gt;
+                                      &lt;i class="at-arrow-right small" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                   
@@ -1301,7 +1291,7 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = `
                                   &lt;a class="topbar-link-right" href="#"&gt;
                   
 
-                                      &lt;i class="material-icons"&gt;exit_to_app&lt;/i&gt;
+                                      &lt;i class="at-exit small" aria-hidden="true"&gt;&lt;/i&gt;
                   
 
                                       &lt;span&gt;Log out&lt;/span&gt;
diff --git a/src/App/ComponentsDocumentation/components/Topbar/constants.js b/src/App/ComponentsDocumentation/components/Topbar/constants.js
index 191930391d..823cacbd8f 100644
--- a/src/App/ComponentsDocumentation/components/Topbar/constants.js
+++ b/src/App/ComponentsDocumentation/components/Topbar/constants.js
@@ -54,13 +54,13 @@ export const menu = {
 		},
 		{
 			name: "Switch to acquiring",
-			icon: "sync_alt",
+			icon: "at-movement-arrows-left-right small",
 			pinned: true,
 			firstPushRight: true,
 		},
 		{
 			name: "Change company",
-			icon: "arrow_forward",
+			icon: "at-arrow-right small",
 		},
 	],
 };
@@ -68,20 +68,20 @@ export const menu = {
 export const menuLegacy = {
 	btn: {
 		name: "Menu",
-		icon: "menu",
+		icon: "menu small",
 	},
 	items: [
 		{
 			name: "Home",
-			icon: "home",
+			icon: "at-home small",
 		},
 		{
 			name: "Purchases",
-			icon: "shopping_cart",
+			icon: "at-shop-cart small",
 		},
 		{
 			name: "Settings",
-			icon: "settings",
+			icon: "at-gear small",
 		},
 	],
 };
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Chrome-darwin.png
index ed561435e2..6969493a29 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Safari-darwin.png
index cfc0d53efd..3764c1385e 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-chromium-darwin.png
index ec18f8fbba..95f711c474 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-firefox-darwin.png
index cafb53254a..299880c4b1 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-webkit-darwin.png
index b1b065fe65..f82cf2f530 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-closed-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-chromium-darwin.png
index 3292fec76d..3cb410f7ca 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-firefox-darwin.png
index 3663c10356..edcc97aa1a 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-webkit-darwin.png
index 7ff338436e..424bcede60 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-desktop-links-ui-feedbacks-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Chrome-darwin.png
index ed561435e2..6969493a29 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Safari-darwin.png
index cfc0d53efd..3764c1385e 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-chromium-darwin.png
index 7517f73125..54f4c013ee 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-firefox-darwin.png
index 9d9457b0ec..c9d9912d83 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-webkit-darwin.png
index 6f6b83c964..8bcbfa6a62 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-closed-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Chrome-darwin.png
index 30c13d00cf..62f769755c 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Chrome-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Safari-darwin.png
index c1f1ad612a..3e838e32f1 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-Mobile-Safari-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-chromium-darwin.png
index e3dc2866ec..39dfb9c310 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-firefox-darwin.png
index fe9fc39c98..314f571a06 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png
index 9cac506809..a2c32be1f1 100644
Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js b/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js
index d1d70fd7af..6e96e9e211 100644
--- a/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js
+++ b/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js
@@ -90,7 +90,10 @@ export const Migration = () => (
 								aria-controls="topbar-nav"
 							>
 								{"\n"}
-								<i class="material-icons topbar-btn-icon">menu</i>
+								<i
+									class="swepay-icon-menu-hamburger topbar-btn-icon"
+									aria-hidden="true"
+								></i>
 								{"\n"}
 							</button>
 							{"\n"}
@@ -100,7 +103,10 @@ export const Migration = () => (
 								aria-label="Close menu"
 							>
 								{"\n"}
-								<i class="material-icons topbar-btn-icon">close</i>
+								<i
+									class="swepay-icon-close topbar-btn-icon"
+									aria-hidden="true"
+								></i>
 								{"\n"}
 							</button>
 							{"\n"}
@@ -180,7 +186,10 @@ export const Migration = () => (
 								aria-controls="topbar-nav"
 							>
 								{"\n"}
-								<i class="material-icons topbar-btn-icon">menu</i>
+								<i
+									class="swepay-icon-menu-hamburger topbar-btn-icon"
+									aria-hidden="true"
+								></i>
 								{"\n"}
 							</button>
 							{"\n"}
@@ -251,13 +260,19 @@ export const Migration = () => (
 							aria-controls="topbar-nav"
 						>
 							{"\n"}
-							<i class="material-icons topbar-btn-icon">menu</i>
+							<i
+								class="swepay-icon-menu-hamburger topbar-btn-icon"
+								aria-hidden="true"
+							></i>
 							{"\n"}
 						</button>
 						{"\n"}
 						<button type="button" class="topbar-close" aria-label="Close menu">
 							{"\n"}
-							<i class="material-icons topbar-btn-icon">close</i>
+							<i
+								class="swepay-icon-close topbar-btn-icon"
+								aria-hidden="true"
+							></i>
 							{"\n"}
 						</button>
 						{"\n"}
@@ -278,7 +293,10 @@ export const Migration = () => (
 							aria-controls="topbar-nav"
 						>
 							{"\n"}
-							<i class="material-icons topbar-btn-icon">menu</i>
+							<i
+								class="swepay-icon-menu-hamburger topbar-btn-icon"
+								aria-hidden="true"
+							></i>
 							{"\n"}
 						</button>
 					</EditableComponentPreview>
@@ -376,11 +394,7 @@ export const Migration = () => (
 						title="Close menu"
 					>
 						{"\n"}
-						<i class="material-icons-outlined" aria-hidden="true">
-							{"\n"}
-							close
-							{"\n"}
-						</i>
+						<i class="swepay-icon-close" aria-hidden="true"></i>
 						{"\n"}
 					</button>
 					{"\n"}
@@ -404,11 +418,7 @@ export const Migration = () => (
 					{"\n"}
 					<button class="btn btn-secondary btn-sm" type="button">
 						{"\n"}
-						<i class="material-icons-outlined" aria-hidden="true">
-							{"\n"}
-							exit_to_app
-							{"\n"}
-						</i>
+						<i class="at-exit small" aria-hidden="true"></i>
 						{"\n"}
 						<span>Log out</span>
 						{"\n"}
diff --git a/src/App/Home/index.js b/src/App/Home/index.js
index 249ea59dd2..2777484463 100644
--- a/src/App/Home/index.js
+++ b/src/App/Home/index.js
@@ -137,7 +137,7 @@ const Home = () => {
 					</span>
 					<Alert
 						type="informative"
-						icon="info-circle"
+						icon="swepay-icon-info-circle-filled"
 						text={
 							<p>
 								<b>Versioning:</b>
diff --git a/src/App/Identity/identity/Logotype/constants.js b/src/App/Identity/identity/Logotype/constants.js
index fb338d2821..4a73ee2c4a 100644
--- a/src/App/Identity/identity/Logotype/constants.js
+++ b/src/App/Identity/identity/Logotype/constants.js
@@ -32,7 +32,7 @@ export const logoBlack = {
 								description: (
 									<Alert
 										type="warning"
-										icon="warning"
+										icon="swepay-icon-warning-triangle-filled"
 										className="mb-0 mt-4"
 										text={
 											<p>
@@ -94,7 +94,7 @@ export const logoBlack = {
 								description: (
 									<Alert
 										type="warning"
-										icon="warning"
+										icon="swepay-icon-warning-triangle-filled"
 										className="mb-0 mt-4"
 										text={
 											<p>
@@ -178,7 +178,7 @@ export const logoWhite = {
 								description: (
 									<Alert
 										type="warning"
-										icon="warning"
+										icon="swepay-icon-warning-triangle-filled"
 										className="mb-0 mt-4"
 										text={
 											<p>
@@ -245,7 +245,7 @@ export const logoWhite = {
 								description: (
 									<Alert
 										type="warning"
-										icon="warning"
+										icon="swepay-icon-warning-triangle-filled"
 										className="mb-0 mt-4"
 										text={
 											<p>
diff --git a/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap
index 0e42f9c2e9..f36cac858e 100644
--- a/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap
@@ -153,10 +153,8 @@ Array [
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        file_download
-      </i>
+        className="at-download-arrow-down small"
+      />
       <span>
         Akkurat Mono
       </span>
diff --git a/src/App/Identity/identity/Typography/index.js b/src/App/Identity/identity/Typography/index.js
index 53134f7263..c9f5acbc24 100644
--- a/src/App/Identity/identity/Typography/index.js
+++ b/src/App/Identity/identity/Typography/index.js
@@ -685,7 +685,7 @@ const AkkuratMono = () => (
 			</p>
 			<Button
 				type="primary"
-				icon="file_download"
+				icon="at-download-arrow-down small"
 				href={`${basename}release/fonts/AkkuratMono.zip`}
 				label="Akkurat Mono"
 			/>
diff --git a/src/App/Patterns/components/LoginForm/index.js b/src/App/Patterns/components/LoginForm/index.js
index 1eef285fc4..deba1a40da 100644
--- a/src/App/Patterns/components/LoginForm/index.js
+++ b/src/App/Patterns/components/LoginForm/index.js
@@ -75,8 +75,8 @@ const LoginForm = ({
 			{alternativeLogins && <AlternativeLogins />}
 			{error && (
 				<Alert
-					icon="exclamation-triangle"
 					type="danger"
+					icon="swepay-icon-error-triangle-filled"
 					text={
 						<p>
 							<b>Error.</b> Incorrect password
diff --git a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
index 1d06d867e9..add8c9a74b 100644
--- a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
+++ b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
@@ -1541,7 +1541,7 @@ exports[`Forms: index renders 1`] = `
 
                 <i
                   aria-hidden="true"
-                  className="at-exclamation-triangle"
+                  className="swepay-icon-error-triangle-filled"
                 />
                 <p>
                   <b>
diff --git a/src/App/components/ActionList/__snapshots__/index.test.js.snap b/src/App/components/ActionList/__snapshots__/index.test.js.snap
index 5298c21f38..eba6b692dd 100644
--- a/src/App/components/ActionList/__snapshots__/index.test.js.snap
+++ b/src/App/components/ActionList/__snapshots__/index.test.js.snap
@@ -36,10 +36,8 @@ exports[`Component: ActionList .action-menu prevents default when an item is cli
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        bookmark
-      </i>
+        className="at-bookmark-star small"
+      />
       Add bookmark
     </a>
     
@@ -50,10 +48,8 @@ exports[`Component: ActionList .action-menu prevents default when an item is cli
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        business_center
-      </i>
+        className="at-business-suitcase small"
+      />
       Add client
     </a>
     
@@ -64,10 +60,8 @@ exports[`Component: ActionList .action-menu prevents default when an item is cli
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        add_circle
-      </i>
+        className="at-plus-circle small"
+      />
       Add document
     </a>
     
@@ -78,10 +72,8 @@ exports[`Component: ActionList .action-menu prevents default when an item is cli
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        person_add
-      </i>
+        className="at-user-plus small"
+      />
       Add user
     </a>
     
@@ -771,10 +763,8 @@ exports[`Component: ActionList renders with a custom .action-toggle if it is pro
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        bookmark
-      </i>
+        className="at-bookmark-star small"
+      />
       Add bookmark
     </a>
     
@@ -785,10 +775,8 @@ exports[`Component: ActionList renders with a custom .action-toggle if it is pro
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        business_center
-      </i>
+        className="at-business-suitcase small"
+      />
       Add client
     </a>
     
@@ -799,10 +787,8 @@ exports[`Component: ActionList renders with a custom .action-toggle if it is pro
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        add_circle
-      </i>
+        className="at-plus-circle small"
+      />
       Add document
     </a>
     
@@ -813,10 +799,8 @@ exports[`Component: ActionList renders with a custom .action-toggle if it is pro
     >
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        person_add
-      </i>
+        className="at-user-plus small"
+      />
       Add user
     </a>
     
diff --git a/src/App/components/ActionList/index.js b/src/App/components/ActionList/index.js
index e63124b45b..b4f915271b 100644
--- a/src/App/components/ActionList/index.js
+++ b/src/App/components/ActionList/index.js
@@ -1,8 +1,6 @@
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 
-import { Icon } from "@docutils";
-
 const ActionListToggle = () => (
 	<>
 		<button
@@ -38,7 +36,9 @@ const ActionList = ({ id, classNames, toggleBtn, items }) => (
 					? items.map(({ name, icon }, i) => (
 							<Fragment key={i}>
 								<a href="#" onClick={(e) => e.preventDefault()}>
-									{icon ? <Icon type={icon} /> : null}
+									{icon ? (
+										<i className={`${icon} small`} aria-hidden="true" />
+									) : null}
 									{name}
 								</a>
 								{"\n"}
diff --git a/src/App/components/ActionList/index.test.js b/src/App/components/ActionList/index.test.js
index 9ae867b844..95ea5e9beb 100644
--- a/src/App/components/ActionList/index.test.js
+++ b/src/App/components/ActionList/index.test.js
@@ -9,19 +9,19 @@ import ActionList from "./index";
 const items = [
 	{
 		name: "Add bookmark",
-		icon: "bookmark",
+		icon: "at-bookmark-star",
 	},
 	{
 		name: "Add client",
-		icon: "business_center",
+		icon: "at-business-suitcase",
 	},
 	{
 		name: "Add document",
-		icon: "add_circle",
+		icon: "at-plus-circle",
 	},
 	{
 		name: "Add user",
-		icon: "person_add",
+		icon: "at-user-plus",
 	},
 ];
 
@@ -39,7 +39,7 @@ describe("Component: ActionList", () => {
 					<>
 						<ActionList />
 						<ActionList items={items} />
-					</>
+					</>,
 				);
 
 				expect(console.error).toHaveBeenCalledTimes(1);
@@ -49,7 +49,7 @@ describe("Component: ActionList", () => {
 						<>
 							<ActionList />
 							<ActionList items={items} />
-						</>
+						</>,
 					)
 					.toJSON();
 
@@ -77,7 +77,7 @@ describe("Component: ActionList", () => {
 				<>
 					<ActionList items={"test"} />
 					<ActionList items={items} />
-				</>
+				</>,
 			);
 
 			expect(console.error).toHaveBeenCalledTimes(1);
@@ -87,7 +87,7 @@ describe("Component: ActionList", () => {
 					<>
 						<ActionList items={"test"} />
 						<ActionList items={items} />
-					</>
+					</>,
 				)
 				.toJSON();
 
@@ -101,7 +101,7 @@ describe("Component: ActionList", () => {
 				<>
 					<ActionList items={items} id={1} />
 					<ActionList items={items} id={"test-id"} />
-				</>
+				</>,
 			);
 
 			expect(console.error).toHaveBeenCalledTimes(1);
@@ -111,7 +111,7 @@ describe("Component: ActionList", () => {
 					<>
 						<ActionList items={items} id={1} />
 						<ActionList items={items} id={"test-id"} />
-					</>
+					</>,
 				)
 				.toJSON();
 
@@ -125,7 +125,7 @@ describe("Component: ActionList", () => {
 				<>
 					<ActionList items={items} classNames={2} />
 					<ActionList items={items} classNames={"test-class"} />
-				</>
+				</>,
 			);
 
 			expect(console.error).toHaveBeenCalledTimes(1);
@@ -135,7 +135,7 @@ describe("Component: ActionList", () => {
 					<>
 						<ActionList items={items} classNames={2} />
 						<ActionList items={items} classNames={"test-class"} />
-					</>
+					</>,
 				)
 				.toJSON();
 
@@ -152,11 +152,11 @@ describe("Component: ActionList", () => {
 						Custom action-toggle
 					</a>
 				}
-			/>
+			/>,
 		);
 
 		expect(screen.getAllByRole("link")[0]).toHaveTextContent(
-			"Custom action-toggle"
+			"Custom action-toggle",
 		);
 
 		const componentForSnap = renderer
@@ -168,7 +168,7 @@ describe("Component: ActionList", () => {
 							Custom action-toggle
 						</a>
 					}
-				/>
+				/>,
 			)
 			.toJSON();
 
diff --git a/src/App/components/Alert/__snapshots__/index.test.js.snap b/src/App/components/Alert/__snapshots__/index.test.js.snap
index 24d37811fc..368f7cbaf2 100644
--- a/src/App/components/Alert/__snapshots__/index.test.js.snap
+++ b/src/App/components/Alert/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`Component: Alert prop type is marked as required 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-"
+    className=""
   />
   
 
@@ -23,7 +23,7 @@ exports[`Component: Alert renders an alert with a close-button 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-"
+    className=""
   />
   
 
@@ -36,10 +36,9 @@ exports[`Component: Alert renders an alert with a close-button 1`] = `
     
 		
     <i
-      className="material-icons"
-    >
-      close
-    </i>
+      aria-hidden="true"
+      className="swepay-icon-close"
+    />
     
 	
   </button>
@@ -56,7 +55,7 @@ exports[`Component: Alert renders an alert with icon 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-test"
+    className="test"
   />
   
 
@@ -71,7 +70,7 @@ exports[`Component: Alert renders an alert with text 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-"
+    className=""
   />
   <p>
     test
@@ -89,7 +88,7 @@ exports[`Component: Alert renders an alert with the correct type recieved from i
 
   <i
     aria-hidden="true"
-    className="at-"
+    className=""
   />
   
 
@@ -104,7 +103,7 @@ exports[`Component: Alert renders an alert without a close-button if no close pr
 
   <i
     aria-hidden="true"
-    className="at-"
+    className=""
   />
   
 
@@ -119,7 +118,7 @@ exports[`Component: Alert renders an alert without an icon if no icon prop is pr
 
   <i
     aria-hidden="true"
-    className="at-"
+    className=""
   />
   
 
@@ -134,7 +133,7 @@ exports[`Component: Alert renders an alert without text if no text prop is provi
 
   <i
     aria-hidden="true"
-    className="at-"
+    className=""
   />
   
 
diff --git a/src/App/components/Alert/index.js b/src/App/components/Alert/index.js
index 9dd75620e9..b4bce1e98e 100644
--- a/src/App/components/Alert/index.js
+++ b/src/App/components/Alert/index.js
@@ -12,7 +12,7 @@ const Alert = ({ id, type, icon = "", close, text, className }) => {
 	return (
 		<div id={id} className={alertClasses}>
 			{"\n"}
-			<i className={`at-${icon}`} aria-hidden="true"></i>
+			<i className={icon} aria-hidden="true"></i>
 			{text}
 			{"\n"}
 			{close ? (
@@ -24,7 +24,7 @@ const Alert = ({ id, type, icon = "", close, text, className }) => {
 						onClick={(e) => e.preventDefault()}
 					>
 						{"\n\t\t"}
-						<i className="material-icons">close</i>
+						<i className="swepay-icon-close" aria-hidden="true"></i>
 						{"\n\t"}
 					</button>
 					{"\n"}
diff --git a/src/App/components/Alert/index.test.js b/src/App/components/Alert/index.test.js
index bb2f972b89..483ed63cb0 100644
--- a/src/App/components/Alert/index.test.js
+++ b/src/App/components/Alert/index.test.js
@@ -35,7 +35,7 @@ describe("Component: Alert", () => {
 		const { container } = render(<Alert type="test" icon="test" />);
 
 		expect(container.querySelectorAll("i").length).toBe(1);
-		expect(container.querySelector("i")).toHaveClass("at-test");
+		expect(container.querySelector("i")).toHaveClass("test");
 		// checks icon is hidden for screen-readers
 		expect(container.querySelector("i")).toHaveAttribute("aria-hidden", "true");
 
diff --git a/src/App/components/Button/__snapshots__/index.test.js.snap b/src/App/components/Button/__snapshots__/index.test.js.snap
index 31dfaa2b84..607598bbac 100644
--- a/src/App/components/Button/__snapshots__/index.test.js.snap
+++ b/src/App/components/Button/__snapshots__/index.test.js.snap
@@ -106,10 +106,8 @@ exports[`Component: Button - Anchor tag: renders a button with icon and label in
 >
   <i
     aria-hidden="true"
-    className="material-icons"
-  >
-    test
-  </i>
+    className="test"
+  />
   <span>
     test
   </span>
@@ -133,10 +131,8 @@ exports[`Component: Button - Anchor tag: renders a button with icon inside an an
 >
   <i
     aria-hidden="true"
-    className="material-icons"
-  >
-    test
-  </i>
+    className="test-icon"
+  />
 </a>
 `;
 
@@ -240,10 +236,8 @@ exports[`Component: Button - Button tag: renders a button with an icon when prop
 		
   <i
     aria-hidden="true"
-    className="material-icons-outlined"
-  >
-    test
-  </i>
+    className="test"
+  />
   
 	
   
@@ -281,10 +275,8 @@ exports[`Component: Button - Button tag: renders a button with icon and label wh
 		
   <i
     aria-hidden="true"
-    className="material-icons-outlined"
-  >
-    icon
-  </i>
+    className="icon"
+  />
   
 	
   <span>
diff --git a/src/App/components/Button/index.js b/src/App/components/Button/index.js
index 29bbb85d0d..94ecf3e293 100644
--- a/src/App/components/Button/index.js
+++ b/src/App/components/Button/index.js
@@ -31,7 +31,7 @@ const Button = ({
 		active && href ? "active" : null,
 		disabled && href ? "disabled" : null,
 		bankId ? "btn-bank-id" : null,
-		className ? className : null
+		className ? className : null,
 	);
 
 	const attrs = {
@@ -53,11 +53,7 @@ const Button = ({
 	if (href) {
 		return (
 			<a className={btnClasses} {...attrs} onClick={(e) => e.preventDefault()}>
-				{icon ? (
-					<i className="material-icons" aria-hidden="true">
-						{icon}
-					</i>
-				) : null}
+				{icon ? <i className={icon} aria-hidden="true"></i> : null}
 				{icon && label ? <span>{label}</span> : label}
 			</a>
 		);
@@ -72,9 +68,7 @@ const Button = ({
 			{icon ? "\n\t\t" : null}
 			{icon && !iconAfter ? (
 				<>
-					<i className="material-icons-outlined" aria-hidden="true">
-						{icon}
-					</i>
+					<i className={icon} aria-hidden="true"></i>
 					{"\n\t"}
 				</>
 			) : null}
@@ -103,9 +97,7 @@ const Button = ({
 				<>
 					{icon && iconAfter ? (
 						<>
-							<i className="material-icons ml-2" aria-hidden="true">
-								{icon}
-							</i>
+							<i className={`${icon} ml-2`} aria-hidden="true"></i>
 							{"\n\t\t"}
 						</>
 					) : null}
diff --git a/src/App/components/Button/index.test.js b/src/App/components/Button/index.test.js
index 92c05fb2db..2328f36d37 100644
--- a/src/App/components/Button/index.test.js
+++ b/src/App/components/Button/index.test.js
@@ -30,7 +30,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("href", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" />
+				<Button type="primary" href="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -44,7 +44,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("btn btn-primary");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" label="test" />
+				<Button type="primary" href="test" label="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -56,7 +56,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("btn-size-test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" size="size-test" />
+				<Button type="primary" href="test" size="size-test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -69,7 +69,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("loading");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" loading />
+				<Button type="primary" href="test" loading />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -81,7 +81,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("btn-block");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" fullWidth />
+				<Button type="primary" href="test" fullWidth />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -93,7 +93,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("active");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" active />
+				<Button type="primary" href="test" active />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -106,7 +106,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("id", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" id="test" />
+				<Button type="primary" href="test" id="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -118,7 +118,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("name", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" name="test" />
+				<Button type="primary" href="test" name="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -132,7 +132,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toBeDisabled();
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" disabled />
+				<Button type="primary" href="test" disabled />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -140,18 +140,17 @@ describe("Component: Button -", () => {
 
 		it("renders a button with icon inside an anchor tag when prop href and icon is provided", () => {
 			const { container } = render(
-				<Button type="primary" href="test" icon="test" />
+				<Button type="primary" href="test" icon="test-icon" />,
 			);
 
-			expect(container.querySelector("i")).toHaveClass("material-icons");
-			expect(container.querySelector("i")).toHaveTextContent("test");
+			expect(container.querySelector("i")).toHaveClass("test-icon");
 			expect(container.querySelector("i")).toHaveAttribute(
 				"aria-hidden",
-				"true"
+				"true",
 			);
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" icon="test" />
+				<Button type="primary" href="test" icon="test-icon" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -159,21 +158,20 @@ describe("Component: Button -", () => {
 
 		it("renders a button with icon and label inside a span inside an anchor tag when prop href, label and icon is provided", () => {
 			const { container } = render(
-				<Button type="primary" href="test" icon="test" label="test" />
+				<Button type="primary" href="test" icon="test-icon" label="test" />,
 			);
 
-			expect(container.querySelector("i")).toHaveClass("material-icons");
-			expect(container.querySelector("i")).toHaveTextContent("test");
+			expect(container.querySelector("i")).toHaveClass("test-icon");
 			expect(container.querySelector("i")).toHaveAttribute(
 				"aria-hidden",
-				"true"
+				"true",
 			);
 			expect(
-				screen.getByRole("button").querySelector("span")
+				screen.getByRole("button").querySelector("span"),
 			).toHaveTextContent("test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" href="test" icon="test" label="test" />
+				<Button type="primary" href="test" icon="test" label="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -198,7 +196,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("btn-size-test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input size="size-test" />
+				<Button type="primary" input size="size-test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -210,7 +208,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("loading");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input loading />
+				<Button type="primary" input loading />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -222,7 +220,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("btn-block");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input fullWidth />
+				<Button type="primary" input fullWidth />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -235,7 +233,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("active");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input active />
+				<Button type="primary" input active />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -248,7 +246,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("textbox")).toHaveAttribute("type", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input btnType="test" />
+				<Button type="primary" input btnType="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -261,7 +259,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("id", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input id="test" />
+				<Button type="primary" input id="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -273,7 +271,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("name", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input name="test" />
+				<Button type="primary" input name="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -285,7 +283,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toBeDisabled();
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input disabled />
+				<Button type="primary" input disabled />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -297,7 +295,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("value", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" input value="test" />
+				<Button type="primary" input value="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -321,7 +319,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveTextContent("test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" label="test" />
+				<Button type="primary" label="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -335,7 +333,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("btn-size-test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" size="size-test" />
+				<Button type="primary" size="size-test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -347,7 +345,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("loading");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" loading />
+				<Button type="primary" loading />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -359,7 +357,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("btn-block");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" fullWidth />
+				<Button type="primary" fullWidth />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -372,7 +370,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveClass("active");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" active />
+				<Button type="primary" active />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -384,7 +382,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("type", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" btnType="test" />
+				<Button type="primary" btnType="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -396,7 +394,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("id", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" id="test" />
+				<Button type="primary" id="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -408,7 +406,7 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toHaveAttribute("name", "test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" name="test" />
+				<Button type="primary" name="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -420,52 +418,43 @@ describe("Component: Button -", () => {
 			expect(screen.getByRole("button")).toBeDisabled();
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" disabled />
+				<Button type="primary" disabled />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
 		});
 
 		it("renders a button with an icon when prop icon is provided", () => {
-			render(<Button type="primary" icon="test" />);
+			render(<Button type="primary" icon="test-icon" />);
 
 			expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-				"material-icons-outlined"
-			);
-			expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-				"test"
+				"test-icon",
 			);
 			expect(screen.getByRole("button").querySelector("i")).toHaveAttribute(
 				"aria-hidden",
-				"true"
+				"true",
 			);
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" icon="test" />
+				<Button type="primary" icon="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
 		});
 
 		it("renders a button with icon and label when prop icon and label is provided", () => {
-			render(<Button type="primary" icon="icon" label="test" />);
+			render(<Button type="primary" icon="test-icon" label="test" />);
 
 			expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-				"material-icons-outlined"
-			);
-			expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-				"icon"
+				"test-icon",
 			);
 			expect(screen.getByRole("button").querySelector("i")).toHaveAttribute(
 				"aria-hidden",
-				"true"
+				"true",
 			);
-			expect(
-				screen.getByRole("button").querySelector("span")
-			).toHaveTextContent("test");
 
 			const componentForSnap = renderer.create(
-				<Button type="primary" icon="icon" label="test" />
+				<Button type="primary" icon="icon" label="test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
diff --git a/src/App/components/CodeTags/__snapshots__/index.test.js.snap b/src/App/components/CodeTags/__snapshots__/index.test.js.snap
index 096a5ba594..71b91bb1a4 100644
--- a/src/App/components/CodeTags/__snapshots__/index.test.js.snap
+++ b/src/App/components/CodeTags/__snapshots__/index.test.js.snap
@@ -28,18 +28,18 @@ exports[`Component: CodeTags renders with class removable when removable is prov
 <span
   className="tag tag-primary removable"
 >
+  
+
   test
+  
+
   <button
+    aria-label="remove tag"
     className="close-button"
     type="button"
-  >
-    <i
-      aria-label="remove tag"
-      className="material-icons m-auto"
-    >
-      close
-    </i>
-  </button>
+  />
+  
+
 </span>
 `;
 
diff --git a/src/App/components/CodeTags/index.js b/src/App/components/CodeTags/index.js
index 6b840e6e29..ad557ad8f6 100644
--- a/src/App/components/CodeTags/index.js
+++ b/src/App/components/CodeTags/index.js
@@ -11,13 +11,18 @@ const CodeTags = ({ className, type, code, text, removable }) => (
 					className ? ` ${className}` : ""
 				}`}
 			>
+				{removable && <>{"\n"}</>}
 				{text}
 				{removable && (
-					<button type="button" className="close-button">
-						<i className="material-icons m-auto" aria-label="remove tag">
-							close
-						</i>
-					</button>
+					<>
+						{"\n"}
+						<button
+							type="button"
+							className="close-button"
+							aria-label="remove tag"
+						></button>
+						{"\n"}
+					</>
 				)}
 			</span>
 		)}
diff --git a/src/App/components/CodeTags/index.test.js b/src/App/components/CodeTags/index.test.js
index 2c1e0c3ee8..b336eda9c2 100644
--- a/src/App/components/CodeTags/index.test.js
+++ b/src/App/components/CodeTags/index.test.js
@@ -14,12 +14,12 @@ describe("Component: CodeTags", () => {
 		const { container } = render(<CodeTags type="primary" code="test" />);
 
 		expect(container.querySelector("code")).toHaveClass(
-			"code-tags code-tags-primary"
+			"code-tags code-tags-primary",
 		);
 		expect(container.querySelector("code")).toHaveTextContent("test");
 
 		const componentForSnap = renderer.create(
-			<CodeTags type="primary" code="test" />
+			<CodeTags type="primary" code="test" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -29,12 +29,12 @@ describe("Component: CodeTags", () => {
 		const { container } = render(<CodeTags type="secondary" code="test" />);
 
 		expect(container.querySelector("code")).toHaveClass(
-			"code-tags code-tags-secondary"
+			"code-tags code-tags-secondary",
 		);
 		expect(container.querySelector("code")).toHaveTextContent("test");
 
 		const componentForSnap = renderer.create(
-			<CodeTags type="secondary" code="test" />
+			<CodeTags type="secondary" code="test" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -59,7 +59,7 @@ describe("Component: CodeTags", () => {
 		expect(container.querySelector("span")).toHaveTextContent("test");
 
 		const componentForSnap = renderer.create(
-			<CodeTags type="primary" text="test" />
+			<CodeTags type="primary" text="test" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -67,27 +67,17 @@ describe("Component: CodeTags", () => {
 
 	it("renders with class removable when removable is provided and renders a button", () => {
 		const { container } = render(
-			<CodeTags type="primary" text="test" removable />
+			<CodeTags type="primary" text="test" removable />,
 		);
 
 		expect(container.querySelector("span")).toHaveClass(
-			"tag tag-primary removable"
+			"tag tag-primary removable",
 		);
 		expect(container.querySelector("span")).toHaveTextContent("test");
 		expect(screen.getByRole("button")).toHaveClass("close-button");
-		expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-			"material-icons m-auto"
-		);
-		expect(screen.getByRole("button").querySelector("i")).toHaveAttribute(
-			"aria-label",
-			"remove tag"
-		);
-		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-			"close"
-		);
 
 		const componentForSnap = renderer.create(
-			<CodeTags type="primary" text="test" removable />
+			<CodeTags type="primary" text="test" removable />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
diff --git a/src/App/components/Dialog/__snapshots__/index.test.js.snap b/src/App/components/Dialog/__snapshots__/index.test.js.snap
index d40e96d15c..b6141927f8 100644
--- a/src/App/components/Dialog/__snapshots__/index.test.js.snap
+++ b/src/App/components/Dialog/__snapshots__/index.test.js.snap
@@ -20,17 +20,7 @@ exports[`Component: Dialog - renders 1`] = `
         aria-label="Close dialog"
         className="dialog-close"
         type="button"
-      >
-        
-
-        <i
-          className="material-icons"
-        >
-          close
-        </i>
-        
-
-      </button>
+      />
     </header>
     <div
       className="dialog-body"
@@ -83,17 +73,7 @@ exports[`Component: Dialog - renders with the passed ID 1`] = `
         aria-label="Close dialog"
         className="dialog-close"
         type="button"
-      >
-        
-
-        <i
-          className="material-icons"
-        >
-          close
-        </i>
-        
-
-      </button>
+      />
     </header>
     <div
       className="dialog-body"
@@ -146,17 +126,7 @@ exports[`Component: Dialog - renders with the passed children 1`] = `
         aria-label="Close dialog"
         className="dialog-close"
         type="button"
-      >
-        
-
-        <i
-          className="material-icons"
-        >
-          close
-        </i>
-        
-
-      </button>
+      />
     </header>
     <div
       className="dialog-body"
@@ -215,17 +185,7 @@ exports[`Component: Dialog - renders with the passed header 1`] = `
         aria-label="Close dialog"
         className="dialog-close"
         type="button"
-      >
-        
-
-        <i
-          className="material-icons"
-        >
-          close
-        </i>
-        
-
-      </button>
+      />
     </header>
     <div
       className="dialog-body"
diff --git a/src/App/components/Dialog/index.js b/src/App/components/Dialog/index.js
index f46b9aa9b1..b21bdffee7 100644
--- a/src/App/components/Dialog/index.js
+++ b/src/App/components/Dialog/index.js
@@ -19,11 +19,7 @@ const Dialog = ({ diaId, diaHeader, children }) => (
 						type="button"
 						className="dialog-close"
 						aria-label="Close dialog"
-					>
-						{"\n"}
-						<i className="material-icons">close</i>
-						{"\n"}
-					</button>
+					></button>
 				</header>
 				<div className="dialog-body" id="aria-describe-dia">
 					{children}
diff --git a/src/App/components/Dropdown/__snapshots__/index.test.js.snap b/src/App/components/Dropdown/__snapshots__/index.test.js.snap
index 3b4c0e36ab..9a583de75e 100644
--- a/src/App/components/Dropdown/__snapshots__/index.test.js.snap
+++ b/src/App/components/Dropdown/__snapshots__/index.test.js.snap
@@ -27,10 +27,8 @@ exports[`Component: Dropdown - renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        keyboard_arrow_down
-      </i>
+        className="swepay-icon-chevron-down"
+      />
       
 
     </button>
@@ -68,10 +66,9 @@ exports[`Component: Dropdown - renders children components passed as content pro
       
 
       <i
-        className="material-icons"
-      >
-        sort
-      </i>
+        aria-hidden="true"
+        className="sort"
+      />
       
 
     </button>
@@ -88,10 +85,8 @@ exports[`Component: Dropdown - renders children components passed as content pro
       >
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          bookmark
-        </i>
+          className="at-bookmark-star"
+        />
         Edit
       </a>
     </div>
@@ -126,10 +121,8 @@ exports[`Component: Dropdown - renders error state with the error icon and an er
 
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        keyboard_arrow_down
-      </i>
+        className="swepay-icon-chevron-down"
+      />
       
 
     </button>
@@ -147,10 +140,9 @@ exports[`Component: Dropdown - renders error state with the error icon and an er
     className="help-block"
   >
     <i
-      className="material-icons"
-    >
-      error
-    </i>
+      aria-hidden="true"
+      className="swepay-icon-error-triangle-filled small"
+    />
     test error message
   </div>
   
@@ -185,10 +177,8 @@ exports[`Component: Dropdown - renders the toggle button with the icon being eit
 
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        filter_list
-      </i>
+        className="icon-test"
+      />
       
 
     </button>
@@ -227,10 +217,8 @@ exports[`Component: Dropdown - renders the toggle button with the icon being eit
 
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        filter_list
-      </i>
+        className="icon-test"
+      />
       
 
       <span>
@@ -279,10 +267,8 @@ exports[`Component: Dropdown - renders the toggle button, when passing with spec
 
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        filter_list
-      </i>
+        className="icon-test"
+      />
       
 
     </button>
@@ -326,10 +312,8 @@ exports[`Component: Dropdown - renders, when passing no label nor icon props, a
 
       <i
         aria-hidden="true"
-        className="material-icons"
-      >
-        keyboard_arrow_down
-      </i>
+        className="swepay-icon-chevron-down"
+      />
       
 
     </button>
@@ -367,10 +351,9 @@ exports[`Component: Dropdown - the toggle icon btn with and without a passed ico
       
 
       <i
-        className="material-icons"
-      >
-        more_vert
-      </i>
+        aria-hidden="true"
+        className="at-dots-vertical"
+      />
       
 
     </button>
@@ -408,10 +391,9 @@ exports[`Component: Dropdown - the toggle icon btn with and without a passed ico
       
 
       <i
-        className="material-icons"
-      >
-        sort
-      </i>
+        aria-hidden="true"
+        className="sort"
+      />
       
 
     </button>
diff --git a/src/App/components/Dropdown/index.js b/src/App/components/Dropdown/index.js
index 13e96bd4e3..18623f09c1 100644
--- a/src/App/components/Dropdown/index.js
+++ b/src/App/components/Dropdown/index.js
@@ -40,10 +40,11 @@ const DropdownSelect = ({
 						aria-label="dropdown button"
 						disabled={disabled}
 					>
+						{"\n"}
 						{buttonLabel}
-						<i className="material-icons ml-2" aria-hidden="true">
-							keyboard_arrow_down
-						</i>
+						{"\n"}
+						<i className="swepay-icon-chevron-down ml-2" aria-hidden="true"></i>
+						{"\n"}
 					</button>
 					{"\n"}
 					<div className={`dropdown-menu ${fullWidth ? "full-width" : ""}`}>
@@ -64,7 +65,10 @@ const DropdownSelect = ({
 				{errorMessage && (
 					<>
 						<div className="help-block">
-							<i className="material-icons">error</i>
+							<i
+								className="swepay-icon-error-triangle-filled small"
+								aria-hidden="true"
+							></i>
 							{errorMessage}
 						</div>
 						{"\n"}
@@ -79,7 +83,7 @@ const DropdownToggle = ({
 	disabled,
 	isIconButton = false,
 	label = "Default label",
-	icon = isIconButton ? "more_vert" : "keyboard_arrow_down",
+	icon = isIconButton ? "at-dots-vertical" : "swepay-icon-chevron-down",
 	iconAfter,
 	noRotation = false,
 }) => {
@@ -100,16 +104,14 @@ const DropdownToggle = ({
 				{"\n"}
 				{isIconButton ? (
 					<>
-						<i className="material-icons">{icon}</i>
+						<i className={icon} aria-hidden="true"></i>
 						{"\n"}
 					</>
 				) : (
 					<>
 						{!iconAfter && (
 							<>
-								<i className="material-icons" aria-hidden="true">
-									{icon}
-								</i>
+								<i className={icon} aria-hidden="true"></i>
 								{"\n"}
 							</>
 						)}
@@ -117,9 +119,7 @@ const DropdownToggle = ({
 						{"\n"}
 						{iconAfter && (
 							<>
-								<i className="material-icons" aria-hidden="true">
-									{icon}
-								</i>
+								<i className={icon} aria-hidden="true"></i>
 								{"\n"}
 							</>
 						)}
@@ -191,7 +191,10 @@ const Dropdown = ({
 				{errorMessage && (
 					<>
 						<div className="help-block">
-							<i className="material-icons">error</i>
+							<i
+								className="swepay-icon-error-triangle-filled small"
+								aria-hidden="true"
+							></i>
 							{errorMessage}
 						</div>
 						{"\n"}
diff --git a/src/App/components/Dropdown/index.test.js b/src/App/components/Dropdown/index.test.js
index c40092794d..004a9533dd 100644
--- a/src/App/components/Dropdown/index.test.js
+++ b/src/App/components/Dropdown/index.test.js
@@ -20,19 +20,19 @@ describe("Component: Dropdown -", () => {
 
 	it("renders error state with the error icon and an error text", () => {
 		const { container } = render(
-			<Dropdown errorMessage="test error message" />
+			<Dropdown errorMessage="test error message" />,
 		);
 
 		expect(container.querySelector(".help-block")).toHaveTextContent(
-			"test error message"
+			"test error message",
 		);
 		expect(container.querySelector(".help-block i")).toHaveClass(
-			"material-icons"
+			"swepay-icon-error-triangle-filled small",
 		);
-		expect(container.querySelector(".help-block i")).toHaveTextContent("error");
+		expect(container.querySelector(".help-block i")).toHaveTextContent("");
 
 		const componentForSnap = renderer.create(
-			<Dropdown errorMessage="test error message" />
+			<Dropdown errorMessage="test error message" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -43,18 +43,16 @@ describe("Component: Dropdown -", () => {
 
 		expect(screen.getByRole("button")).toHaveClass("dropdown-toggle");
 		expect(screen.getByLabelText("dropdown button")).toHaveClass(
-			"dropdown-toggle"
+			"dropdown-toggle",
 		);
 		expect(screen.getByRole("button")).toHaveTextContent("Default label");
-		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-			"keyboard_arrow_down"
+		expect(screen.getByRole("button").querySelector("i")).toHaveClass(
+			"swepay-icon-chevron-down",
 		);
+		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent("");
 		expect(screen.getByRole("button").querySelector("i")).toHaveAttribute(
 			"aria-hidden",
-			"true"
-		);
-		expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-			"material-icons"
+			"true",
 		);
 
 		const componentForSnap = renderer.create(<Dropdown />);
@@ -63,26 +61,24 @@ describe("Component: Dropdown -", () => {
 	});
 
 	it("renders the toggle button, when passing with specific label and custom icon props", () => {
-		render(<Dropdown label="Filter" isIconButton={false} icon="filter_list" />);
+		render(<Dropdown label="Filter" isIconButton={false} icon="icon-test" />);
 
 		expect(screen.getByRole("button")).toHaveClass("dropdown-toggle");
 		expect(screen.getByLabelText("dropdown button")).toHaveClass(
-			"dropdown-toggle"
+			"dropdown-toggle",
 		);
 		expect(screen.getByRole("button")).toHaveTextContent("Filter");
-		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-			"filter_list"
-		);
+		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent("");
 		expect(screen.getByRole("button").querySelector("i")).toHaveAttribute(
 			"aria-hidden",
-			"true"
+			"true",
 		);
 		expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-			"material-icons"
+			"icon-test",
 		);
 
 		const componentForSnap = renderer.create(
-			<Dropdown label="Filter" isIconButton={false} icon="filter_list" />
+			<Dropdown label="Filter" isIconButton={false} icon="icon-test" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -90,16 +86,14 @@ describe("Component: Dropdown -", () => {
 
 	describe("renders the toggle button with the icon being either before or after", () => {
 		it("the icon is after the text", () => {
-			render(
-				<Dropdown label="Filter" isIconButton={false} icon="filter_list" />
-			);
+			render(<Dropdown label="Filter" isIconButton={false} icon="icon-test" />);
 
 			expect(
-				screen.getByRole("button").children[0].tagName.toLowerCase()
+				screen.getByRole("button").children[0].tagName.toLowerCase(),
 			).not.toBe("i");
 
 			const componentForSnap = renderer.create(
-				<Dropdown label="Filter" isIconButton={false} icon="filter_list" />
+				<Dropdown label="Filter" isIconButton={false} icon="icon-test" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -109,21 +103,21 @@ describe("Component: Dropdown -", () => {
 				<Dropdown
 					label="Filter"
 					isIconButton={false}
-					icon="filter_list"
+					icon="icon-test"
 					iconAfter={false}
-				/>
+				/>,
 			);
 			expect(screen.getByRole("button").children[0].tagName.toLowerCase()).toBe(
-				"i"
+				"i",
 			);
 
 			const componentForSnap = renderer.create(
 				<Dropdown
 					label="Filter"
 					isIconButton={false}
-					icon="filter_list"
+					icon="icon-test"
 					iconAfter={false}
-				/>
+				/>,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -135,14 +129,14 @@ describe("Component: Dropdown -", () => {
 			render(<Dropdown label="Filter" isIconButton={true} />);
 
 			expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-				"material-icons"
+				"at-dots-vertical",
 			);
 			expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-				"more_vert"
+				"",
 			);
 
 			const componentForSnap = renderer.create(
-				<Dropdown label="Filter" isIconButton={true} />
+				<Dropdown label="Filter" isIconButton={true} />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -151,15 +145,13 @@ describe("Component: Dropdown -", () => {
 		it("renders the toggle btn as icon btn with the icon passed as props", () => {
 			render(<Dropdown label="Filter" isIconButton={true} icon="sort" />);
 
-			expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-				"material-icons"
-			);
+			expect(screen.getByRole("button").querySelector("i")).toHaveClass("sort");
 			expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-				"sort"
+				"",
 			);
 
 			const componentForSnap = renderer.create(
-				<Dropdown label="Filter" isIconButton={true} icon="sort" />
+				<Dropdown label="Filter" isIconButton={true} icon="sort" />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -169,9 +161,7 @@ describe("Component: Dropdown -", () => {
 	it("renders children components passed as content prop inside the menu list", () => {
 		const checkboxListContent = (
 			<a href="#">
-				<i className="material-icons" aria-hidden="true">
-					bookmark
-				</i>
+				<i className="at-bookmark-star" aria-hidden="true"></i>
 				Edit
 			</a>
 		);
@@ -183,18 +173,16 @@ describe("Component: Dropdown -", () => {
 				icon="sort"
 				content={checkboxListContent}
 				largePadding={true}
-			/>
+			/>,
 		);
 
 		expect(container.querySelector(".dropdown-menu a")).toHaveTextContent(
-			"Edit"
+			"Edit",
 		);
 		expect(container.querySelector(".dropdown-menu a i")).toHaveClass(
-			"material-icons"
-		);
-		expect(container.querySelector(".dropdown-menu a i")).toHaveTextContent(
-			"bookmark"
+			"at-bookmark-star",
 		);
+		expect(container.querySelector(".dropdown-menu a i")).toHaveTextContent("");
 
 		const componentForSnap = renderer.create(
 			<Dropdown
@@ -203,7 +191,7 @@ describe("Component: Dropdown -", () => {
 				icon="sort"
 				content={checkboxListContent}
 				largePadding={true}
-			/>
+			/>,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
diff --git a/src/App/components/Expandable/index.js b/src/App/components/Expandable/index.js
index 7330769340..d06a0b4f79 100644
--- a/src/App/components/Expandable/index.js
+++ b/src/App/components/Expandable/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { Icon } from "@docutils";
 
 const ExpandablePlaceholder = () => (
 	<div className="expandable">
@@ -28,7 +27,7 @@ const Expandable = ({ icon, items }) =>
 					{icon && (
 						<>
 							{"\n"}
-							<Icon type={icon} />
+							<i className={`${icon} small`} aria-hidden="true" />
 						</>
 					)}
 					{"\n"}
diff --git a/src/App/components/FormComponents/Checkbox.js b/src/App/components/FormComponents/Checkbox.js
index b2ae825cbd..a5c8d09419 100644
--- a/src/App/components/FormComponents/Checkbox.js
+++ b/src/App/components/FormComponents/Checkbox.js
@@ -46,7 +46,10 @@ const Checkbox = ({
 						{errorMessage && (
 							<>
 								<div className="help-block">
-									<i className="material-icons">warning</i>
+									<i
+										className="swepay-icon-error-triangle-filled small"
+										aria-hidden="true"
+									></i>
 									{errorMessage}
 								</div>
 								{"\n"}
diff --git a/src/App/components/FormComponents/Radio.js b/src/App/components/FormComponents/Radio.js
index 13f747e7e6..a80a9319a3 100644
--- a/src/App/components/FormComponents/Radio.js
+++ b/src/App/components/FormComponents/Radio.js
@@ -48,7 +48,10 @@ const Radio = ({
 										{"\n"}
 										<label htmlFor={id}>
 											{style === "checkmark" && (
-												<i className="material-icons">check_circle</i>
+												<i
+													className="swepay-icon-check-circle-filled-customizable bg-blend-exclusion small"
+													aria-hidden="true"
+												></i>
 											)}{" "}
 											{label}
 										</label>
@@ -73,7 +76,10 @@ const Radio = ({
 						{errorMessage && (
 							<>
 								<div className="help-block">
-									<i className="material-icons">warning</i>
+									<i
+										className="swepay-icon-error-triangle-filled small"
+										aria-hidden="true"
+									></i>
 									{errorMessage}
 								</div>
 								{"\n"}
@@ -98,7 +104,7 @@ const Radio = ({
 						{label ? (
 							<label htmlFor={id}>
 								{style === "checkmark" && (
-									<i className="material-icons">check_circle</i>
+									<i className="swepay-icon-check-circle-filled-customizable bg-blend-exclusion small"></i>
 								)}{" "}
 								{label}
 							</label>
diff --git a/src/App/components/FormComponents/__snapshots__/Checkbox.test.js.snap b/src/App/components/FormComponents/__snapshots__/Checkbox.test.js.snap
index ee5cf99733..683098629f 100644
--- a/src/App/components/FormComponents/__snapshots__/Checkbox.test.js.snap
+++ b/src/App/components/FormComponents/__snapshots__/Checkbox.test.js.snap
@@ -252,10 +252,9 @@ exports[`Component: Checkbox - renders checkbox group with error 1`] = `
       className="help-block"
     >
       <i
-        className="material-icons"
-      >
-        warning
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-error-triangle-filled small"
+      />
       error
     </div>
     
diff --git a/src/App/components/InputGroup/__snapshots__/index.test.js.snap b/src/App/components/InputGroup/__snapshots__/index.test.js.snap
index b11967dcc2..e2fa49f8b0 100644
--- a/src/App/components/InputGroup/__snapshots__/index.test.js.snap
+++ b/src/App/components/InputGroup/__snapshots__/index.test.js.snap
@@ -99,12 +99,14 @@ exports[`Component: InputGroup - renders a form-group with a prefix icon if prop
     <span
       className="input-group-addon "
     >
+      
+
       <i
         aria-hidden="true"
-        className="material-icons material-icons-outlined"
-      >
-        home
-      </i>
+        className="at-home"
+      />
+      
+
     </span>
     
 
diff --git a/src/App/components/InputGroup/index.js b/src/App/components/InputGroup/index.js
index f294c5efc2..677a4299dd 100644
--- a/src/App/components/InputGroup/index.js
+++ b/src/App/components/InputGroup/index.js
@@ -15,32 +15,34 @@ export const Addon = ({
 				{success && (
 					<>
 						<span className="input-group-addon postfix">
-							<i className="material-icons" aria-hidden="true">
-								check_circle
-							</i>
+							{"\n"}
+							<i
+								className="swepay-icon-check-circle-filled small"
+								aria-hidden="true"
+							></i>
+							{"\n"}
 						</span>
 					</>
 				)}
 				{error && (
 					<span className="input-group-addon postfix">
+						{"\n"}
 						<i
-							className="material-icons material-icons-outlined"
+							className="swepay-icon-error-triangle-filled small"
 							aria-hidden="true"
-						>
-							warning
-						</i>
+						></i>
+						{"\n"}
 					</span>
 				)}
 			</>
 		) : (
 			<span className={`input-group-addon ${postfix ? "postfix" : ""}`}>
 				{type === "icon" ? (
-					<i
-						className="material-icons material-icons-outlined"
-						aria-hidden="true"
-					>
-						{value}
-					</i>
+					<>
+						{"\n"}
+						<i className={value} aria-hidden="true"></i>
+						{"\n"}
+					</>
 				) : (
 					value
 				)}
@@ -90,7 +92,7 @@ const InputGroup = ({
 
 	const inputGrpClasses = classnames(
 		"input-group",
-		validationState ? `has-${validationState}` : null
+		validationState ? `has-${validationState}` : null,
 	);
 
 	const selectAttrs = {
@@ -108,7 +110,7 @@ const InputGroup = ({
 		boxSize ? boxSize : null,
 		error ? "has-error" : null,
 		success ? "has-success" : null,
-		className ? className : null
+		className ? className : null,
 	);
 
 	return (
diff --git a/src/App/components/InputGroup/index.test.js b/src/App/components/InputGroup/index.test.js
index bb3b7ca5a7..bc2fde839c 100644
--- a/src/App/components/InputGroup/index.test.js
+++ b/src/App/components/InputGroup/index.test.js
@@ -31,7 +31,7 @@ describe("Component: InputGroup -", () => {
 		console.error = jest.fn();
 		testValues.forEach((testValue) => {
 			const componentForSnap = renderer.create(
-				<InputGroup type="typetest" addOnType={testValue} />
+				<InputGroup type="typetest" addOnType={testValue} />,
 			);
 
 			expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -41,16 +41,16 @@ describe("Component: InputGroup -", () => {
 
 	it("renders a form-group with a label if prop label is provided", () => {
 		const { container } = render(
-			<InputGroup type="typetest" label="this is a text in a label" />
+			<InputGroup type="typetest" label="this is a text in a label" />,
 		);
 
 		// FIXME: the input are not linked to the label if no id is passed. Once on React18 switch to useId to have default
 		expect(container.querySelector("label")).toHaveTextContent(
-			"this is a text in a label"
+			"this is a text in a label",
 		);
 
 		const componentForSnap = renderer.create(
-			<InputGroup type="typetest" label="this is a text in a label" />
+			<InputGroup type="typetest" label="this is a text in a label" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -63,13 +63,13 @@ describe("Component: InputGroup -", () => {
 				prefixType="button"
 				prefixValue="button text"
 				prefixBtnColor="primary"
-			/>
+			/>,
 		);
 
 		expect(containerPrefix.querySelector(".input-group")).toBeTruthy();
 
 		const { container: containerPostfix } = render(
-			<InputGroup type="typetest" postfixValue="testvalue" />
+			<InputGroup type="typetest" postfixValue="testvalue" />,
 		);
 
 		expect(containerPostfix.querySelector(".input-group")).toBeTruthy();
@@ -77,7 +77,7 @@ describe("Component: InputGroup -", () => {
 
 	it("does not render div with class .input-group when prefixValue or postfixValue are not provided", () => {
 		const { container } = render(
-			<InputGroup type="typetest" label="this is a text in a label" />
+			<InputGroup type="typetest" label="this is a text in a label" />,
 		);
 
 		expect(container.querySelector(".input-group")).toBeNull();
@@ -85,19 +85,19 @@ describe("Component: InputGroup -", () => {
 
 	it("renders a form-group with a prefix icon if prop prefixValue equals icon", () => {
 		const { container } = render(
-			<InputGroup type="typetest" addOnType="icon" prefixValue="home" />
+			<InputGroup type="typetest" addOnType="icon" prefixValue="at-home" />,
 		);
 
 		expect(container.querySelector(".input-group-addon i")).toHaveClass(
-			"material-icons"
+			"at-home",
 		);
 
-		const icon = container.querySelector(".input-group-addon i.material-icons");
+		const icon = container.querySelector(".input-group-addon i");
 
-		expect(icon).toHaveTextContent("home");
+		expect(icon).toHaveTextContent("");
 
 		const componentForSnap = renderer.create(
-			<InputGroup type="typetest" addOnType="icon" prefixValue="home" />
+			<InputGroup type="typetest" addOnType="icon" prefixValue="at-home" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -125,13 +125,13 @@ describe("Component: InputGroup -", () => {
 		selectOptions.forEach((value) => {
 			expect(
 				[...selectElement.querySelectorAll("option")].some(
-					(optionValue) => optionValue.value === value
-				)
+					(optionValue) => optionValue.value === value,
+				),
 			).toBeTruthy();
 		});
 
 		const componentForSnap = renderer.create(
-			<InputGroup type="select" selectOptions={selectOptions} />
+			<InputGroup type="select" selectOptions={selectOptions} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -139,13 +139,13 @@ describe("Component: InputGroup -", () => {
 
 	it("renders a form-group with a help block", () => {
 		const { container } = render(
-			<InputGroup type="typetest" helpBlock="testvalue" />
+			<InputGroup type="typetest" helpBlock="testvalue" />,
 		);
 
 		expect(container.querySelector(".hint-text")).toBeTruthy();
 
 		const componentForSnap = renderer.create(
-			<InputGroup type="typetest" helpBlock="testvalue" />
+			<InputGroup type="typetest" helpBlock="testvalue" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
diff --git a/src/App/components/Link/__snapshots__/index.test.js.snap b/src/App/components/Link/__snapshots__/index.test.js.snap
index daec64af73..c345a26752 100644
--- a/src/App/components/Link/__snapshots__/index.test.js.snap
+++ b/src/App/components/Link/__snapshots__/index.test.js.snap
@@ -18,10 +18,8 @@ exports[`Component: Link renders with left icon when leftIcon is provided 1`] =
 
   <i
     aria-hidden="true"
-    className="material-icons"
-  >
-    chevron_left
-  </i>
+    className="swepay-icon-chevron-left"
+  />
   
 
   <span
@@ -61,10 +59,8 @@ exports[`Component: Link renders with right icon when rightIcon is provided 1`]
 
   <i
     aria-hidden="true"
-    className="material-icons"
-  >
-    chevron_right
-  </i>
+    className="swepay-icon-chevron-right"
+  />
   
 
 </a>
diff --git a/src/App/components/Link/index.js b/src/App/components/Link/index.js
index 48590a0c93..50e083d067 100644
--- a/src/App/components/Link/index.js
+++ b/src/App/components/Link/index.js
@@ -14,7 +14,7 @@ const Link = ({
 		leftIcon || rightIcon ? "icon-link" : null,
 		smallFont ? "small" : null,
 		bright ? "bright" : null,
-		className ? className : null
+		className ? className : null,
 	);
 
 	return (
@@ -23,9 +23,7 @@ const Link = ({
 				{leftIcon && (
 					<>
 						{"\n"}
-						<i className="material-icons" aria-hidden="true">
-							{leftIcon}
-						</i>
+						<i className={leftIcon} aria-hidden="true"></i>
 					</>
 				)}
 				{leftIcon || rightIcon ? (
@@ -45,9 +43,7 @@ const Link = ({
 				)}
 				{rightIcon && (
 					<>
-						<i className="material-icons" aria-hidden="true">
-							{rightIcon}
-						</i>
+						<i className={rightIcon} aria-hidden="true"></i>
 						{"\n"}
 					</>
 				)}
diff --git a/src/App/components/Link/index.test.js b/src/App/components/Link/index.test.js
index 37326ae0fb..5df3ca85fa 100644
--- a/src/App/components/Link/index.test.js
+++ b/src/App/components/Link/index.test.js
@@ -31,44 +31,44 @@ describe("Component: Link", () => {
 	});
 
 	it("renders with left icon when leftIcon is provided", () => {
-		const icon = "chevron_left";
+		const icon = "swepay-icon-chevron-left";
 
 		render(<Link linkText="Link" leftIcon={icon} />);
 
 		expect(screen.getByRole("link").querySelector("i")).toHaveClass(
-			"material-icons"
+			"swepay-icon-chevron-left",
 		);
 		expect(screen.getByRole("link").querySelector("i")).toHaveAttribute(
 			"aria-hidden",
-			"true"
+			"true",
 		);
-		expect(screen.getByRole("link").querySelector("i")).toHaveTextContent(icon);
+		expect(screen.getByRole("link").querySelector("i")).toHaveTextContent("");
 		expect(screen.getByRole("link").querySelector("span")).toHaveClass("ml-2");
 
 		const componentForSnap = renderer.create(
-			<Link linkText="Link" leftIcon={icon} />
+			<Link linkText="Link" leftIcon={icon} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
 	});
 
 	it("renders with right icon when rightIcon is provided", () => {
-		const icon = "chevron_right";
+		const icon = "swepay-icon-chevron-right";
 
 		render(<Link linkText="Link" rightIcon={icon} />);
 
 		expect(screen.getByRole("link").querySelector("i")).toHaveClass(
-			"material-icons"
+			"swepay-icon-chevron-right",
 		);
 		expect(screen.getByRole("link").querySelector("i")).toHaveAttribute(
 			"aria-hidden",
-			"true"
+			"true",
 		);
-		expect(screen.getByRole("link").querySelector("i")).toHaveTextContent(icon);
+		expect(screen.getByRole("link").querySelector("i")).toHaveTextContent("");
 		expect(screen.getByRole("link").querySelector("span")).toHaveClass("mr-2");
 
 		const componentForSnap = renderer.create(
-			<Link linkText="Link" rightIcon={icon} />
+			<Link linkText="Link" rightIcon={icon} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
diff --git a/src/App/components/MediaObject/__snapshots__/index.test.js.snap b/src/App/components/MediaObject/__snapshots__/index.test.js.snap
index 6a646ed324..2a010ef72b 100644
--- a/src/App/components/MediaObject/__snapshots__/index.test.js.snap
+++ b/src/App/components/MediaObject/__snapshots__/index.test.js.snap
@@ -116,10 +116,8 @@ exports[`Component: MediaObject - renders a muted MediaObject 1`] = `
      
     <i
       aria-hidden="true"
-      className="material-icons text-muted"
-    >
-      home
-    </i>
+      className="at-home text-muted"
+    />
      
     
 
@@ -150,10 +148,8 @@ exports[`Component: MediaObject - renders an icon 1`] = `
      
     <i
       aria-hidden="true"
-      className="material-icons"
-    >
-      home
-    </i>
+      className="at-home "
+    />
      
     
 
diff --git a/src/App/components/MediaObject/index.js b/src/App/components/MediaObject/index.js
index f78c0c6021..6faa36bd1f 100644
--- a/src/App/components/MediaObject/index.js
+++ b/src/App/components/MediaObject/index.js
@@ -28,11 +28,9 @@ const MediaObject = ({
 	const mediaClasses = classnames(
 		"media",
 		mediaRight ? "media-right" : null,
-		size ? `media-${size}` : null
+		size ? `media-${size}` : null,
 	);
 
-	const iconClasses = classnames("material-icons", muted ? "text-muted" : null);
-
 	return (
 		<div className={mediaClasses}>
 			{imgUrl || icon ? (
@@ -47,9 +45,10 @@ const MediaObject = ({
 					{icon ? (
 						<>
 							{" "}
-							<i className={iconClasses} aria-hidden="true">
-								{icon}
-							</i>{" "}
+							<i
+								className={`${icon} ${muted ? "text-muted" : ""}`}
+								aria-hidden="true"
+							/>{" "}
 							{"\n"}{" "}
 						</>
 					) : null}
diff --git a/src/App/components/MediaObject/index.test.js b/src/App/components/MediaObject/index.test.js
index b567d78bbc..50d95a97ce 100644
--- a/src/App/components/MediaObject/index.test.js
+++ b/src/App/components/MediaObject/index.test.js
@@ -24,7 +24,7 @@ describe("Component: MediaObject -", () => {
 		render(<MediaObject heading="render-test" />);
 
 		const componentForSnap = renderer.create(
-			<MediaObject heading="render-test" />
+			<MediaObject heading="render-test" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -32,13 +32,13 @@ describe("Component: MediaObject -", () => {
 
 	it("renders an icon", () => {
 		const { container } = render(
-			<MediaObject heading="render-test" icon="home" />
+			<MediaObject heading="render-test" icon="at-home" />,
 		);
 
 		expect(container.querySelectorAll("i")).toHaveLength(1);
 
 		const componentForSnap = renderer.create(
-			<MediaObject heading="render-test" icon="home" />
+			<MediaObject heading="render-test" icon="at-home" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -49,7 +49,7 @@ describe("Component: MediaObject -", () => {
 			<MediaObject
 				heading="render-test"
 				imgUrl="https://via.placeholder.com/48x48"
-			/>
+			/>,
 		);
 
 		expect(screen.getByRole("img")).toBeInTheDocument();
@@ -58,7 +58,7 @@ describe("Component: MediaObject -", () => {
 			<MediaObject
 				heading="render-test"
 				imgUrl="https://via.placeholder.com/48x48"
-			/>
+			/>,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -70,11 +70,11 @@ describe("Component: MediaObject -", () => {
 				heading="render-test"
 				imgUrl="https://via.placeholder.com/48x48"
 				mediaRight
-			/>
+			/>,
 		);
 
 		expect(screen.getByRole("img").parentElement.parentElement).toHaveClass(
-			"media-right"
+			"media-right",
 		);
 
 		const componentForSnap = renderer.create(
@@ -82,7 +82,7 @@ describe("Component: MediaObject -", () => {
 				heading="render-test"
 				imgUrl="https://via.placeholder.com/48x48"
 				mediaRight
-			/>
+			/>,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -90,14 +90,14 @@ describe("Component: MediaObject -", () => {
 
 	it("renders a <small> text", () => {
 		const { container } = render(
-			<MediaObject heading="render-test" textSmall text="small text" />
+			<MediaObject heading="render-test" textSmall text="small text" />,
 		);
 
 		expect(container.querySelectorAll("small")).toHaveLength(1);
 		expect(container.querySelector("small")).toHaveTextContent("small text");
 
 		const componentForSnap = renderer.create(
-			<MediaObject heading="render-test" textSmall text="small text" />
+			<MediaObject heading="render-test" textSmall text="small text" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -105,7 +105,7 @@ describe("Component: MediaObject -", () => {
 
 	it("renders a muted MediaObject", () => {
 		const { container } = render(
-			<MediaObject heading="render-test" icon="home" muted />
+			<MediaObject heading="render-test" icon="at-home" muted />,
 		);
 
 		const mediaHeader = screen.getByRole("heading");
@@ -115,7 +115,7 @@ describe("Component: MediaObject -", () => {
 		expect(container.querySelector("i")).toHaveClass("text-muted");
 
 		const componentForSnap = renderer.create(
-			<MediaObject heading="render-test" icon="home" muted />
+			<MediaObject heading="render-test" icon="at-home" muted />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -123,14 +123,14 @@ describe("Component: MediaObject -", () => {
 
 	it("renders MediaObject with class media-sm", () => {
 		const { container } = render(
-			<MediaObject heading="render-test" size="sm" />
+			<MediaObject heading="render-test" size="sm" />,
 		);
 
 		expect(screen.getByRole("heading").tagName).toBe("H4");
 		expect(container.querySelector("div")).toHaveClass("media-sm");
 
 		const componentForSnap = renderer.create(
-			<MediaObject heading="render-test" size="sm" />
+			<MediaObject heading="render-test" size="sm" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -138,14 +138,14 @@ describe("Component: MediaObject -", () => {
 
 	it("renders MediaObject with class media-lg", () => {
 		const { container } = render(
-			<MediaObject heading="render-test" size="lg" />
+			<MediaObject heading="render-test" size="lg" />,
 		);
 
 		expect(screen.getByRole("heading").tagName).toBe("H2");
 		expect(container.querySelector("div")).toHaveClass("media-lg");
 
 		const componentForSnap = renderer.create(
-			<MediaObject heading="render-test" size="lg" />
+			<MediaObject heading="render-test" size="lg" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
diff --git a/src/App/components/Nav/__snapshots__/index.test.js.snap b/src/App/components/Nav/__snapshots__/index.test.js.snap
index 4a9f2613e7..8c87bf2d25 100644
--- a/src/App/components/Nav/__snapshots__/index.test.js.snap
+++ b/src/App/components/Nav/__snapshots__/index.test.js.snap
@@ -17,10 +17,8 @@ exports[`Component: Nav - Throws an error when proptype for vertsize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          home
-        </i>
+          className="at-home small"
+        />
         
 
         <span>
@@ -44,10 +42,8 @@ exports[`Component: Nav - Throws an error when proptype for vertsize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          shopping_cart
-        </i>
+          className="at-shop-cart small"
+        />
         
 
         <span>
@@ -71,10 +67,8 @@ exports[`Component: Nav - Throws an error when proptype for vertsize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          notification_important
-        </i>
+          className="at-bell-reminder small"
+        />
         
 
         <span>
@@ -98,10 +92,8 @@ exports[`Component: Nav - Throws an error when proptype for vertsize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          language
-        </i>
+          className="at-language-translation small"
+        />
         
 
         <span>
@@ -125,10 +117,8 @@ exports[`Component: Nav - Throws an error when proptype for vertsize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          account_balance
-        </i>
+          className="at-building-column small"
+        />
         
 
         <span>
@@ -152,10 +142,8 @@ exports[`Component: Nav - Throws an error when proptype for vertsize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          fingerprint
-        </i>
+          className="at-fingerprint small"
+        />
         
 
         <span>
@@ -188,10 +176,8 @@ exports[`Component: Nav - Throws an error when proptype for widesize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          home
-        </i>
+          className="at-home small"
+        />
         
 
         <span>
@@ -215,10 +201,8 @@ exports[`Component: Nav - Throws an error when proptype for widesize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          shopping_cart
-        </i>
+          className="at-shop-cart small"
+        />
         
 
         <span>
@@ -242,10 +226,8 @@ exports[`Component: Nav - Throws an error when proptype for widesize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          notification_important
-        </i>
+          className="at-bell-reminder small"
+        />
         
 
         <span>
@@ -269,10 +251,8 @@ exports[`Component: Nav - Throws an error when proptype for widesize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          language
-        </i>
+          className="at-language-translation small"
+        />
         
 
         <span>
@@ -296,10 +276,8 @@ exports[`Component: Nav - Throws an error when proptype for widesize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          account_balance
-        </i>
+          className="at-building-column small"
+        />
         
 
         <span>
@@ -323,10 +301,8 @@ exports[`Component: Nav - Throws an error when proptype for widesize is wrong 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          fingerprint
-        </i>
+          className="at-fingerprint small"
+        />
         
 
         <span>
@@ -359,10 +335,8 @@ exports[`Component: Nav - renders 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          home
-        </i>
+          className="at-home small"
+        />
         
 
         <span>
@@ -386,10 +360,8 @@ exports[`Component: Nav - renders 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          shopping_cart
-        </i>
+          className="at-shop-cart small"
+        />
         
 
         <span>
@@ -413,10 +385,8 @@ exports[`Component: Nav - renders 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          notification_important
-        </i>
+          className="at-bell-reminder small"
+        />
         
 
         <span>
@@ -440,10 +410,8 @@ exports[`Component: Nav - renders 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          language
-        </i>
+          className="at-language-translation small"
+        />
         
 
         <span>
@@ -467,10 +435,8 @@ exports[`Component: Nav - renders 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          account_balance
-        </i>
+          className="at-building-column small"
+        />
         
 
         <span>
@@ -494,10 +460,8 @@ exports[`Component: Nav - renders 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          fingerprint
-        </i>
+          className="at-fingerprint small"
+        />
         
 
         <span>
@@ -530,10 +494,8 @@ exports[`Component: Nav - renders with an active list if state active matches 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          home
-        </i>
+          className="at-home small"
+        />
         
 
         <span>
@@ -557,10 +519,8 @@ exports[`Component: Nav - renders with an active list if state active matches 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          shopping_cart
-        </i>
+          className="at-shop-cart small"
+        />
         
 
         <span>
@@ -584,10 +544,8 @@ exports[`Component: Nav - renders with an active list if state active matches 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          notification_important
-        </i>
+          className="at-bell-reminder small"
+        />
         
 
         <span>
@@ -611,10 +569,8 @@ exports[`Component: Nav - renders with an active list if state active matches 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          language
-        </i>
+          className="at-language-translation small"
+        />
         
 
         <span>
@@ -638,10 +594,8 @@ exports[`Component: Nav - renders with an active list if state active matches 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          account_balance
-        </i>
+          className="at-building-column small"
+        />
         
 
         <span>
@@ -665,10 +619,8 @@ exports[`Component: Nav - renders with an active list if state active matches 1`
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          fingerprint
-        </i>
+          className="at-fingerprint small"
+        />
         
 
         <span>
@@ -701,10 +653,8 @@ exports[`Component: Nav - renders with two levels 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          home
-        </i>
+          className="at-home small"
+        />
         
 
         <span>
@@ -730,10 +680,8 @@ exports[`Component: Nav - renders with two levels 1`] = `
         >
           <i
             aria-hidden="true"
-            className="material-icons"
-          >
-            shopping_cart
-          </i>
+            className="at-shop-cart small"
+          />
           
 
           <span>
@@ -784,10 +732,8 @@ exports[`Component: Nav - renders with two levels 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          notification_important
-        </i>
+          className="at-bell-reminder small"
+        />
         
 
         <span>
@@ -811,10 +757,8 @@ exports[`Component: Nav - renders with two levels 1`] = `
 
         <i
           aria-hidden="true"
-          className="material-icons"
-        >
-          language
-        </i>
+          className="at-language-translation small"
+        />
         
 
         <span>
@@ -825,6 +769,31 @@ exports[`Component: Nav - renders with two levels 1`] = `
       </a>
       
 
+    </li>
+    <li>
+      
+
+      <a
+        className={null}
+        href="#"
+        onClick={[Function]}
+      >
+        
+
+        <i
+          aria-hidden="true"
+          className="at-building-column small"
+        />
+        
+
+        <span>
+          Account
+        </span>
+        
+
+      </a>
+      
+
     </li>
     <li>
       
@@ -840,14 +809,12 @@ exports[`Component: Nav - renders with two levels 1`] = `
         >
           <i
             aria-hidden="true"
-            className="material-icons"
-          >
-            account_balance
-          </i>
+            className="at-fingerprint small"
+          />
           
 
           <span>
-            Account
+            Authentication
           </span>
           
 
diff --git a/src/App/components/Nav/index.js b/src/App/components/Nav/index.js
index cf8fe28139..3cc3f06aa7 100644
--- a/src/App/components/Nav/index.js
+++ b/src/App/components/Nav/index.js
@@ -28,7 +28,7 @@ const Nav = ({ items, vertsize, widesize }) => {
 	const sidebarClassname = classnames(
 		"nav",
 		vertsize ? `nav-${vertsize}-vertical` : "",
-		widesize ? `nav-${widesize}-vertical-wide` : ""
+		widesize ? `nav-${widesize}-vertical-wide` : "",
 	);
 
 	return (
@@ -41,9 +41,7 @@ const Nav = ({ items, vertsize, widesize }) => {
 							<div className="submenu">
 								{"\n"}
 								<a href="#" onClick={(e) => setActive(e, `sub-${i}-0`)}>
-									<i className="material-icons" aria-hidden="true">
-										{icon}
-									</i>
+									<i className={icon} aria-hidden="true"></i>
 									{"\n"}
 									<span>{name}</span>
 									{"\n"}
@@ -73,9 +71,7 @@ const Nav = ({ items, vertsize, widesize }) => {
 								className={activeClassname === `main-${i}` ? "active" : null}
 							>
 								{"\n"}
-								<i className="material-icons" aria-hidden="true">
-									{icon}
-								</i>
+								<i className={icon} aria-hidden="true"></i>
 								{"\n"}
 								<span>{name}</span>
 								{"\n"}
diff --git a/src/App/components/Nav/index.test.js b/src/App/components/Nav/index.test.js
index b2ae96eae8..746eb89b74 100644
--- a/src/App/components/Nav/index.test.js
+++ b/src/App/components/Nav/index.test.js
@@ -10,51 +10,55 @@ import Nav from "./index";
 const navItems = [
 	{
 		name: "Home",
-		icon: "home",
+		icon: "at-home small",
 	},
 	{
 		name: "Transactions",
-		icon: "shopping_cart",
+		icon: "at-shop-cart small",
 	},
 	{
 		name: "Notifications",
-		icon: "notification_important",
+		icon: "at-bell-reminder small",
 	},
 	{
 		name: "Language",
-		icon: "language",
+		icon: "at-language-translation small",
 	},
 	{
 		name: "Account",
-		icon: "account_balance",
+		icon: "at-building-column small",
 	},
 	{
 		name: "Authentication",
-		icon: "fingerprint",
+		icon: "at-fingerprint small",
 	},
 ];
 
 const navItemsTwoLevels = [
 	{
 		name: "Home",
-		icon: "home",
+		icon: "at-home small",
 	},
 	{
 		name: "Transactions",
-		icon: "shopping_cart",
+		icon: "at-shop-cart small",
 		subItems: ["Purchase history", "Invoice"],
 	},
 	{
 		name: "Notifications",
-		icon: "notification_important",
+		icon: "at-bell-reminder small",
 	},
 	{
 		name: "Language",
-		icon: "language",
+		icon: "at-language-translation small",
 	},
 	{
 		name: "Account",
-		icon: "account_balance",
+		icon: "at-building-column small",
+	},
+	{
+		name: "Authentication",
+		icon: "at-fingerprint small",
 		subItems: ["Email", "Information", "Other things"],
 	},
 ];
@@ -72,7 +76,7 @@ describe("Component: Nav -", () => {
 		console.error = jest.fn();
 
 		const componentForSnap = renderer.create(
-			<Nav items={navItems} vertsize="xxxl" />
+			<Nav items={navItems} vertsize="xxxl" />,
 		);
 
 		expect(console.error).toHaveBeenCalled();
@@ -84,7 +88,7 @@ describe("Component: Nav -", () => {
 		console.error = jest.fn();
 
 		const componentForSnap = renderer.create(
-			<Nav items={navItems} widesize="xxxl" />
+			<Nav items={navItems} widesize="xxxl" />,
 		);
 
 		expect(console.error).toHaveBeenCalled();
@@ -110,7 +114,7 @@ describe("Component: Nav -", () => {
 		expect(
 			screen
 				.getAllByRole("link")
-				.filter((elmt) => elmt.classList.contains("active"))
+				.filter((elmt) => elmt.classList.contains("active")),
 		).toHaveLength(1);
 
 		const componentForSnap = renderer.create(<Nav items={navItems} />);
@@ -145,7 +149,7 @@ describe("Component: Nav -", () => {
 			.filter(
 				(elmt) =>
 					!elmt.classList.contains("active") &&
-					!elmt.parentElement.classList.contains("active")
+					!elmt.parentElement.classList.contains("active"),
 			)[0];
 
 		expect(renderedNav).toBeInTheDocument();
diff --git a/src/App/components/Pagination/__snapshots__/index.test.js.snap b/src/App/components/Pagination/__snapshots__/index.test.js.snap
index c876dcfb53..ae6589d4b6 100644
--- a/src/App/components/Pagination/__snapshots__/index.test.js.snap
+++ b/src/App/components/Pagination/__snapshots__/index.test.js.snap
@@ -17,7 +17,7 @@ exports[`Component: Pagination - does not throw error if initialized with id pro
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -32,7 +32,7 @@ exports[`Component: Pagination - does not throw error if initialized with id pro
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -149,7 +149,7 @@ exports[`Component: Pagination - does not throw error if initialized with id pro
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -164,7 +164,7 @@ exports[`Component: Pagination - does not throw error if initialized with id pro
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -189,7 +189,7 @@ exports[`Component: Pagination - renders 1`] = `
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -204,7 +204,7 @@ exports[`Component: Pagination - renders 1`] = `
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -321,7 +321,7 @@ exports[`Component: Pagination - renders 1`] = `
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -336,7 +336,7 @@ exports[`Component: Pagination - renders 1`] = `
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -361,7 +361,7 @@ exports[`Component: Pagination - renders four arrows 1`] = `
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -376,7 +376,7 @@ exports[`Component: Pagination - renders four arrows 1`] = `
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -493,7 +493,7 @@ exports[`Component: Pagination - renders four arrows 1`] = `
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -508,7 +508,7 @@ exports[`Component: Pagination - renders four arrows 1`] = `
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -533,7 +533,7 @@ exports[`Component: Pagination - renders only li elements inside ul element 1`]
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -548,7 +548,7 @@ exports[`Component: Pagination - renders only li elements inside ul element 1`]
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -665,7 +665,7 @@ exports[`Component: Pagination - renders only li elements inside ul element 1`]
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -680,7 +680,7 @@ exports[`Component: Pagination - renders only li elements inside ul element 1`]
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -705,7 +705,7 @@ exports[`Component: Pagination - renders the compact view with the compact class
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -720,7 +720,7 @@ exports[`Component: Pagination - renders the compact view with the compact class
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -745,7 +745,7 @@ exports[`Component: Pagination - renders the compact view with the compact class
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -760,7 +760,7 @@ exports[`Component: Pagination - renders the compact view with the compact class
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -785,7 +785,7 @@ exports[`Component: Pagination - renders the default view as long view 1`] = `
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -800,7 +800,7 @@ exports[`Component: Pagination - renders the default view as long view 1`] = `
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -914,7 +914,7 @@ exports[`Component: Pagination - renders the default view as long view 1`] = `
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -929,7 +929,7 @@ exports[`Component: Pagination - renders the default view as long view 1`] = `
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -954,7 +954,7 @@ exports[`Component: Pagination - renders with an li with active class 1`] = `
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -969,7 +969,7 @@ exports[`Component: Pagination - renders with an li with active class 1`] = `
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -1086,7 +1086,7 @@ exports[`Component: Pagination - renders with an li with active class 1`] = `
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -1101,7 +1101,7 @@ exports[`Component: Pagination - renders with an li with active class 1`] = `
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -1126,7 +1126,7 @@ exports[`Component: Pagination - renders with correct number of list elements. I
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -1141,7 +1141,7 @@ exports[`Component: Pagination - renders with correct number of list elements. I
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -1258,7 +1258,7 @@ exports[`Component: Pagination - renders with correct number of list elements. I
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -1273,7 +1273,7 @@ exports[`Component: Pagination - renders with correct number of list elements. I
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -1298,7 +1298,7 @@ exports[`Component: Pagination - renders with correct number of list elements. I
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -1313,7 +1313,7 @@ exports[`Component: Pagination - renders with correct number of list elements. I
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -1430,7 +1430,7 @@ exports[`Component: Pagination - renders with correct number of list elements. I
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -1445,7 +1445,7 @@ exports[`Component: Pagination - renders with correct number of list elements. I
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -1470,7 +1470,7 @@ exports[`Component: Pagination - renders with one ellipsis 1`] = `
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -1485,7 +1485,7 @@ exports[`Component: Pagination - renders with one ellipsis 1`] = `
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -1602,7 +1602,7 @@ exports[`Component: Pagination - renders with one ellipsis 1`] = `
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -1617,7 +1617,7 @@ exports[`Component: Pagination - renders with one ellipsis 1`] = `
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -1642,7 +1642,7 @@ exports[`Component: Pagination - renders with two ellipsis 1`] = `
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -1657,7 +1657,7 @@ exports[`Component: Pagination - renders with two ellipsis 1`] = `
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -1771,7 +1771,7 @@ exports[`Component: Pagination - renders with two ellipsis 1`] = `
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -1786,7 +1786,7 @@ exports[`Component: Pagination - renders with two ellipsis 1`] = `
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
@@ -1810,7 +1810,7 @@ exports[`Component: Pagination - throws error if initialized without id prop 1`]
 
     <i
       aria-label="start"
-      className="material-icons"
+      className="at-arrow-right-line"
     />
     
 
@@ -1825,7 +1825,7 @@ exports[`Component: Pagination - throws error if initialized without id prop 1`]
 
     <i
       aria-label="back"
-      className="material-icons"
+      className="swepay-icon-chevron-left"
     />
     
 
@@ -1942,7 +1942,7 @@ exports[`Component: Pagination - throws error if initialized without id prop 1`]
 
     <i
       aria-label="forward"
-      className="material-icons"
+      className="swepay-icon-chevron-right"
     />
     
 
@@ -1957,7 +1957,7 @@ exports[`Component: Pagination - throws error if initialized without id prop 1`]
 
     <i
       aria-label="end"
-      className="material-icons"
+      className="at-arrow-left-line"
     />
     
 
diff --git a/src/App/components/Pagination/index.js b/src/App/components/Pagination/index.js
index 337854677f..39dbcacb89 100644
--- a/src/App/components/Pagination/index.js
+++ b/src/App/components/Pagination/index.js
@@ -14,6 +14,7 @@ const Pagination = ({
 
 	const Arrow = ({ type, mobile }) => {
 		let disabled = false;
+		let icon;
 
 		if (type === "back" || type === "start") {
 			disabled = current === 1;
@@ -23,10 +24,22 @@ const Pagination = ({
 			disabled = current === length;
 		}
 
+		if (type === "back") {
+			icon = "swepay-icon-chevron-left";
+		} else if (type === "forward") {
+			icon = "swepay-icon-chevron-right";
+		} else if (type === "start") {
+			icon = "at-arrow-right-line";
+		} else if (type === "end") {
+			icon = "at-arrow-left-line";
+		} else {
+			icon = "";
+		}
+
 		const arrowClasses = classnames(
 			`arrow-${type}`,
 			mobile ? "d-sm-none" : null,
-			disabled ? "disabled" : null
+			disabled ? "disabled" : null,
 		);
 
 		const navigate = (e) => {
@@ -54,13 +67,13 @@ const Pagination = ({
 				{anchorArrows ? (
 					<a className={arrowClasses} href="#" onClick={(e) => navigate(e)}>
 						{"\n"}
-						<i className="material-icons" aria-label={type}></i>
+						<i className={icon} aria-label={type}></i>
 						{"\n"}
 					</a>
 				) : (
 					<button className={arrowClasses} onClick={(e) => navigate(e)}>
 						{"\n"}
-						<i className="material-icons" aria-label={type}></i>
+						<i className={icon} aria-label={type}></i>
 						{"\n"}
 					</button>
 				)}
diff --git a/src/App/components/Sheet/__snapshots__/index.test.js.snap b/src/App/components/Sheet/__snapshots__/index.test.js.snap
index f248f0f5a0..6e44791913 100644
--- a/src/App/components/Sheet/__snapshots__/index.test.js.snap
+++ b/src/App/components/Sheet/__snapshots__/index.test.js.snap
@@ -28,10 +28,9 @@ exports[`Component: Sheet - does not render with data-require-action if it is se
         
 			
         <i
-          className="material-icons"
-        >
-          close
-        </i>
+          aria-hidden="true"
+          className="swepay-icon-close"
+        />
         
 		
       </button>
@@ -71,10 +70,9 @@ exports[`Component: Sheet - renders 1`] = `
         
 			
         <i
-          className="material-icons"
-        >
-          close
-        </i>
+          aria-hidden="true"
+          className="swepay-icon-close"
+        />
         
 		
       </button>
@@ -114,10 +112,9 @@ exports[`Component: Sheet - renders with a close icon 1`] = `
         
 			
         <i
-          className="material-icons"
-        >
-          close
-        </i>
+          aria-hidden="true"
+          className="swepay-icon-close"
+        />
         
 		
       </button>
@@ -158,10 +155,9 @@ exports[`Component: Sheet - renders with an ID 1`] = `
         
 			
         <i
-          className="material-icons"
-        >
-          close
-        </i>
+          aria-hidden="true"
+          className="swepay-icon-close"
+        />
         
 		
       </button>
@@ -201,10 +197,9 @@ exports[`Component: Sheet - renders with children 1`] = `
         
 			
         <i
-          className="material-icons"
-        >
-          close
-        </i>
+          aria-hidden="true"
+          className="swepay-icon-close"
+        />
         
 		
       </button>
@@ -246,10 +241,9 @@ exports[`Component: Sheet - renders with the data-require-action attribute 1`] =
         
 			
         <i
-          className="material-icons"
-        >
-          close
-        </i>
+          aria-hidden="true"
+          className="swepay-icon-close"
+        />
         
 		
       </button>
diff --git a/src/App/components/Sheet/index.js b/src/App/components/Sheet/index.js
index a53944cbd8..b02e8f7030 100644
--- a/src/App/components/Sheet/index.js
+++ b/src/App/components/Sheet/index.js
@@ -21,7 +21,7 @@ const Sheet = ({ id, requireAction, title, footer, children }) => (
 					aria-label="Close sheet"
 				>
 					{"\n\t\t\t"}
-					<i className="material-icons">close</i>
+					<i className="swepay-icon-close" aria-hidden="true"></i>
 					{"\n\t\t"}
 				</button>
 			</div>
diff --git a/src/App/components/Sheet/index.test.js b/src/App/components/Sheet/index.test.js
index b5851ed759..fc52de0cf5 100644
--- a/src/App/components/Sheet/index.test.js
+++ b/src/App/components/Sheet/index.test.js
@@ -20,11 +20,9 @@ describe("Component: Sheet -", () => {
 		render(<Sheet title="test" />);
 
 		expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-			"material-icons"
-		);
-		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-			"close"
+			"swepay-icon-close",
 		);
+		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent("");
 
 		const componentForSnap = renderer.create(<Sheet title="test" />);
 
@@ -36,11 +34,11 @@ describe("Component: Sheet -", () => {
 
 		expect(container.querySelector("div.sheet")).toHaveAttribute(
 			"id",
-			"demo-sheet"
+			"demo-sheet",
 		);
 
 		const componentForSnap = renderer.create(
-			<Sheet title="Test" id="demo-sheet" />
+			<Sheet title="Test" id="demo-sheet" />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -50,11 +48,11 @@ describe("Component: Sheet -", () => {
 		const { container } = render(<Sheet title="Test" requireAction />);
 
 		expect(container.querySelector("div.sheet")).toHaveAttribute(
-			"data-require-action"
+			"data-require-action",
 		);
 
 		const componentForSnap = renderer.create(
-			<Sheet title="Test" requireAction />
+			<Sheet title="Test" requireAction />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -64,11 +62,11 @@ describe("Component: Sheet -", () => {
 		const { container } = render(<Sheet title="Test" requireAction={false} />);
 
 		expect(container.querySelector("div.sheet")).not.toHaveAttribute(
-			"data-require-action"
+			"data-require-action",
 		);
 
 		const componentForSnap = renderer.create(
-			<Sheet title="Test" requireAction={false} />
+			<Sheet title="Test" requireAction={false} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
diff --git a/src/App/components/Sidebar/__snapshots__/index.test.js.snap b/src/App/components/Sidebar/__snapshots__/index.test.js.snap
index c0e682b331..53870744f7 100644
--- a/src/App/components/Sidebar/__snapshots__/index.test.js.snap
+++ b/src/App/components/Sidebar/__snapshots__/index.test.js.snap
@@ -43,10 +43,9 @@ exports[`Component: Sidebar renders 1`] = `
           
 
           <i
-            className="material-icons-outlined"
-          >
-            home
-          </i>
+            aria-hidden="true"
+            className="at-home"
+          />
           
 
           Home Page
@@ -66,10 +65,9 @@ exports[`Component: Sidebar renders 1`] = `
           
 
           <i
-            className="material-icons-outlined rotated"
-          >
-            wb_incandescent
-          </i>
+            aria-hidden="true"
+            className="at-electric-lightbulb"
+          />
           
 
           Get Started
@@ -97,10 +95,9 @@ exports[`Component: Sidebar renders 1`] = `
                 onClick={[Function]}
               >
                 <i
-                  className="material-icons-outlined rotated"
-                >
-                  accessibility
-                </i>
+                  aria-hidden="true"
+                  className="at-wheelchair"
+                />
                 Accessibility
               </a>
             </li>
@@ -114,10 +111,9 @@ exports[`Component: Sidebar renders 1`] = `
                 onClick={[Function]}
               >
                 <i
-                  className="material-icons-outlined rotated"
-                >
-                  palette
-                </i>
+                  aria-hidden="true"
+                  className="at-colors"
+                />
                 Colors
               </a>
               <ul
@@ -134,10 +130,8 @@ exports[`Component: Sidebar renders 1`] = `
 
                   <i
                     aria-expanded="false"
-                    className="material-icons"
-                  >
-                    arrow_back_ios
-                  </i>
+                    className="swepay-icon-chevron-left"
+                  />
                   
 
                   <span>
@@ -149,10 +143,9 @@ exports[`Component: Sidebar renders 1`] = `
                 </a>
                 <header>
                   <i
-                    className="material-icons-outlined rotated"
-                  >
-                    palette
-                  </i>
+                    aria-hidden="true"
+                    className="at-colors"
+                  />
                   Colors
                 </header>
                 <li
@@ -262,10 +255,9 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
           
 
           <i
-            className="material-icons-outlined rotated"
-          >
-            wb_incandescent
-          </i>
+            aria-hidden="true"
+            className="at-electric-lightbulb"
+          />
           
 
           Level 1
@@ -293,10 +285,9 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
                 onClick={[Function]}
               >
                 <i
-                  className="material-icons-outlined rotated"
-                >
-                  accessibility
-                </i>
+                  aria-hidden="true"
+                  className="at-wheelchair"
+                />
                 Level 2
               </a>
               <ul
@@ -313,10 +304,8 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
 
                   <i
                     aria-expanded="false"
-                    className="material-icons"
-                  >
-                    arrow_back_ios
-                  </i>
+                    className="swepay-icon-chevron-left"
+                  />
                   
 
                   <span>
@@ -328,10 +317,9 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
                 </a>
                 <header>
                   <i
-                    className="material-icons-outlined rotated"
-                  >
-                    accessibility
-                  </i>
+                    aria-hidden="true"
+                    className="at-wheelchair"
+                  />
                   Level 2
                 </header>
                 <li
@@ -359,10 +347,8 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
 
                       <i
                         aria-expanded="false"
-                        className="material-icons"
-                      >
-                        arrow_back_ios
-                      </i>
+                        className="swepay-icon-chevron-left"
+                      />
                       
 
                       <span>
@@ -400,10 +386,8 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
 
                           <i
                             aria-expanded="false"
-                            className="material-icons"
-                          >
-                            arrow_back_ios
-                          </i>
+                            className="swepay-icon-chevron-left"
+                          />
                           
 
                           <span>
@@ -441,10 +425,8 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
 
                               <i
                                 aria-expanded="false"
-                                className="material-icons"
-                              >
-                                arrow_back_ios
-                              </i>
+                                className="swepay-icon-chevron-left"
+                              />
                               
 
                               <span>
@@ -482,10 +464,8 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
 
                                   <i
                                     aria-expanded="false"
-                                    className="material-icons"
-                                  >
-                                    arrow_back_ios
-                                  </i>
+                                    className="swepay-icon-chevron-left"
+                                  />
                                   
 
                                   <span>
@@ -523,10 +503,8 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
 
                                       <i
                                         aria-expanded="false"
-                                        className="material-icons"
-                                      >
-                                        arrow_back_ios
-                                      </i>
+                                        className="swepay-icon-chevron-left"
+                                      />
                                       
 
                                       <span>
@@ -564,10 +542,8 @@ exports[`Component: Sidebar renders 10 levels when four levels is provided 1`] =
 
                                           <i
                                             aria-expanded="false"
-                                            className="material-icons"
-                                          >
-                                            arrow_back_ios
-                                          </i>
+                                            className="swepay-icon-chevron-left"
+                                          />
                                           
 
                                           <span>
@@ -675,10 +651,9 @@ exports[`Component: Sidebar renders five levels when four levels is provided 1`]
           
 
           <i
-            className="material-icons-outlined rotated"
-          >
-            wb_incandescent
-          </i>
+            aria-hidden="true"
+            className="at-electric-lightbulb"
+          />
           
 
           Get Started
@@ -706,10 +681,9 @@ exports[`Component: Sidebar renders five levels when four levels is provided 1`]
                 onClick={[Function]}
               >
                 <i
-                  className="material-icons-outlined rotated"
-                >
-                  accessibility
-                </i>
+                  aria-hidden="true"
+                  className="at-wheelchair"
+                />
                 Accessibility
               </a>
               <ul
@@ -726,10 +700,8 @@ exports[`Component: Sidebar renders five levels when four levels is provided 1`]
 
                   <i
                     aria-expanded="false"
-                    className="material-icons"
-                  >
-                    arrow_back_ios
-                  </i>
+                    className="swepay-icon-chevron-left"
+                  />
                   
 
                   <span>
@@ -741,10 +713,9 @@ exports[`Component: Sidebar renders five levels when four levels is provided 1`]
                 </a>
                 <header>
                   <i
-                    className="material-icons-outlined rotated"
-                  >
-                    accessibility
-                  </i>
+                    aria-hidden="true"
+                    className="at-wheelchair"
+                  />
                   Accessibility
                 </header>
                 <li
@@ -772,10 +743,8 @@ exports[`Component: Sidebar renders five levels when four levels is provided 1`]
 
                       <i
                         aria-expanded="false"
-                        className="material-icons"
-                      >
-                        arrow_back_ios
-                      </i>
+                        className="swepay-icon-chevron-left"
+                      />
                       
 
                       <span>
@@ -873,10 +842,9 @@ exports[`Component: Sidebar renders four levels when four levels is provided 1`]
           
 
           <i
-            className="material-icons-outlined rotated"
-          >
-            wb_incandescent
-          </i>
+            aria-hidden="true"
+            className="at-electric-lightbulb"
+          />
           
 
           Get Started
@@ -904,10 +872,9 @@ exports[`Component: Sidebar renders four levels when four levels is provided 1`]
                 onClick={[Function]}
               >
                 <i
-                  className="material-icons-outlined rotated"
-                >
-                  accessibility
-                </i>
+                  aria-hidden="true"
+                  className="at-wheelchair"
+                />
                 Accessibility
               </a>
               <ul
@@ -924,10 +891,8 @@ exports[`Component: Sidebar renders four levels when four levels is provided 1`]
 
                   <i
                     aria-expanded="false"
-                    className="material-icons"
-                  >
-                    arrow_back_ios
-                  </i>
+                    className="swepay-icon-chevron-left"
+                  />
                   
 
                   <span>
@@ -939,10 +904,9 @@ exports[`Component: Sidebar renders four levels when four levels is provided 1`]
                 </a>
                 <header>
                   <i
-                    className="material-icons-outlined rotated"
-                  >
-                    accessibility
-                  </i>
+                    aria-hidden="true"
+                    className="at-wheelchair"
+                  />
                   Accessibility
                 </header>
                 <li
@@ -1028,10 +992,9 @@ exports[`Component: Sidebar renders one level when one level is provided 1`] = `
           
 
           <i
-            className="material-icons-outlined"
-          >
-            home
-          </i>
+            aria-hidden="true"
+            className="at-home"
+          />
           
 
           Home Page
@@ -1051,10 +1014,9 @@ exports[`Component: Sidebar renders one level when one level is provided 1`] = `
           
 
           <i
-            className="material-icons-outlined rotated"
-          >
-            wb_incandescent
-          </i>
+            aria-hidden="true"
+            className="at-electric-lightbulb"
+          />
           
 
           Get Started
@@ -1110,10 +1072,9 @@ exports[`Component: Sidebar renders three levels when three levels is provided 1
           
 
           <i
-            className="material-icons-outlined rotated"
-          >
-            wb_incandescent
-          </i>
+            aria-hidden="true"
+            className="at-electric-lightbulb"
+          />
           
 
           Get Started
@@ -1212,10 +1173,9 @@ exports[`Component: Sidebar renders two levels when two levels is provided 1`] =
           
 
           <i
-            className="material-icons-outlined rotated"
-          >
-            wb_incandescent
-          </i>
+            aria-hidden="true"
+            className="at-electric-lightbulb"
+          />
           
 
           Get Started
@@ -1243,10 +1203,9 @@ exports[`Component: Sidebar renders two levels when two levels is provided 1`] =
                 onClick={[Function]}
               >
                 <i
-                  className="material-icons-outlined rotated"
-                >
-                  accessibility
-                </i>
+                  aria-hidden="true"
+                  className="at-wheelchair"
+                />
                 Accessibility
               </a>
             </li>
@@ -1260,10 +1219,9 @@ exports[`Component: Sidebar renders two levels when two levels is provided 1`] =
                 onClick={[Function]}
               >
                 <i
-                  className="material-icons-outlined rotated"
-                >
-                  palette
-                </i>
+                  aria-hidden="true"
+                  className="at-colors"
+                />
                 Colors
               </a>
             </li>
diff --git a/src/App/components/Sidebar/index.js b/src/App/components/Sidebar/index.js
index 0f422d896f..0a138f6bcc 100644
--- a/src/App/components/Sidebar/index.js
+++ b/src/App/components/Sidebar/index.js
@@ -16,9 +16,7 @@ const AddNewLevel = ({ currentNav, previousTitle }) => (
 					className="previous-nav"
 				>
 					{"\n"}
-					<i className="material-icons" aria-expanded="false">
-						arrow_back_ios
-					</i>
+					<i className="swepay-icon-chevron-left" aria-expanded="false"></i>
 					{"\n"}
 					<span>Back to {previousTitle}</span>
 					{"\n"}
@@ -123,7 +121,7 @@ Sidebar.prototype = {
 			title: PropTypes.string.isRequired,
 			icon: PropTypes.instanceOf(Element),
 			children: PropTypes.Array,
-		})
+		}),
 	),
 };
 
diff --git a/src/App/components/Sidebar/index.test.js b/src/App/components/Sidebar/index.test.js
index eae7f68063..e8d63fbeff 100644
--- a/src/App/components/Sidebar/index.test.js
+++ b/src/App/components/Sidebar/index.test.js
@@ -14,22 +14,18 @@ describe("Component: Sidebar", () => {
 		const navList = [
 			{
 				title: "Home Page",
-				icon: <i className="material-icons-outlined">home</i>,
+				icon: <i className="at-home" aria-hidden="true"></i>,
 			},
 			{
 				title: "Get Started",
-				icon: (
-					<i className="material-icons-outlined rotated">wb_incandescent</i>
-				),
+				icon: <i className="at-electric-lightbulb" aria-hidden="true"></i>,
 				children: [
 					{
-						icon: (
-							<i className="material-icons-outlined rotated">accessibility</i>
-						),
+						icon: <i className="at-wheelchair" aria-hidden="true"></i>,
 						title: "Accessibility",
 					},
 					{
-						icon: <i className="material-icons-outlined rotated">palette</i>,
+						icon: <i className="at-colors" aria-hidden="true"></i>,
 						title: "Colors",
 						children: [
 							{
@@ -58,16 +54,16 @@ describe("Component: Sidebar", () => {
 		expect(
 			screen
 				.getAllByRole("listitem")
-				.filter((elmt) => elmt.classList.contains("main-nav-li"))
+				.filter((elmt) => elmt.classList.contains("main-nav-li")),
 		).toHaveLength(2);
 		expect(
 			screen
 				.getAllByRole("listitem")
-				.filter((elmt) => elmt.classList.contains("secondary-nav-li"))
+				.filter((elmt) => elmt.classList.contains("secondary-nav-li")),
 		).toHaveLength(2);
 
 		const componentForSnap = renderer.create(
-			<Sidebar id="sidebar-1" navList={navList} extendedSidebar={true} />
+			<Sidebar id="sidebar-1" navList={navList} extendedSidebar={true} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -77,13 +73,11 @@ describe("Component: Sidebar", () => {
 		const navList = [
 			{
 				title: "Home Page",
-				icon: <i className="material-icons-outlined">home</i>,
+				icon: <i className="at-home" aria-hidden="true"></i>,
 			},
 			{
 				title: "Get Started",
-				icon: (
-					<i className="material-icons-outlined rotated">wb_incandescent</i>
-				),
+				icon: <i className="at-electric-lightbulb" aria-hidden="true"></i>,
 			},
 		];
 
@@ -94,11 +88,11 @@ describe("Component: Sidebar", () => {
 		expect(mainNavUl).toHaveClass("main-nav-ul");
 		expect(mainNavUl.querySelectorAll(".main-nav-li")).toHaveLength(2);
 		expect(mainNavUl.querySelectorAll(".sidebar-secondary-nav")).toHaveLength(
-			0
+			0,
 		);
 
 		const componentForSnap = renderer.create(
-			<Sidebar id="test" navList={navList} />
+			<Sidebar id="test" navList={navList} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -108,18 +102,14 @@ describe("Component: Sidebar", () => {
 		const navList = [
 			{
 				title: "Get Started",
-				icon: (
-					<i className="material-icons-outlined rotated">wb_incandescent</i>
-				),
+				icon: <i className="at-electric-lightbulb" aria-hidden="true"></i>,
 				children: [
 					{
-						icon: (
-							<i className="material-icons-outlined rotated">accessibility</i>
-						),
+						icon: <i className="at-wheelchair" aria-hidden="true"></i>,
 						title: "Accessibility",
 					},
 					{
-						icon: <i className="material-icons-outlined rotated">palette</i>,
+						icon: <i className="at-colors" aria-hidden="true"></i>,
 						title: "Colors",
 					},
 				],
@@ -131,7 +121,7 @@ describe("Component: Sidebar", () => {
 		expect(
 			screen
 				.getAllByRole("list")
-				.filter((elmt) => elmt.classList.contains("main-nav-ul"))
+				.filter((elmt) => elmt.classList.contains("main-nav-ul")),
 		).toHaveLength(1);
 
 		const mainNavUl = screen
@@ -139,13 +129,13 @@ describe("Component: Sidebar", () => {
 			.filter((elmt) => elmt.classList.contains("main-nav-ul"))[0];
 
 		expect(mainNavUl.querySelectorAll(".sidebar-secondary-nav")).toHaveLength(
-			1
+			1,
 		);
 		expect(mainNavUl.querySelectorAll(".secondary-nav-ul")).toHaveLength(1);
 		expect(mainNavUl.querySelectorAll(".secondary-nav-li")).toHaveLength(2);
 
 		const componentForSnap = renderer.create(
-			<Sidebar id="test" navList={navList} />
+			<Sidebar id="test" navList={navList} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -155,9 +145,7 @@ describe("Component: Sidebar", () => {
 		const navList = [
 			{
 				title: "Get Started",
-				icon: (
-					<i className="material-icons-outlined rotated">wb_incandescent</i>
-				),
+				icon: <i className="at-electric-lightbulb" aria-hidden="true"></i>,
 				children: [
 					{
 						title: "Accessibility",
@@ -183,7 +171,7 @@ describe("Component: Sidebar", () => {
 		expect(mainNavUl.querySelectorAll(".nav-leaf")).toHaveLength(1);
 
 		const componentForSnap = renderer.create(
-			<Sidebar id="test" navList={navList} />
+			<Sidebar id="test" navList={navList} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -193,14 +181,10 @@ describe("Component: Sidebar", () => {
 		const navList = [
 			{
 				title: "Get Started",
-				icon: (
-					<i className="material-icons-outlined rotated">wb_incandescent</i>
-				),
+				icon: <i className="at-electric-lightbulb" aria-hidden="true"></i>,
 				children: [
 					{
-						icon: (
-							<i className="material-icons-outlined rotated">accessibility</i>
-						),
+						icon: <i className="at-wheelchair" aria-hidden="true"></i>,
 						title: "Accessibility",
 						children: [
 							{
@@ -219,18 +203,18 @@ describe("Component: Sidebar", () => {
 		];
 
 		const { container } = render(
-			<Sidebar id="test" navList={navList} extendedSidebar={true} />
+			<Sidebar id="test" navList={navList} extendedSidebar={true} />,
 		);
 
 		expect(
 			screen
 				.getAllByRole("list")
-				.map((elmt) => elmt.querySelectorAll(":scope > li"))
+				.map((elmt) => elmt.querySelectorAll(":scope > li")),
 		).toHaveLength(4);
 		expect(container.querySelectorAll(".nav-leaf")).toHaveLength(1);
 
 		const componentForSnap = renderer.create(
-			<Sidebar id="test" navList={navList} extendedSidebar={true} />
+			<Sidebar id="test" navList={navList} extendedSidebar={true} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -240,14 +224,10 @@ describe("Component: Sidebar", () => {
 		const navList = [
 			{
 				title: "Get Started",
-				icon: (
-					<i className="material-icons-outlined rotated">wb_incandescent</i>
-				),
+				icon: <i className="at-electric-lightbulb" aria-hidden="true"></i>,
 				children: [
 					{
-						icon: (
-							<i className="material-icons-outlined rotated">accessibility</i>
-						),
+						icon: <i className="at-wheelchair" aria-hidden="true"></i>,
 						title: "Accessibility",
 						children: [
 							{
@@ -271,18 +251,18 @@ describe("Component: Sidebar", () => {
 		];
 
 		const { container } = render(
-			<Sidebar id="test" navList={navList} extendedSidebar={true} />
+			<Sidebar id="test" navList={navList} extendedSidebar={true} />,
 		);
 
 		expect(
 			screen
 				.getAllByRole("list")
-				.map((elmt) => elmt.querySelectorAll(":scope > li"))
+				.map((elmt) => elmt.querySelectorAll(":scope > li")),
 		).toHaveLength(5);
 		expect(container.querySelectorAll(".nav-leaf")).toHaveLength(1);
 
 		const componentForSnap = renderer.create(
-			<Sidebar id="test" navList={navList} extendedSidebar={true} />
+			<Sidebar id="test" navList={navList} extendedSidebar={true} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -292,14 +272,10 @@ describe("Component: Sidebar", () => {
 		const navList = [
 			{
 				title: "Level 1",
-				icon: (
-					<i className="material-icons-outlined rotated">wb_incandescent</i>
-				),
+				icon: <i className="at-electric-lightbulb" aria-hidden="true"></i>,
 				children: [
 					{
-						icon: (
-							<i className="material-icons-outlined rotated">accessibility</i>
-						),
+						icon: <i className="at-wheelchair" aria-hidden="true"></i>,
 						title: "Level 2",
 						children: [
 							{
@@ -348,18 +324,18 @@ describe("Component: Sidebar", () => {
 		];
 
 		const { container } = render(
-			<Sidebar id="test" navList={navList} extendedSidebar={true} />
+			<Sidebar id="test" navList={navList} extendedSidebar={true} />,
 		);
 
 		expect(
 			screen
 				.getAllByRole("list")
-				.map((elmt) => elmt.querySelectorAll(":scope > li"))
+				.map((elmt) => elmt.querySelectorAll(":scope > li")),
 		).toHaveLength(10);
 		expect(container.querySelectorAll(".nav-leaf")).toHaveLength(1);
 
 		const componentForSnap = renderer.create(
-			<Sidebar id="test" navList={navList} extendedSidebar={true} />
+			<Sidebar id="test" navList={navList} extendedSidebar={true} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -369,22 +345,18 @@ describe("Component: Sidebar", () => {
 		const navList = [
 			{
 				title: "Home page",
-				icon: <i className="material-icons-outlined">home</i>,
+				icon: <i className="at-wheelchair" aria-hidden="true"></i>,
 			},
 			{
 				title: "Get Started",
-				icon: (
-					<i className="material-icons-outlined rotated">wb_incandescent</i>
-				),
+				icon: <i className="at-electric-lightbulb" aria-hidden="true"></i>,
 				children: [
 					{
-						icon: (
-							<i className="material-icons-outlined rotated">accessibility</i>
-						),
+						icon: <i className="at-wheelchair" aria-hidden="true"></i>,
 						title: "Accessibility",
 					},
 					{
-						icon: <i className="material-icons-outlined rotated">palette</i>,
+						icon: <i className="at-colors" aria-hidden="true"></i>,
 						title: "Colors",
 						children: [
 							{
@@ -408,11 +380,11 @@ describe("Component: Sidebar", () => {
 		];
 
 		const { container } = render(
-			<Sidebar id="sidebar" navList={navList} sticky />
+			<Sidebar id="sidebar" navList={navList} sticky />,
 		);
 
 		expect(container.querySelector(".sidebar")).toHaveClass(
-			"sidebar-topbar-sticky"
+			"sidebar-topbar-sticky",
 		);
 	});
 });
diff --git a/src/App/components/Steps/__snapshots__/index.test.js.snap b/src/App/components/Steps/__snapshots__/index.test.js.snap
index e514a03dbd..cecd9069f8 100644
--- a/src/App/components/Steps/__snapshots__/index.test.js.snap
+++ b/src/App/components/Steps/__snapshots__/index.test.js.snap
@@ -12,11 +12,9 @@ exports[`Component: Steps renders clickable Steps 1`] = `
 
        
       <a>
-        <div
-          className="material-icons steps-icon"
-        >
-          check
-        </div>
+        <i
+          className="completed steps-icon"
+        />
         
 
         Step one
@@ -98,21 +96,17 @@ exports[`Component: Steps renders clickable Steps 1`] = `
   <div
     className="steps-responsive"
   >
-    <div
-      className="material-icons steps-nav-left"
-    >
-      keyboard_arrow_left
-    </div>
+    <i
+      className="swepay-icon-chevron-left steps-nav-left"
+    />
     <div
       className="steps-responsive-text"
     >
       Step 2
     </div>
-    <div
-      className="material-icons steps-nav-right"
-    >
-      keyboard_arrow_right
-    </div>
+    <i
+      className="swepay-icon-chevron-right steps-nav-right"
+    />
   </div>
 </div>
 `;
@@ -125,11 +119,9 @@ exports[`Component: Steps renders in vertical mode if prop vertical is provided
     <li
       className="steps-completed"
     >
-      <div
-        className="material-icons steps-icon"
-      >
-        check
-      </div>
+      <i
+        className="completed steps-icon"
+      />
       
 
       Step one
@@ -183,11 +175,9 @@ exports[`Component: Steps renders with default items if no props are provided 1`
     <li
       className="steps-completed"
     >
-      <div
-        className="material-icons steps-icon"
-      >
-        check
-      </div>
+      <i
+        className="completed steps-icon"
+      />
       
 
       Step one
diff --git a/src/App/components/Steps/index.js b/src/App/components/Steps/index.js
index 9973340d73..47f9e14131 100644
--- a/src/App/components/Steps/index.js
+++ b/src/App/components/Steps/index.js
@@ -25,7 +25,7 @@ const StepsContent = ({ completed, subtitle, title, index }) => (
 	<>
 		{completed ? (
 			<>
-				<div className="material-icons steps-icon">check</div>
+				<i className="completed steps-icon" />
 				{"\n"}
 			</>
 		) : (
@@ -50,7 +50,7 @@ const RenderSteps = ({ steps }) => (
 					className={classnames(
 						completed ? "steps-completed" : null,
 						ongoing ? "steps-ongoing" : null,
-						selected ? "steps-selected" : null
+						selected ? "steps-selected" : null,
 					)}
 				>
 					{clickable ? (
@@ -75,7 +75,7 @@ const RenderSteps = ({ steps }) => (
 						/>
 					)}
 				</li>
-			)
+			),
 		)}
 	</>
 );
@@ -88,10 +88,10 @@ const RenderStepsNav = ({ steps }) => {
 	const clickableItem = steps.some((item) => item.clickable);
 
 	const arrowLeft = clickableItem ? (
-		<div className="material-icons steps-nav-left">keyboard_arrow_left</div>
+		<i className="swepay-icon-chevron-left steps-nav-left"></i>
 	) : null;
 	const arrowRight = clickableItem ? (
-		<div className="material-icons steps-nav-right">keyboard_arrow_right</div>
+		<i className="swepay-icon-chevron-right steps-nav-right"></i>
 	) : null;
 
 	return (
diff --git a/src/App/components/Tooltips/__snapshots__/index.test.js.snap b/src/App/components/Tooltips/__snapshots__/index.test.js.snap
index 00c100f7c2..fad8012574 100644
--- a/src/App/components/Tooltips/__snapshots__/index.test.js.snap
+++ b/src/App/components/Tooltips/__snapshots__/index.test.js.snap
@@ -23,10 +23,8 @@ exports[`Component: Tooltip - renders 1`] = `
 
   test title
   <i
-    className="material-icons-outlined m-0"
-  >
-    edit
-  </i>
+    className="at-pencil m-0"
+  />
   
 
   <span
@@ -61,10 +59,8 @@ exports[`Component: Tooltip - renders with icon if icon is provided 1`] = `
   
 
   <i
-    className="material-icons-outlined m-0"
-  >
-    edit
-  </i>
+    className="at-pencil m-0"
+  />
   
 
   <span
diff --git a/src/App/components/Tooltips/index.js b/src/App/components/Tooltips/index.js
index 4e97785034..f96b683200 100644
--- a/src/App/components/Tooltips/index.js
+++ b/src/App/components/Tooltips/index.js
@@ -7,14 +7,14 @@ const Tooltip = ({ title, text, className, position, id, icon, isVisible }) => {
 		"tooltip btn btn-secondary",
 		position && `tooltip-${position}`,
 		className && `${className}`,
-		isVisible && "isVisible"
+		isVisible && "isVisible",
 	);
 
 	return (
 		<button aria-describedby={icon ? id : null} className={tooltipClasses}>
 			{"\n"}
 			{title}
-			{icon && <i className="material-icons-outlined m-0">{icon}</i>}
+			{icon && <i className={`${icon} m-0`}></i>}
 			{"\n"}
 			<span role="tooltip" id={id}>
 				{text}
diff --git a/src/App/components/Tooltips/index.test.js b/src/App/components/Tooltips/index.test.js
index 3e4a6bc53d..577e28a5d3 100644
--- a/src/App/components/Tooltips/index.test.js
+++ b/src/App/components/Tooltips/index.test.js
@@ -6,7 +6,7 @@ import "@testing-library/jest-dom";
 import Tooltip from "./index";
 
 const text = "test text";
-const icon = "edit";
+const icon = "at-pencil";
 const title = "test title";
 const top = "top";
 const bottom = "bottom";
@@ -20,7 +20,7 @@ describe("Component: Tooltip -", () => {
 
 	it("renders", () => {
 		const componentForSnap = renderer.create(
-			<Tooltip text={text} icon={icon} title={title} />
+			<Tooltip text={text} icon={icon} title={title} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -39,14 +39,12 @@ describe("Component: Tooltip -", () => {
 		render(<Tooltip icon={icon} text={text} />);
 
 		expect(screen.getByRole("button").querySelector("i")).toHaveClass(
-			"material-icons-outlined m-0"
-		);
-		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent(
-			"edit"
+			"at-pencil m-0",
 		);
+		expect(screen.getByRole("button").querySelector("i")).toHaveTextContent("");
 
 		const componentForSnap = renderer.create(
-			<Tooltip icon={icon} text={text} />
+			<Tooltip icon={icon} text={text} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -58,7 +56,7 @@ describe("Component: Tooltip -", () => {
 		expect(screen.getByRole("tooltip")).toHaveTextContent("test text");
 
 		const componentForSnap = renderer.create(
-			<Tooltip title={title} text={text} />
+			<Tooltip title={title} text={text} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -78,11 +76,11 @@ describe("Component: Tooltip -", () => {
 		render(<Tooltip text={text} position={right} />);
 
 		expect(screen.getByRole("button")).toHaveClass(
-			"tooltip btn btn-secondary tooltip-right"
+			"tooltip btn btn-secondary tooltip-right",
 		);
 
 		const componentForSnap = renderer.create(
-			<Tooltip text={text} position={right} />
+			<Tooltip text={text} position={right} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -92,11 +90,11 @@ describe("Component: Tooltip -", () => {
 		render(<Tooltip text={text} position={left} />);
 
 		expect(screen.getByRole("button")).toHaveClass(
-			"tooltip btn btn-secondary tooltip-left"
+			"tooltip btn btn-secondary tooltip-left",
 		);
 
 		const componentForSnap = renderer.create(
-			<Tooltip text={text} position={left} />
+			<Tooltip text={text} position={left} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -106,11 +104,11 @@ describe("Component: Tooltip -", () => {
 		render(<Tooltip text={text} position={top} />);
 
 		expect(screen.getByRole("button")).toHaveClass(
-			"tooltip btn btn-secondary tooltip-top"
+			"tooltip btn btn-secondary tooltip-top",
 		);
 
 		const componentForSnap = renderer.create(
-			<Tooltip text={text} position={top} />
+			<Tooltip text={text} position={top} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -119,11 +117,11 @@ describe("Component: Tooltip -", () => {
 	it("renders with tooltip position bottom", () => {
 		render(<Tooltip text={text} position={bottom} />);
 		expect(screen.getByRole("button")).toHaveClass(
-			"tooltip btn btn-secondary tooltip-bottom"
+			"tooltip btn btn-secondary tooltip-bottom",
 		);
 
 		const componentForSnap = renderer.create(
-			<Tooltip text={text} position={bottom} />
+			<Tooltip text={text} position={bottom} />,
 		);
 
 		expect(componentForSnap.toJSON()).toMatchSnapshot();
diff --git a/src/App/components/Topbar/__snapshots__/index.test.js.snap b/src/App/components/Topbar/__snapshots__/index.test.js.snap
index 58ab8135de..98de7fa979 100644
--- a/src/App/components/Topbar/__snapshots__/index.test.js.snap
+++ b/src/App/components/Topbar/__snapshots__/index.test.js.snap
@@ -32,10 +32,9 @@ exports[`Component: Topbar - props logout renders logout link and adds topbar-li
     
 
     <i
-      className="material-icons"
-    >
-      exit_to_app
-    </i>
+      aria-hidden="true"
+      className="at-exit small"
+    />
     
 
     <span>
@@ -71,10 +70,9 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
       
 		
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        menu
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-menu-hamburger topbar-btn-icon"
+      />
       
 		
     </button>
@@ -86,10 +84,9 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
       
 
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        close
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-close topbar-btn-icon"
+      />
       
 		
     </button>
@@ -131,10 +128,9 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
           
 
           <i
-            className="material-icons"
-          >
-            home
-          </i>
+            aria-hidden="true"
+            className="at-home small"
+          />
           
 
           
@@ -186,10 +182,8 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
 
                   <i
                     aria-hidden="true"
-                    className="material-icons-outlined"
-                  >
-                    home
-                  </i>
+                    className="at-home"
+                  />
                   
 
                   Home Page
@@ -210,10 +204,8 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
 
                   <i
                     aria-hidden="true"
-                    className="material-icons-outlined rotated"
-                  >
-                    wb_incandescent
-                  </i>
+                    className="at-rocket-launch"
+                  />
                   
 
                   Get Started
@@ -242,10 +234,8 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
                       >
                         <i
                           aria-hidden="true"
-                          className="material-icons-outlined rotated"
-                        >
-                          accessibility
-                        </i>
+                          className="at-vision"
+                        />
                         Accessibility
                       </a>
                     </li>
@@ -260,10 +250,8 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
                       >
                         <i
                           aria-hidden="true"
-                          className="material-icons-outlined rotated"
-                        >
-                          palette
-                        </i>
+                          className="at-paintbrush-paint-tool"
+                        />
                         Colors
                       </a>
                       <ul
@@ -320,10 +308,8 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
                       >
                         <i
                           aria-hidden="true"
-                          className="material-icons-outlined rotated"
-                        >
-                          grid_on
-                        </i>
+                          className="at-grid"
+                        />
                         Grid
                       </a>
                     </li>
@@ -338,10 +324,8 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
                       >
                         <i
                           aria-hidden="true"
-                          className="material-icons-outlined rotated"
-                        >
-                          space_bar
-                        </i>
+                          className="move-arrow-left-right"
+                        />
                         Spacing
                       </a>
                     </li>
@@ -361,10 +345,8 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
 
                   <i
                     aria-hidden="true"
-                    className="material-icons-outlined"
-                  >
-                    palette
-                  </i>
+                    className="at-dna-science"
+                  />
                   
 
                   Identity
@@ -476,16 +458,15 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
           
 
           <i
-            className="material-icons"
-          >
-            shopping_cart
-          </i>
+            aria-hidden="true"
+            className="at-shop-cart small"
+          />
           
 
           
 
           <span>
-            Purchase history
+            Purchases
           </span>
         </a>
         
@@ -498,10 +479,9 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
           
 
           <i
-            className="material-icons"
-          >
-            settings
-          </i>
+            aria-hidden="true"
+            className="at-gear small"
+          />
           
 
           
@@ -542,10 +522,9 @@ exports[`Component: Topbar - props topbarContent renders a topbar menu without m
       
 		
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        menu
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-menu-hamburger topbar-btn-icon"
+      />
       
 		
     </button>
@@ -557,10 +536,9 @@ exports[`Component: Topbar - props topbarContent renders a topbar menu without m
       
 
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        close
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-close topbar-btn-icon"
+      />
       
 		
     </button>
@@ -669,10 +647,9 @@ exports[`Component: Topbar - props topbarContent renders a topbar menuopen and c
       
 		
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        menu
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-menu-hamburger topbar-btn-icon"
+      />
       
 		
     </button>
@@ -684,10 +661,9 @@ exports[`Component: Topbar - props topbarContent renders a topbar menuopen and c
       
 
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        close
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-close topbar-btn-icon"
+      />
       
 		
     </button>
@@ -729,10 +705,9 @@ exports[`Component: Topbar - props topbarContent renders a topbar menuopen and c
           
 
           <i
-            className="material-icons"
-          >
-            home
-          </i>
+            aria-hidden="true"
+            className="at-home small"
+          />
           
 
           
@@ -751,16 +726,15 @@ exports[`Component: Topbar - props topbarContent renders a topbar menuopen and c
           
 
           <i
-            className="material-icons"
-          >
-            shopping_cart
-          </i>
+            aria-hidden="true"
+            className="at-shop-cart small"
+          />
           
 
           
 
           <span>
-            Purchase history
+            Purchases
           </span>
         </a>
         
@@ -773,10 +747,9 @@ exports[`Component: Topbar - props topbarContent renders a topbar menuopen and c
           
 
           <i
-            className="material-icons"
-          >
-            settings
-          </i>
+            aria-hidden="true"
+            className="at-gear small"
+          />
           
 
           
@@ -817,10 +790,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
       
 		
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        menu
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-menu-hamburger topbar-btn-icon"
+      />
       
 		
     </button>
@@ -832,10 +804,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
       
 
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        close
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-close topbar-btn-icon"
+      />
       
 		
     </button>
@@ -877,10 +848,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
           
 
           <i
-            className="material-icons"
-          >
-            home
-          </i>
+            aria-hidden="true"
+            className="at-home small"
+          />
           
 
           
@@ -899,16 +869,15 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
           
 
           <i
-            className="material-icons"
-          >
-            shopping_cart
-          </i>
+            aria-hidden="true"
+            className="at-shop-cart small"
+          />
           
 
           
 
           <span>
-            Purchase history
+            Purchases
           </span>
         </a>
         
@@ -921,10 +890,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
           
 
           <i
-            className="material-icons"
-          >
-            settings
-          </i>
+            aria-hidden="true"
+            className="at-gear small"
+          />
           
 
           
@@ -943,10 +911,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
           
 
           <i
-            className="material-icons"
-          >
-            exit_to_app
-          </i>
+            aria-hidden="true"
+            className="at-exit small"
+          />
           
 
           <span>
@@ -987,10 +954,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
       
 		
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        menu
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-menu-hamburger topbar-btn-icon"
+      />
       
 		
     </button>
@@ -1002,10 +968,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
       
 
       <i
-        className="material-icons topbar-btn-icon"
-      >
-        close
-      </i>
+        aria-hidden="true"
+        className="swepay-icon-close topbar-btn-icon"
+      />
       
 		
     </button>
@@ -1047,10 +1012,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
           
 
           <i
-            className="material-icons"
-          >
-            home
-          </i>
+            aria-hidden="true"
+            className="at-home small"
+          />
           
 
           
@@ -1069,16 +1033,15 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
           
 
           <i
-            className="material-icons"
-          >
-            shopping_cart
-          </i>
+            aria-hidden="true"
+            className="at-shop-cart small"
+          />
           
 
           
 
           <span>
-            Purchase history
+            Purchases
           </span>
         </a>
         
@@ -1091,10 +1054,9 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a
           
 
           <i
-            className="material-icons"
-          >
-            settings
-          </i>
+            aria-hidden="true"
+            className="at-gear small"
+          />
           
 
           
diff --git a/src/App/components/Topbar/index.js b/src/App/components/Topbar/index.js
index dd1050458e..fd7d270ac5 100644
--- a/src/App/components/Topbar/index.js
+++ b/src/App/components/Topbar/index.js
@@ -32,13 +32,16 @@ const TopbarBtn = ({ legacy = true }) => (
 			aria-controls="topbar-nav"
 		>
 			{"\n\t\t"}
-			<i className="material-icons topbar-btn-icon">menu</i>
+			<i
+				className="swepay-icon-menu-hamburger topbar-btn-icon"
+				aria-hidden="true"
+			></i>
 			{"\n\t\t"}
 		</button>
 		{legacy && (
 			<button type="button" className="topbar-close" aria-label="Close menu">
 				{"\n"}
-				<i className="material-icons topbar-btn-icon">close</i>
+				<i className="swepay-icon-close topbar-btn-icon" aria-hidden="true"></i>
 				{"\n\t\t"}
 			</button>
 		)}
@@ -64,11 +67,7 @@ const TopbarMenu = ({ menu, logout, sidebar, legacy }) => {
 							title="Close menu"
 						>
 							{"\n"}
-							<i className="material-icons-outlined" aria-hidden="true">
-								{"\n"}
-								close
-								{"\n"}
-							</i>
+							<i className="swepay-icon-close" aria-hidden="true"></i>
 							{"\n"}
 						</button>
 						{"\n"}
@@ -99,7 +98,7 @@ const TopbarMenu = ({ menu, logout, sidebar, legacy }) => {
 								{"\n"}
 								{item.icon ? (
 									<>
-										<i className="material-icons">{item.icon}</i>
+										<i className={item.icon} aria-hidden="true"></i>
 										{"\n"}
 									</>
 								) : null}
@@ -148,7 +147,7 @@ const TopbarLogoutLegacy = () => (
 			onClick={(e) => e.preventDefault()}
 		>
 			{"\n"}
-			<i className="material-icons">exit_to_app</i>
+			<i className="at-exit small" aria-hidden="true"></i>
 			{"\n"}
 			<span>Log out</span>
 			{"\n"}
diff --git a/src/App/components/Topbar/index.test.js b/src/App/components/Topbar/index.test.js
index 633f5a7329..1c711e77b1 100644
--- a/src/App/components/Topbar/index.test.js
+++ b/src/App/components/Topbar/index.test.js
@@ -15,15 +15,15 @@ describe("Component: Topbar -", () => {
 		items: [
 			{
 				name: "Home",
-				icon: "home",
+				icon: "at-home small",
 			},
 			{
-				name: "Purchase history",
-				icon: "shopping_cart",
+				name: "Purchases",
+				icon: "at-shop-cart small",
 			},
 			{
 				name: "Settings",
-				icon: "settings",
+				icon: "at-gear small",
 			},
 		],
 	};
@@ -77,12 +77,12 @@ describe("Component: Topbar -", () => {
 				const menuContainer = screen
 					.getByRole("navigation")
 					.querySelector(".topbar-link-container");
-				const menuIcons = menuContainer.querySelectorAll("i.material-icons");
+				const menuIcons = menuContainer.querySelectorAll("i");
 
 				expect(menuIcons.length).toEqual(0);
 
 				const componentForSnap = renderer.create(
-					<Topbar topbarContent={menuNoIcons} />
+					<Topbar topbarContent={menuNoIcons} />,
 				);
 
 				expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -102,19 +102,19 @@ describe("Component: Topbar -", () => {
 				expect(
 					menu.items.every((item) =>
 						[...renderedNav.querySelectorAll("a span")].some(
-							(elmt) => elmt.textContent === item.name
-						)
-					)
+							(elmt) => elmt.textContent === item.name,
+						),
+					),
 				).toBeTruthy();
 
 				expect(
 					[...renderedNav.querySelectorAll("a span")].some(
-						(elmt) => elmt.textContent === "Log out"
-					)
+						(elmt) => elmt.textContent === "Log out",
+					),
 				).not.toBeTruthy();
 
 				const componentForSnap = renderer.create(
-					<Topbar topbarContent={menu} />
+					<Topbar topbarContent={menu} />,
 				);
 
 				expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -131,12 +131,12 @@ describe("Component: Topbar -", () => {
 
 				expect(renderedNav).toHaveClass("topbar-nav");
 
-				expect(
-					renderedNav.querySelector(".topbar-link-right .material-icons")
-				).toHaveTextContent("exit_to_app");
+				expect(renderedNav.querySelector(".topbar-link-right i")).toHaveClass(
+					"at-exit small",
+				);
 
 				const componentForSnap = renderer.create(
-					<Topbar topbarContent={menu} logout />
+					<Topbar topbarContent={menu} logout />,
 				);
 
 				expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -152,17 +152,17 @@ describe("Component: Topbar -", () => {
 				expect(
 					screen
 						.getAllByRole("button")
-						.filter((elmt) => elmt.classList.contains("topbar-btn"))
+						.filter((elmt) => elmt.classList.contains("topbar-btn")),
 				).toHaveLength(1);
 
 				expect(
 					screen
 						.getAllByRole("button")
-						.filter((elmt) => elmt.classList.contains("topbar-close"))
+						.filter((elmt) => elmt.classList.contains("topbar-close")),
 				).toHaveLength(1);
 
 				const componentForSnap = renderer.create(
-					<Topbar topbarContent={menu} />
+					<Topbar topbarContent={menu} />,
 				);
 
 				expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -185,7 +185,7 @@ describe("Component: Topbar -", () => {
 				expect(eventHandler.preventDefault).toHaveBeenCalled();
 
 				const componentForSnap = renderer.create(
-					<Topbar topbarContent={menu} />
+					<Topbar topbarContent={menu} />,
 				);
 
 				expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -202,7 +202,7 @@ describe("Component: Topbar -", () => {
 				expect(renderedSidebar).toBeTruthy();
 
 				const componentForSnap = renderer.create(
-					<Topbar topbarContent={menu} sidebar />
+					<Topbar topbarContent={menu} sidebar />,
 				);
 
 				expect(componentForSnap.toJSON()).toMatchSnapshot();
@@ -218,20 +218,20 @@ describe("Component: Topbar -", () => {
 						.getAllByRole("link")
 						.filter((elmt) =>
 							[...elmt.children].some(
-								(childElmt) => childElmt.textContent === "Log out"
-							)
-						)
+								(childElmt) => childElmt.textContent === "Log out",
+							),
+						),
 				).toBeTruthy();
 				expect(
 					screen
 						.queryAllByRole("navigation")
-						?.some((elmt) => elmt.classList.contains("topbar-nav"))
+						?.some((elmt) => elmt.classList.contains("topbar-nav")),
 				).toBeFalsy();
 				expect(
 					screen
 						.getAllByRole("link")
 						.find((elmt) => elmt.classList.contains("topbar-link-right"))
-						.querySelector("span")
+						.querySelector("span"),
 				).toHaveTextContent("Log out");
 
 				const componentForSnap = renderer.create(<Topbar logout />);
@@ -265,7 +265,7 @@ describe("Component: Topbar -", () => {
 
 				expect(screen.getByLabelText("To homepage").tagName).toBe("A");
 				expect(screen.getByLabelText("To homepage")).toHaveClass(
-					"topbar-logo topbar-logo-png"
+					"topbar-logo topbar-logo-png",
 				);
 			});
 		});
diff --git a/src/App/docutils/DeprecatedComponentAlert/__snapshots__/index.test.js.snap b/src/App/docutils/DeprecatedComponentAlert/__snapshots__/index.test.js.snap
index 4d8afa836a..8f081b4334 100644
--- a/src/App/docutils/DeprecatedComponentAlert/__snapshots__/index.test.js.snap
+++ b/src/App/docutils/DeprecatedComponentAlert/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`Utilities: DeprecatedComponentAlert renders 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-exclamation-triangle"
+    className="swepay-icon-error-triangle-filled"
   />
   
 
diff --git a/src/App/docutils/DeprecatedComponentAlert/index.js b/src/App/docutils/DeprecatedComponentAlert/index.js
index 11c56e8bd0..b7707758a0 100644
--- a/src/App/docutils/DeprecatedComponentAlert/index.js
+++ b/src/App/docutils/DeprecatedComponentAlert/index.js
@@ -3,7 +3,7 @@ import Alert from "@components/Alert";
 
 // TODO: is it actually used anywhere? else remove
 const DeprecatedComponentAlert = () => (
-	<Alert type="danger" icon="exclamation-triangle">
+	<Alert type="danger" icon="swepay-icon-error-triangle-filled">
 		<h3 className="text-danger">Component deprecated!</h3>
 		<p>This component has been deprecated and should not be used!</p>
 	</Alert>
diff --git a/src/App/docutils/ExperimentalComponentAlert/__snapshots__/index.test.js.snap b/src/App/docutils/ExperimentalComponentAlert/__snapshots__/index.test.js.snap
index e06f3c5749..9ea2ae8ea7 100644
--- a/src/App/docutils/ExperimentalComponentAlert/__snapshots__/index.test.js.snap
+++ b/src/App/docutils/ExperimentalComponentAlert/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`Utilities: ExperimentalComponentAlert renders 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-exclamation-triangle"
+    className="swepay-icon-error-triangle-filled"
   />
   
 
diff --git a/src/App/docutils/ExperimentalComponentAlert/index.js b/src/App/docutils/ExperimentalComponentAlert/index.js
index 3dd09e6bb5..cf58f50d0f 100644
--- a/src/App/docutils/ExperimentalComponentAlert/index.js
+++ b/src/App/docutils/ExperimentalComponentAlert/index.js
@@ -3,7 +3,7 @@ import Alert from "@components/Alert";
 
 // TODO: is it actually used anywhere? else remove
 const ExperimentalComponentAlert = () => (
-	<Alert type="danger" icon="exclamation-triangle">
+	<Alert type="danger" icon="swepay-icon-error-triangle-filled">
 		<h3 className="text-danger">Component under development!</h3>
 		<p>This component is still under development and is subject to change.</p>
 	</Alert>
diff --git a/src/App/docutils/Icon/__snapshots__/index.test.js.snap b/src/App/docutils/Icon/__snapshots__/index.test.js.snap
deleted file mode 100644
index fea4863dae..0000000000
--- a/src/App/docutils/Icon/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Utilities: Icon renders 1`] = `
-<i
-  aria-hidden="true"
-  className="material-icons"
->
-  test
-</i>
-`;
diff --git a/src/App/docutils/Icon/index.js b/src/App/docutils/Icon/index.js
deleted file mode 100644
index 48f1e606b3..0000000000
--- a/src/App/docutils/Icon/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-const Icon = ({ type, classNames }) => (
-	<i
-		className={`material-icons${classNames ? ` ${classNames}` : ""}`}
-		aria-hidden="true"
-	>
-		{type}
-	</i>
-);
-
-Icon.propTypes = { type: PropTypes.string.isRequired };
-
-export default Icon;
diff --git a/src/App/docutils/Icon/index.test.js b/src/App/docutils/Icon/index.test.js
deleted file mode 100644
index 4976c3c1a3..0000000000
--- a/src/App/docutils/Icon/index.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import renderer from "react-test-renderer";
-
-import Icon from "./index";
-
-describe("Utilities: Icon", () => {
-	it("is defined", () => {
-		expect(Icon).toBeDefined();
-	});
-
-	it("renders", () => {
-		const wrapper = renderer.create(<Icon type="test" />);
-
-		expect(wrapper.toJSON()).toMatchSnapshot();
-	});
-});
diff --git a/src/App/docutils/index.js b/src/App/docutils/index.js
index c34824d10c..71daa9652f 100644
--- a/src/App/docutils/index.js
+++ b/src/App/docutils/index.js
@@ -3,7 +3,6 @@ import DocContainer from "./DocContainer";
 import DocHeading from "./DocHeading";
 import DeprecatedComponentAlert from "./DeprecatedComponentAlert";
 import ExperimentalComponentAlert from "./ExperimentalComponentAlert";
-import Icon from "./Icon";
 import JavascriptDocs from "./JavascriptDocs";
 import JavascriptDocElement from "./JavascriptDocElement";
 import { EditableComponentPreview } from "./ComponentPreview/EditableComponentPreview";
@@ -15,7 +14,6 @@ export {
 	DocHeading,
 	DeprecatedComponentAlert,
 	ExperimentalComponentAlert,
-	Icon,
 	JavascriptDocs,
 	JavascriptDocElement,
 	EditableComponentPreview,
diff --git a/src/App/utils/SelectPanel/index.js b/src/App/utils/SelectPanel/index.js
index 911391422d..45d53b5ced 100644
--- a/src/App/utils/SelectPanel/index.js
+++ b/src/App/utils/SelectPanel/index.js
@@ -42,7 +42,7 @@ const MobileNavGroup = ({ route, index, sidebarId }) => {
 	return (
 		<li className="nav-group">
 			<button className="nav-group-heading" onClick={() => toggleActive()}>
-				<i className="at-arrow-right small" aria-hidden="true"></i>
+				<i className="swepay-icon-chevron-right" aria-hidden="true"></i>
 				{title}
 			</button>
 			<ul className="nav-ul">
diff --git a/src/icons/shapes/export-arrow-up-right.svg b/src/icons/shapes/export-arrow-up-right.svg
new file mode 100644
index 0000000000..b2e1446c63
--- /dev/null
+++ b/src/icons/shapes/export-arrow-up-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" color="currentColor"><defs><style>.cls-63ce7424ea57ea6c8380055b-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><polyline class="cls-63ce7424ea57ea6c8380055b-1" points="22 13 22 22 2 22 2 2 11 2"></polyline><polyline class="cls-63ce7424ea57ea6c8380055b-1" points="14 2 22 2 22 10"></polyline><line class="cls-63ce7424ea57ea6c8380055b-1" x1="22" y1="2" x2="10" y2="14"></line></svg>
diff --git a/src/less/components/breadcrumb.less b/src/less/components/breadcrumb.less
index 6b3a087cff..534623728f 100644
--- a/src/less/components/breadcrumb.less
+++ b/src/less/components/breadcrumb.less
@@ -14,7 +14,7 @@ ol.breadcrumb {
 
 		a {
 			text-decoration: none;
-			color: @brand-accent-links;
+			color: var(--brand-accent-links);
 		}
 
 		&:not(:last-child) {
diff --git a/src/less/components/card.less b/src/less/components/card.less
index 2943ab82d5..034668fba7 100644
--- a/src/less/components/card.less
+++ b/src/less/components/card.less
@@ -194,8 +194,9 @@
 		}
 	}
 
+	// TODO: to be removed. Not used anymore (Old card). Remove it in next major release
 	&.card-primary {
-		background-color: @brand-bg-1;
+		background-color: var(--bg-primary);
 
 		.card-header {
 			position: relative;
diff --git a/src/less/components/code-tags.less b/src/less/components/code-tags.less
index 8cdb892e20..b210489b83 100644
--- a/src/less/components/code-tags.less
+++ b/src/less/components/code-tags.less
@@ -24,7 +24,7 @@ code {
 	}
 
 	&.code-tags-secondary {
-		background-color: @brand-bg-1;
+		background-color: var(--bg-primary);
 	}
 
 	&.code-tags-tertiary {
@@ -41,7 +41,7 @@ code {
 	margin-right: 0.5rem;
 
 	&.tag-secondary {
-		background-color: @brand-bg-1;
+		background-color: var(--bg-primary);
 	}
 
 	&.tag-tertiary {
@@ -52,15 +52,38 @@ code {
 		padding-right: 0;
 	}
 
-	button {
+	button.close-button {
 		background-color: transparent;
 		border: none;
-		display: flex;
+		display: grid;
 		cursor: pointer;
 		width: 1.5rem;
 		padding: 0;
 		margin-left: 0.125rem;
 
+		// conditional check to ensure no duplicate close cross if not done migration from close icon element to no icon element needed
+		// maybe can remove it in next major release or better next real rewrite with breaking changes
+		&:not(:has(i)) {
+			&:before,
+			&:after {
+				content: "";
+				width: 12px;
+				height: 1.5px;
+				background-color: var(--black);
+				place-self: center;
+				position: absolute;
+			}
+
+			&:before {
+				transform: rotate(45deg);
+			}
+
+			&:after {
+				transform: rotate(-45deg);
+			}
+		}
+
+		// TODO: Remove this for next major release 11.0.0 - we'll now be using before & after pseudo elements, no need for close icon anymore. Or keep until introduction of necessary breaking changes, since no big deal anyway
 		i {
 			font-size: 1rem;
 		}
diff --git a/src/less/components/code-view.less b/src/less/components/code-view.less
index fb924ec8d9..0e1af02640 100644
--- a/src/less/components/code-view.less
+++ b/src/less/components/code-view.less
@@ -67,7 +67,7 @@
 			.kd,
 			.k,
 			.kc {
-				color: @blue-syntax-highlight;
+				color: var(--blue-syntax-highlight);
 			}
 
 			.nb,
diff --git a/src/less/components/dialog.less b/src/less/components/dialog.less
index 0932d357ad..54391d030a 100644
--- a/src/less/components/dialog.less
+++ b/src/less/components/dialog.less
@@ -47,7 +47,7 @@
 			/* stylelint-enable selector-list-comma-newline-after */
 
 			.dialog-close {
-				display: inline-flex;
+				display: inline-grid;
 				touch-action: manipulation;
 				cursor: pointer;
 				user-select: none;
@@ -55,6 +55,8 @@
 				border: none;
 				padding: 0;
 				margin-right: -0.5rem;
+				height: 24px;
+				width: 24px;
 
 				&:hover,
 				&.hover {
@@ -82,6 +84,28 @@
 						box-shadow: none;
 					}
 				}
+
+				// conditional check to ensure no duplicate close cross if not done migration from close icon element to no icon element needed
+				// maybe can remove it in next major release or better next real rewrite with breaking changes
+				&:not(:has(i)) {
+					&:before,
+					&:after {
+						content: "";
+						width: 18px;
+						height: 2px;
+						background-color: var(--black);
+						place-self: center;
+						position: absolute;
+					}
+
+					&:before {
+						transform: rotate(45deg);
+					}
+
+					&:after {
+						transform: rotate(-45deg);
+					}
+				}
 			}
 		}
 
diff --git a/src/less/components/form.less b/src/less/components/form.less
index 2ef404b3ac..ddd9ab6021 100644
--- a/src/less/components/form.less
+++ b/src/less/components/form.less
@@ -55,6 +55,7 @@ label {
 		}
 	}
 
+	// TODO: is this used anywhere? if not remove. Else explain better
 	.material-icons,
 	:is(
 			i[class^="at-"],
@@ -62,7 +63,7 @@ label {
 			i[class^="swepay-icon-"],
 			i[class*=" swepay-icon-"]
 		) {
-		color: @brand-accent-links;
+		color: var(--brand-accent-links);
 	}
 }
 
diff --git a/src/less/components/links.less b/src/less/components/links.less
index 7c1054f972..9f33fd83f9 100644
--- a/src/less/components/links.less
+++ b/src/less/components/links.less
@@ -1,16 +1,12 @@
 @import "../global.less";
 @import "./badge.less";
 
-@action-link-height: 3rem;
-@action-link-new-tab-height: 3rem;
-@action-link-arrow-font-size: 1.5rem;
-
 a {
-	color: @brand-accent-links;
+	color: var(--brand-accent-links);
 
 	&:hover,
 	&:focus {
-		color: darken(@brand-accent-links, 10%);
+		color: color-mix(in srgb, var(--brand-accent-links), #000000 25%);
 		text-decoration: none;
 	}
 
@@ -24,10 +20,10 @@ a {
 	}
 
 	&.bright {
-		color: @blue-syntax-highlight;
+		color: var(--blue-syntax-highlight);
 
 		&:focus-visible {
-			outline: 2px solid @brand-primary;
+			outline: 2px solid var(--brand-primary);
 			border-radius: 2px;
 		}
 	}
@@ -47,7 +43,11 @@ a {
 		i {
 			font-size: 1rem;
 			line-height: 1.5;
-			align-self: flex-end;
+			align-self: center;
+
+			&.material-icons {
+				align-self: flex-end;
+			}
 		}
 
 		&.small {
@@ -61,12 +61,12 @@ a {
 		position: relative;
 		display: flex;
 		align-items: center;
-		min-height: @action-link-height;
+		min-height: 3rem;
 		padding-left: 1rem;
 		border: 1px solid transparent;
 		text-decoration: none;
-		background-color: @brand-bg-1;
-		color: @brand-secondary;
+		background-color: var(--bg-primary);
+		color: var(--brand-secondary);
 		margin-bottom: 1rem;
 		border-radius: 4px;
 		padding-top: 0.75rem;
@@ -90,7 +90,7 @@ a {
 		}
 
 		&:focus-visible {
-			outline: 2px solid @brand-secondary;
+			outline: 2px solid var(--brand-secondary);
 			outline-offset: 0;
 			border-radius: 2px;
 		}
@@ -116,25 +116,33 @@ a {
 			width: 0.25rem;
 			left: 0;
 			top: 0;
-			background-color: @brand-primary;
+			background-color: var(--brand-primary);
 			border-radius: 0.25rem 0 0 0.25rem;
 		}
 
-		// TODO: replace by pure CSS
 		&:after {
-			content: "arrow_forward";
-			.material-icons-styling();
-
+			color: var(--brand-secondary);
+			content: "";
 			position: absolute;
+			top: 0;
+			bottom: 0;
 			right: 0;
-			top: calc(50% - @action-link-arrow-font-size / 2);
-			font-size: @action-link-arrow-font-size;
-			color: @brand-secondary;
+			display: flex;
+			align-items: center;
+			background-image: url("../../icons/shapes/chevron_down.svg");
+			transform: rotate(-90deg);
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: contain;
+			width: 24px;
+			height: auto;
+			margin: 0 0.5rem;
 		}
 
 		&.action-link-new-tab {
 			&:after {
-				content: "launch";
+				background-image: url("../../icons/shapes/export-arrow-up-right.svg");
+				transform: none;
 			}
 		}
 	}
@@ -153,7 +161,7 @@ a {
 
 	.small-text {
 		font-size: 0.75rem;
-		color: @brand-secondary;
+		color: var(--brand-secondary);
 		padding-left: 0.5rem;
 	}
 }
diff --git a/src/less/components/media-object.less b/src/less/components/media-object.less
index b5af3fa4a4..5bf6b57f7d 100644
--- a/src/less/components/media-object.less
+++ b/src/less/components/media-object.less
@@ -21,6 +21,11 @@
 			height: 48px;
 			font-size: 3rem;
 		}
+
+		i:is([class^="at-"], [class*=" at-"]):before {
+			align-self: unset;
+			justify-self: unset;
+		}
 	}
 
 	&.media-sm {
diff --git a/src/less/components/pagination.less b/src/less/components/pagination.less
index 2a31fd74e8..a7ce3881ec 100644
--- a/src/less/components/pagination.less
+++ b/src/less/components/pagination.less
@@ -37,6 +37,8 @@
 			pointer-events: none;
 
 			i {
+				color: @light-brown;
+
 				&:before {
 					color: @light-brown;
 				}
@@ -45,22 +47,18 @@
 
 		&:focus,
 		&:hover {
-			i {
-				border: 2px solid @brand-secondary;
-				border-radius: 0.125rem;
-			}
+			outline: 2px solid var(--brand-secondary);
+			border-radius: 0.125rem;
 		}
 
-		i {
-			border: 2px solid transparent;
-
-			&:before {
-				.material-icons-styling(@color: @brand-secondary, @margin: 0, @font-size: 1.75rem);
-			}
+		// TODO: in next major release, remove material icons way of adding icons (material-icons-styling() + :before content: "")
+		i.material-icons:before {
+			.material-icons-styling(@color: @brand-secondary, @margin: 0, @font-size: 1.75rem);
 		}
 
+		// TODO: in next major release, remove material icons way of adding icons (material-icons-styling() + :before content: "")
 		&.arrow-start {
-			i {
+			i.material-icons {
 				display: unset;
 
 				&:before {
@@ -70,7 +68,7 @@
 		}
 
 		&.arrow-back {
-			i {
+			i.material-icons {
 				&:before {
 					content: "chevron_left";
 				}
@@ -78,7 +76,7 @@
 		}
 
 		&.arrow-forward {
-			i {
+			i.material-icons {
 				&:before {
 					content: "chevron_right";
 				}
@@ -86,7 +84,7 @@
 		}
 
 		&.arrow-end {
-			i {
+			i.material-icons {
 				display: unset;
 
 				&:before {
@@ -109,7 +107,7 @@
 			a,
 			span {
 				min-width: 1.75rem;
-				color: @brand-secondary;
+				color: var(--brand-secondary);
 				border: 2px solid transparent;
 				text-align: center;
 				cursor: pointer;
@@ -124,7 +122,7 @@
 			a {
 				&:hover,
 				&:focus {
-					border: 2px solid @brand-secondary;
+					border: 2px solid var(--brand-secondary);
 					border-radius: 0.125rem;
 				}
 
@@ -134,7 +132,7 @@
 			}
 
 			&.active {
-				background-color: @brand-secondary;
+				background-color: var(--brand-secondary);
 
 				a {
 					cursor: default;
diff --git a/src/less/components/payex/badge.less b/src/less/components/payex/badge.less
index cb693ca764..f5c58d8874 100644
--- a/src/less/components/payex/badge.less
+++ b/src/less/components/payex/badge.less
@@ -61,7 +61,7 @@ span {
 	&.status-badge {
 		&.status-badge-javascript {
 			color: @brand-secondary;
-			background-color: @brand-bg-1;
+			background-color: var(--bg-primary);
 		}
 	}
 }
diff --git a/src/less/components/progress-steps.less b/src/less/components/progress-steps.less
index 41b368cfec..682361a869 100644
--- a/src/less/components/progress-steps.less
+++ b/src/less/components/progress-steps.less
@@ -73,7 +73,7 @@
 
 			/* Take full parent size, ignoring parents padding, and stil growing the parent with text from this element */
 			padding: @list-item-padding;
-			color: @brand-secondary;
+			color: var(--brand-secondary);
 			border: 0;
 			cursor: pointer;
 			.negative-margin(@list-item-padding);
@@ -81,7 +81,7 @@
 			&:hover {
 				.steps-number {
 					border-radius: 50%;
-					background-color: @brand-primary;
+					background-color: var(--brand-primary);
 				}
 			}
 
@@ -92,7 +92,7 @@
 				box-sizing: border-box;
 				z-index: 10;
 				border-radius: 50%;
-				border: 2px solid @brand-primary;
+				border: 2px solid var(--brand-primary);
 			}
 		}
 
@@ -121,7 +121,7 @@
 		.steps-icon {
 			.circle-base();
 
-			color: @brand-secondary;
+			color: var(--brand-secondary);
 			z-index: 15;
 			line-height: @circle-size;
 			text-align: center;
@@ -169,27 +169,42 @@
 	}
 
 	.steps-completed {
-		color: @brand-secondary;
+		color: var(--brand-secondary);
 
 		&:before {
-			border-color: @brand-primary;
-			background-color: @brand-primary;
+			border-color: var(--brand-primary);
+			background-color: var(--brand-primary);
 		}
 
 		&:after {
-			background-color: @brand-primary;
+			background-color: var(--brand-primary);
 		}
 
 		a {
-			color: @brand-secondary;
+			color: var(--brand-secondary);
+		}
+
+		i.completed {
+			display: grid;
+
+			&:before {
+				content: "";
+				position: absolute;
+				place-self: center;
+				width: clamp(7px 25% 10px);
+				height: clamp(13px 48% 19px);
+				border: solid currentColor;
+				border-width: 0 2px 2px 0;
+				transform: rotate(45deg) translate(-12%, -12%);
+			}
 		}
 	}
 
 	.steps-ongoing {
-		color: @brand-secondary;
+		color: var(--brand-secondary);
 
 		&:before {
-			border-color: @brand-primary;
+			border-color: var(--brand-primary);
 		}
 
 		&:after {
@@ -203,25 +218,25 @@
 		&:first-child,
 		&:last-child {
 			&:after {
-				background: linear-gradient(to right, @brand-primary 100%);
+				background: linear-gradient(to right, var(--brand-primary) 100%);
 			}
 		}
 
 		a {
-			color: @brand-secondary;
+			color: var(--brand-secondary);
 		}
 	}
 
 	.steps-selected {
-		color: @brand-secondary;
+		color: var(--brand-secondary);
 		font-weight: var(--font-weight-bold);
 
 		.steps-number {
-			color: @brand-secondary;
+			color: var(--brand-secondary);
 		}
 
 		a {
-			color: @brand-secondary;
+			color: var(--brand-secondary);
 		}
 	}
 
@@ -370,7 +385,7 @@
 		}
 
 		.steps-ongoing:after {
-			background: linear-gradient(@brand-primary 50%, @brand-bg-gray 50%);
+			background: linear-gradient(var(--brand-primary) 50%, @brand-bg-gray 50%);
 		}
 	}
 }
diff --git a/src/less/components/toast.less b/src/less/components/toast.less
index 5b8886eb23..54e728683b 100644
--- a/src/less/components/toast.less
+++ b/src/less/components/toast.less
@@ -1,11 +1,13 @@
 @import "../global.less";
 
-@toast-height: 3.5rem;
-@toast-color: @white;
-@toast-text-color: var(--text-color);
-@toast-action-color: @brand-secondary;
-
+// So far the Toast container is set entirely via our script we ship.
+// This means we can introduce breaking changes inside the toast as we please. As long as it is not breaking event listeners for example.
 #toast-container {
+	--toast-height: 3.5rem;
+	--toast-color: var(--white);
+	--toast-text-color: var(--text-color);
+	--toast-action-color: var(--brand-secondary);
+
 	display: block;
 	position: fixed;
 	z-index: var(--toast-z-index, 700);
@@ -25,34 +27,36 @@
 
 		position: relative;
 		display: flex;
-		min-height: @toast-height;
+		min-height: var(--toast-height);
 		padding: 1rem var(--base-padding-lg);
-		background-color: @toast-color;
-		color: @toast-text-color;
+		background-color: var(--toast-color);
+		color: var(--toast-text-color);
 		border-radius: 0.25rem;
 		font-weight: 300;
 		line-height: 1.5;
 		cursor: default;
 		box-shadow: 1px 2px 10px rgb(0 0 0 / 15%);
 		opacity: 1;
-		animation: slideInFromTopRight 0.5s forwards;
+		animation: slide-in-from-top-right 0.5s forwards;
 
-		@keyframes slideInFromTopRight {
+		@keyframes slide-in-from-top-right {
 			from {
 				right: -1000px;
 			}
+
 			to {
 				right: 0;
 			}
 		}
 
 		@media screen and (max-width: @screen-sm-min) {
-			animation: slideInFromTop 0.5s forwards;
+			animation: slide-in-from-top 0.5s forwards;
 
-			@keyframes slideInFromTop {
+			@keyframes slide-in-from-top {
 				from {
 					top: -1000px;
 				}
+
 				to {
 					top: 0;
 				}
@@ -108,8 +112,22 @@
 		.toast-close {
 			all: unset;
 			display: inline-flex;
-			height: 1.75rem;
+			height: fit-content;
 			order: 1;
+			margin-left: 0.5rem;
+			border-radius: 0.175rem;
+
+			&:hover {
+				background-color: @brand-bg-gray;
+
+				& i {
+					color: @dark-brown;
+				}
+			}
+
+			&:focus {
+				outline: 2px solid var(--brand-secondary);
+			}
 
 			i {
 				display: flex;
@@ -118,31 +136,17 @@
 				cursor: pointer;
 				width: 1.5rem;
 				height: 1.5rem;
-				margin-left: 0.5rem;
 				margin-right: calc(0 - var(--base-margin-sm));
 				color: @medium-brown;
-				border: 2px solid transparent;
-				border-radius: 0.175rem;
-
-				&:hover {
-					color: @dark-brown;
-					background-color: @brand-bg-gray;
-				}
-			}
-
-			&:focus {
-				i {
-					border: 2px solid @brand-secondary;
-				}
 			}
 		}
 
 		.toast-action {
-			color: @toast-action-color;
+			color: var(--toast-action-color);
 			font-weight: 500;
 
 			&.btn {
-				background-color: @toast-color;
+				background-color: var(--toast-color);
 				margin-bottom: 0;
 				padding: 0;
 			}
diff --git a/src/less/documentation-payex.less b/src/less/documentation-payex.less
index f9a4d042eb..763992e649 100644
--- a/src/less/documentation-payex.less
+++ b/src/less/documentation-payex.less
@@ -15,7 +15,7 @@
 
 	.dg-front-page-container {
 		.dg-version-indicator span {
-			background-color: var(--brand-bg-1);
+			background-color: var(--bg-primary);
 		}
 
 		header .dg-title-big.my-0 {
diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
index 04d0776856..512505ef06 100644
--- a/src/less/variables-payex.less
+++ b/src/less/variables-payex.less
@@ -33,7 +33,6 @@
 @brand-tertiary: @brand-primary;
 @brand-accent: @brand-secondary;
 @blue-bright: @brand-secondary-light-2;
-@brand-accent-links: @brand-primary;
 @payex-light-blue: #32b2dd;
 @payex-dark-blue: #1e3a6e;
 @brand-complementary-3: #EF5434;
@@ -105,7 +104,6 @@
 /* Other colors */
 @yellow-faded: #fbdd91;
 @green-syntax-highlight: #99cc66;
-@blue-syntax-highlight: #43d0dd;
 @yellow-syntax-highlight: #fff3d5;
 @dark-brown: @brand-secondary;
 @light-brown: @brand-secondary-light-3;
@@ -188,7 +186,8 @@ body {
 	--payex-dark-blue: #1e3a6e;
 
 	/* Background Colors */
-	--brand-bg-1: #e8f3e6;
+	--bg-primary: #e8f3e6;
+	--brand-bg-1: var(--bg-primary);
 	--brand-bg-2: #e8f3e6;
 	--brand-bg-3: #fbedf4;
 	--brand-bg-4: #eaf8fc;
diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less
index daab4e3beb..bc227f55ea 100644
--- a/src/less/variables-swedbankpay.less
+++ b/src/less/variables-swedbankpay.less
@@ -40,7 +40,6 @@
 
 @brand-tertiary: #ee7023;
 @brand-accent: #31a3ae;
-@brand-accent-links: #257886;
 @brand-accent-disabled: #98d0d6;
 
 @brand-orange: @brand-tertiary;
@@ -60,7 +59,6 @@
 /* Text colors */
 @text-default: @brand-secondary;
 @text-muted: @brown-medium;
-@text-link: @brand-accent-links;
 @text-white: @brand-bg-white;
 
 /* Background Colors */
@@ -143,7 +141,6 @@
 /* Other colors */
 @yellow-faded: #fbdd91;
 @green-syntax-highlight: #99cc66;
-@blue-syntax-highlight: #43d0dd;
 @yellow-syntax-highlight: @brand-primary-light-3;
 
 /* ==================================CSS VARIABLES========================================
@@ -182,9 +179,9 @@
 	--text-default: var(--brown-solid);
 	--text-muted: var(--brown-medium);
 	--text-muted-light: var(--brown-soft);
-	--text-link: #257886;
 	--text-white: var(--white, #ffffff);
 	--text-disabled: var(--brown-light, #d4c4bc);
+	--brand-accent-links: var(--brand-turquoise-dark, #257886);
 
 	// Communication colors
 	--brand-yellow: #fdc129;
@@ -192,6 +189,7 @@
 	--brand-orange: #ee7023;
 	--brand-turquoise: #31a3ae;
 	--brand-turquoise-light: #8acdc3;
+	--brand-turquoise-dark: #257886;
 	--brand-pink: #efb7b6;
 
 	// Color pool
@@ -235,6 +233,10 @@
 	// Button colors
 	--secondary-disabled-bg: #e3d1c3;
 
+	// Other colors
+	--blue-syntax-highlight: #43d0dd;
+	--bg-primary: #fbf2ea;
+
 	// Universal utilities
 	--border-radius: 8px;
 
diff --git a/src/scripts/main/action-list/index.test.js b/src/scripts/main/action-list/index.test.js
index 50442bde29..15ac4eca6d 100644
--- a/src/scripts/main/action-list/index.test.js
+++ b/src/scripts/main/action-list/index.test.js
@@ -7,21 +7,26 @@ describe("scripts: action-list", () => {
 	const ActionList = ({ active, id, noToggle }) => (
 		<div className={`action-list${active ? " active" : ""}`} id={id}>
 			{noToggle ? null : (
-				<i className="material-icons action-toggle" aria-hidden="true">
-					more_vert
-				</i>
+				<button
+					id="actionListToggle"
+					aria-label="Action list button"
+					type="button"
+					class="action-toggle"
+					aria-haspopup="true"
+				>
+					<i
+						className="at-dots-vertical snall action-toggle"
+						aria-hidden="true"
+					></i>
+				</button>
 			)}
-			<div className="action-menu">
+			<div className="action-menu" aria-labelledby="actionListToggle">
 				<a href="#">
-					<i className="material-icons" aria-hidden="true">
-						bookmark
-					</i>
+					<i className="at-bookmark-star small" aria-hidden="true"></i>
 					Add bookmark
 				</a>
 				<a href="#">
-					<i className="material-icons" aria-hidden="true">
-						business_center
-					</i>
+					<i className="at-business-suitcase small" aria-hidden="true"></i>
 					Add client
 				</a>
 			</div>
@@ -56,7 +61,7 @@ describe("scripts: action-list", () => {
 				<>
 					<ActionList />
 					<ActionList />
-				</>
+				</>,
 			);
 
 			const renderedActionLists = document.querySelectorAll(".action-list");
@@ -94,7 +99,7 @@ describe("scripts: action-list", () => {
 
 		expect(console.warn).toHaveBeenCalled();
 		expect(console.warn).toHaveBeenCalledWith(
-			"No toggle element exist, add an element with the class .action-toggle"
+			"No toggle element exist, add an element with the class .action-toggle",
 		);
 	});
 
@@ -102,7 +107,9 @@ describe("scripts: action-list", () => {
 		render(<ActionList />);
 
 		const renderedActionList = document.querySelector(".action-list");
-		const toggleBtn = renderedActionList.querySelector("i.material-icons");
+		const toggleBtn = renderedActionList.querySelector(
+			"button#actionListToggle",
+		);
 
 		expect(renderedActionList).toBeDefined();
 		expect(toggleBtn).toBeDefined();
@@ -118,7 +125,9 @@ describe("scripts: action-list", () => {
 		render(<ActionList active />);
 
 		const renderedActionList = document.querySelector(".action-list");
-		const toggleBtn = renderedActionList.querySelector("i.material-icons");
+		const toggleBtn = renderedActionList.querySelector(
+			"button#actionListToggle",
+		);
 
 		expect(renderedActionList).toBeDefined();
 		expect(toggleBtn).toBeDefined();
diff --git a/src/scripts/main/dialog/index.test.js b/src/scripts/main/dialog/index.test.js
index 86f171d57a..21abc539e2 100644
--- a/src/scripts/main/dialog/index.test.js
+++ b/src/scripts/main/dialog/index.test.js
@@ -30,9 +30,7 @@ describe("scripts: dialog", () => {
 						<header className="dialog-header">
 							<h4>Delete item 456?</h4>
 							<button type="button" className="dialog-close">
-								<i className="material-icons" aria-hidden="true">
-									close
-								</i>
+								<i className="swepay-icon-close" aria-hidden="true"></i>
 							</button>
 						</header>
 						<div className="dialog-body">
@@ -91,7 +89,7 @@ describe("scripts: dialog", () => {
 				<>
 					<Dialog />
 					<Dialog />
-				</>
+				</>,
 			);
 
 			const renderedDialog = container.querySelectorAll(".dialog");
@@ -238,7 +236,7 @@ describe("scripts: dialog", () => {
 			dialog.open("qwerty");
 
 			expect(console.warn).toHaveBeenCalledWith(
-				'dialog.open: No dialog with id "qwerty" found.'
+				'dialog.open: No dialog with id "qwerty" found.',
 			);
 
 			expect(document.body.classList).not.toContain("dialog-open");
@@ -265,7 +263,7 @@ describe("scripts: dialog", () => {
 			dialog.close("qwerty");
 
 			expect(console.warn).toHaveBeenCalledWith(
-				'dialog.close: No dialog with id "qwerty" found.'
+				'dialog.close: No dialog with id "qwerty" found.',
 			);
 		});
 	});
diff --git a/src/scripts/main/dropdown/index.test.js b/src/scripts/main/dropdown/index.test.js
index 142d96d486..c77f4a956b 100644
--- a/src/scripts/main/dropdown/index.test.js
+++ b/src/scripts/main/dropdown/index.test.js
@@ -18,21 +18,15 @@ describe("Scripts: Dropdown", () => {
 					aria-label="dropdown button"
 				>
 					Actions
-					<i className="material-icons ml-2" aria-hidden="true">
-						keyboard_arrow_down
-					</i>
+					<i className="swepay-icon-chevron-down ml-2" aria-hidden="true"></i>
 				</button>
 				<div className="dropdown-menu   " aria-labelledby="dropdownToggle">
 					<a id="firstElem" href="#">
-						<i className="material-icons" aria-hidden="true">
-							bookmark
-						</i>
+						<i className="at-bookmark-star" aria-hidden="true"></i>
 						Edit
 					</a>
 					<a href="#">
-						<i className="material-icons" aria-hidden="true">
-							delete_outline
-						</i>
+						<i className="at-trash" aria-hidden="true"></i>
 						Delete
 					</a>
 				</div>
diff --git a/src/scripts/main/nav/index.test.js b/src/scripts/main/nav/index.test.js
index e0ebc5203a..7fa664acf4 100644
--- a/src/scripts/main/nav/index.test.js
+++ b/src/scripts/main/nav/index.test.js
@@ -15,47 +15,37 @@ describe("scripts: nav", () => {
 			<ul>
 				<li>
 					<a href="#">
-						<i className="material-icons" aria-hidden="true">
-							home
-						</i>
+						<i className="at-home small" aria-hidden="true"></i>
 						<span>Home</span>
 					</a>
 				</li>
 				<li>
 					<a href="#">
-						<i className="material-icons" aria-hidden="true">
-							account_balance
-						</i>
+						<i className="at-building-column small" aria-hidden="true"></i>
 						<span>Account</span>
 					</a>
 				</li>
 				<li>
 					<a href="#">
-						<i className="material-icons" aria-hidden="true">
-							fingerprint
-						</i>
+						<i className="at-fingerprint small" aria-hidden="true"></i>
 						<span>Authentication</span>
 					</a>
 				</li>
 				<li>
 					<a href="#">
-						<i className="material-icons" aria-hidden="true">
-							notification_important
-						</i>
+						<i className="at-bell-reminder small" aria-hidden="true"></i>
 						<span>Notifications</span>
 					</a>
 				</li>
 				<li>
 					<a href="#">
-						<i className="material-icons" aria-hidden="true">
-							shopping_cart
-						</i>
+						<i className="at-shop-cart small" aria-hidden="true"></i>
 						<span>Transactions</span>
 					</a>
 				</li>
 				<li>
 					<a href="#">
-						<i className="material-icons">language</i>
+						<i className="at-language-translation small"></i>
 						<span>Language</span>
 					</a>
 				</li>
@@ -64,9 +54,7 @@ describe("scripts: nav", () => {
 						<div className={subopen ? "submenu submenu-open" : "submenu"}>
 							{"\n"}
 							<a href="#">
-								<i className="material-icons" aria-hidden="true">
-									language
-								</i>
+								<i className="at-language-translation small"></i>
 								{"\n"}
 								<span>{name}</span>
 							</a>
@@ -82,9 +70,7 @@ describe("scripts: nav", () => {
 						</div>
 					) : (
 						<a href="#">
-							<i className="material-icons" aria-hidden="true">
-								shopping_cart
-							</i>
+							<i className="at-shop-cart small" aria-hidden="true"></i>
 							<span>Shop</span>
 						</a>
 					)}
@@ -97,9 +83,7 @@ describe("scripts: nav", () => {
 		<nav className="nav">
 			<ul>
 				<li>
-					<i className="material-icons" aria-hidden="true">
-						home
-					</i>
+					<i className="at-home small" aria-hidden="true"></i>
 					<span>Home</span>
 				</li>
 				<li>
@@ -107,9 +91,7 @@ describe("scripts: nav", () => {
 						<div className="submenu">
 							{"\n"}
 							<a href="#">
-								<i className="material-icons" aria-hidden="true">
-									language
-								</i>
+								<i className="at-language-translation small"></i>
 								{"\n"}
 								<span>{name}</span>
 							</a>
@@ -125,9 +107,7 @@ describe("scripts: nav", () => {
 						</div>
 					) : (
 						<a href="#">
-							<i className="material-icons" aria-hidden="true">
-								account_balance
-							</i>
+							<i className="at-building-column small" aria-hidden="true"></i>
 							<span>Account</span>
 						</a>
 					)}
@@ -164,7 +144,7 @@ describe("scripts: nav", () => {
 					<Nav />
 					<Nav />
 				</>,
-				div
+				div,
 			);
 
 			const renderedNavs = screen.getAllByRole("navigation");
@@ -391,7 +371,7 @@ describe("scripts: nav", () => {
 			nav.open("qwerty");
 
 			expect(console.error).toHaveBeenCalledWith(
-				'nav.open: No nav with id "qwerty" found.'
+				'nav.open: No nav with id "qwerty" found.',
 			);
 			expect(renderedNav).not.toHaveClass("nav-open");
 		});
@@ -423,7 +403,7 @@ describe("scripts: nav", () => {
 			nav.close("qwerty");
 
 			expect(console.error).toHaveBeenCalledWith(
-				'nav.close: No nav with id "qwerty" found.'
+				'nav.close: No nav with id "qwerty" found.',
 			);
 			expect(renderedNav).toHaveClass("nav-open");
 		});
diff --git a/src/scripts/main/sheet/index.test.js b/src/scripts/main/sheet/index.test.js
index f85aaf7909..8fc3adbb71 100644
--- a/src/scripts/main/sheet/index.test.js
+++ b/src/scripts/main/sheet/index.test.js
@@ -29,9 +29,7 @@ describe("scripts: sheet", () => {
 			<div className="sheet sheet-open" id="demo-sheet">
 				<section>
 					<a href="#" className="sheet-close" id="sheetClose">
-						<i className="material-icons" aria-hidden="true">
-							close
-						</i>
+						<i className="swepay-icon-close" aria-hidden="true"></i>
 					</a>
 				</section>
 			</div>
@@ -78,7 +76,7 @@ describe("scripts: sheet", () => {
 				<>
 					<Sheet />
 					<Sheet />
-				</>
+				</>,
 			);
 
 			const renderedSheets = document.querySelectorAll(".sheet");
diff --git a/src/scripts/main/sidebar/index.test.js b/src/scripts/main/sidebar/index.test.js
index 724537aa71..63de841c87 100644
--- a/src/scripts/main/sidebar/index.test.js
+++ b/src/scripts/main/sidebar/index.test.js
@@ -33,9 +33,10 @@ describe("scripts: sidebar", () => {
 									<a href="#">Group - Level 3</a>
 									<ul className="tertiary-nav-ul">
 										<a href="#" className="previous-nav">
-											<i className="material-icons" aria-hidden="true">
-												arrow_back_ios
-											</i>
+											<i
+												className="swepay-icon-chevron-left"
+												aria-hidden="true"
+											></i>
 											<span>Back to previous nav</span>
 										</a>
 										<header className="tertiary-nav-header">
@@ -102,7 +103,7 @@ describe("scripts: sidebar", () => {
 
 			expect(sidebar.init(id)).toBeNull();
 			expect(console.warn).toHaveBeenCalledWith(
-				`sidebar.init: No sidebar with id ${id} found`
+				`sidebar.init: No sidebar with id ${id} found`,
 			);
 		});
 
@@ -111,7 +112,7 @@ describe("scripts: sidebar", () => {
 				<>
 					<Sidebar id="sidebar-2" />
 					<Sidebar id="sidebar-3" />
-				</>
+				</>,
 			);
 
 			expect(sidebar.init().length).toEqual(2);
@@ -122,7 +123,7 @@ describe("scripts: sidebar", () => {
 
 			expect(sidebar.init()).toBeNull();
 			expect(console.warn).toHaveBeenCalledWith(
-				"sidebar.init: No sidebars found"
+				"sidebar.init: No sidebars found",
 			);
 		});
 	});
@@ -160,7 +161,7 @@ describe("scripts: sidebar", () => {
 			sidebar.initScrollListener(id, contentId);
 
 			expect(console.warn).toHaveBeenCalledWith(
-				`sidebar.initScrollListener: Cannot find main content with id ${contentId}`
+				`sidebar.initScrollListener: Cannot find main content with id ${contentId}`,
 			);
 		});
 	});
diff --git a/src/scripts/main/tabs/index.test.js b/src/scripts/main/tabs/index.test.js
index 4da51d092a..8f02c7fd8c 100644
--- a/src/scripts/main/tabs/index.test.js
+++ b/src/scripts/main/tabs/index.test.js
@@ -9,9 +9,7 @@ describe("scripts: tabs", () => {
 
 	const NoActiveTab = ({ id, tabsOpen }) => (
 		<div className={`tabs ${tabsOpen ? "tabs-open" : null}`} id={id}>
-			<i className="material-icons" aria-hidden="true">
-				keyboard_arrow_right
-			</i>
+			<i className="swepay-icon-chevron-right" aria-hidden="true"></i>
 			<ul>
 				{items.map((name, i) => (
 					<li key={`tab-item-${name}-${i}`}>
@@ -52,7 +50,7 @@ describe("scripts: tabs", () => {
 				<>
 					<NoActiveTab />
 					<NoActiveTab />
-				</>
+				</>,
 			);
 
 			const renderedTabs = document.querySelectorAll(".tabs");
diff --git a/src/scripts/main/toast/index.js b/src/scripts/main/toast/index.js
index a589028e7e..f2b552a9c2 100644
--- a/src/scripts/main/toast/index.js
+++ b/src/scripts/main/toast/index.js
@@ -68,17 +68,16 @@ class Toast {
 			const button = document.createElement("button");
 			const icon = document.createElement("i");
 
-			if (iconType === "close") {
+			if (iconType === "swepay-icon-close") {
 				button.setAttribute("class", "toast-close");
 				button.setAttribute("id", "toast-close-button");
 				button.setAttribute("aria-label", "Close button");
 				button.appendChild(icon);
-			} else {
-				icon.setAttribute("aria-hidden", "true");
 			}
 
-			icon.classList.add("material-icons");
-			icon.innerHTML = iconType;
+			icon.setAttribute("aria-hidden", "true");
+
+			icon.classList.add(iconType);
 
 			if (dismiss) {
 				button.addEventListener("click", () => {
@@ -86,29 +85,29 @@ class Toast {
 				});
 			}
 
-			return iconType === "close" ? button : icon;
+			return iconType === "swepay-icon-close" ? button : icon;
 		};
 
 		// Set toast type
 		switch (this.options.type) {
 			case "success":
 				toast.classList.add("toast-success");
-				toast.appendChild(_createIcon("check_circle"));
+				toast.appendChild(_createIcon("swepay-icon-check-circle-filled"));
 
 				break;
 			case "neutral":
 				toast.classList.add("toast-neutral");
-				toast.appendChild(_createIcon("info"));
+				toast.appendChild(_createIcon("swepay-icon-info-circle-filled"));
 
 				break;
 			case "warning":
 				toast.classList.add("toast-warning");
-				toast.appendChild(_createIcon("warning"));
+				toast.appendChild(_createIcon("swepay-icon-warning-triangle-filled"));
 
 				break;
 			case "danger":
 				toast.classList.add("toast-danger");
-				toast.appendChild(_createIcon("error"));
+				toast.appendChild(_createIcon("swepay-icon-error-triangle-filled"));
 
 				break;
 			default:
@@ -116,7 +115,7 @@ class Toast {
 		}
 
 		if (this.options.dismissable) {
-			toast.appendChild(_createIcon("close", true));
+			toast.appendChild(_createIcon("swepay-icon-close", true));
 		}
 
 		// Set content
diff --git a/src/scripts/main/toast/index.test.js b/src/scripts/main/toast/index.test.js
index b9f9e2f74a..24de8139b2 100644
--- a/src/scripts/main/toast/index.test.js
+++ b/src/scripts/main/toast/index.test.js
@@ -54,7 +54,9 @@ describe("scripts: toast", () => {
 		toast({ html: "Test" });
 
 		const renderedToast = document.querySelector(".toast");
-		const closeIcon = renderedToast.querySelector("i.material-icons");
+		const closeIcon = renderedToast.querySelector(
+			"button[aria-label='Close button'] i.swepay-icon-close",
+		);
 
 		expect(renderedToast).toBeDefined();
 		expect(closeIcon).toBeDefined();
@@ -74,7 +76,9 @@ describe("scripts: toast", () => {
 		});
 
 		const renderedToast = document.querySelector(".toast");
-		const closeIcon = renderedToast.querySelector("i.material-icons");
+		const closeIcon = renderedToast.querySelector(
+			"button[aria-label='Close button'] i.swepay-icon-close",
+		);
 
 		expect(renderedToast).toBeDefined();
 		expect(closeIcon).toBeNull();
@@ -87,11 +91,13 @@ describe("scripts: toast", () => {
 		});
 
 		const renderedToast = document.querySelector(".toast.toast-success");
-		const icon = renderedToast.querySelector("i.material-icons");
+		const icon = renderedToast.querySelector(
+			"i.swepay-icon-check-circle-filled",
+		);
 
 		expect(renderedToast).toBeDefined();
 		expect(icon).toBeDefined();
-		expect(icon.innerHTML).toEqual("check_circle");
+		expect(icon.innerHTML).toEqual("");
 	});
 
 	it("creates correct toast when type is set to neutral", () => {
@@ -101,11 +107,13 @@ describe("scripts: toast", () => {
 		});
 
 		const renderedToast = document.querySelector(".toast.toast-neutral");
-		const icon = renderedToast.querySelector("i.material-icons");
+		const icon = renderedToast.querySelector(
+			"i.swepay-icon-info-circle-filled",
+		);
 
 		expect(renderedToast).toBeDefined();
 		expect(icon).toBeDefined();
-		expect(icon.innerHTML).toEqual("info");
+		expect(icon.innerHTML).toEqual("");
 	});
 
 	it("creates correct toast when type is set to warning", () => {
@@ -115,11 +123,13 @@ describe("scripts: toast", () => {
 		});
 
 		const renderedToast = document.querySelector(".toast.toast-warning");
-		const icon = renderedToast.querySelector("i.material-icons");
+		const icon = renderedToast.querySelector(
+			"i.swepay-icon-warning-triangle-filled",
+		);
 
 		expect(renderedToast).toBeDefined();
 		expect(icon).toBeDefined();
-		expect(icon.innerHTML).toEqual("warning");
+		expect(icon.innerHTML).toEqual("");
 	});
 
 	it("creates correct toast when type is set to danger", () => {
@@ -129,11 +139,13 @@ describe("scripts: toast", () => {
 		});
 
 		const renderedToast = document.querySelector(".toast.toast-danger");
-		const icon = renderedToast.querySelector("i.material-icons");
+		const icon = renderedToast.querySelector(
+			"i.swepay-icon-error-triangle-filled",
+		);
 
 		expect(renderedToast).toBeDefined();
 		expect(icon).toBeDefined();
-		expect(icon.innerHTML).toEqual("error");
+		expect(icon.innerHTML).toEqual("");
 	});
 
 	it("does not add a custom icon when type is not set", () => {
@@ -144,11 +156,13 @@ describe("scripts: toast", () => {
 		});
 
 		const renderedToast = document.querySelector(".toast.toast-neutral");
-		const icon = renderedToast.querySelector("i.material-icons");
+		const icon = renderedToast.querySelector(
+			"i.swepay-icon-info-circle-filled",
+		);
 
 		expect(renderedToast).toBeDefined();
 		expect(icon).toBeDefined();
-		expect(icon.innerHTML).toEqual("info");
+		expect(icon.innerHTML).toEqual("");
 	});
 
 	it("does not disappear on mouseover", () => {
diff --git a/src/scripts/main/toast/toast.e2e.spec.js b/src/scripts/main/toast/toast.e2e.spec.js
index 914ac546e2..e231bd6337 100644
--- a/src/scripts/main/toast/toast.e2e.spec.js
+++ b/src/scripts/main/toast/toast.e2e.spec.js
@@ -10,14 +10,14 @@ test("toast displays & closes by mouse", async ({ page }) => {
 	await page.getByRole("button", { name: "Show Neutral toast" }).click();
 	await expect(
 		page.getByText(
-			"infoclose Neutral title: Input informative alert information here, provide link "
-		)
+			"Neutral title: Input informative alert information here, provide link ",
+		),
 	).toBeVisible();
 	await page.locator("#toast-close-button").click();
 	await expect(
 		page.getByText(
-			"infoclose Neutral title: Input informative alert information here, provide link "
-		)
+			"Neutral title: Input informative alert information here, provide link ",
+		),
 	).not.toBeVisible();
 });
 
@@ -26,14 +26,14 @@ test("toast displays & closes by keyboard navigation", async ({ page }) => {
 	await page.getByRole("button", { name: "Show Neutral toast" }).press("Enter");
 	await expect(
 		page.getByText(
-			"infoclose Neutral title: Input informative alert information here, provide link "
-		)
+			"Neutral title: Input informative alert information here, provide link ",
+		),
 	).toBeVisible();
 	await page.locator("#toast-close-button").press("Enter");
 	await expect(
 		page.getByText(
-			"infoclose Neutral title: Input informative alert information here, provide link "
-		)
+			"Neutral title: Input informative alert information here, provide link ",
+		),
 	).not.toBeVisible();
 });
 
@@ -45,14 +45,14 @@ test("toast does not closes when mouse click outside its zone nor when hit escap
 	await page.keyboard.press("Escape");
 	await expect(
 		page.getByText(
-			"infoclose Neutral title: Input informative alert information here, provide link "
-		)
+			"Neutral title: Input informative alert information here, provide link ",
+		),
 	).toBeVisible();
 	await page.getByRole("heading", { name: "Toast", exact: true }).click();
 	await expect(
 		page.getByText(
-			"infoclose Neutral title: Input informative alert information here, provide link "
-		)
+			"Neutral title: Input informative alert information here, provide link ",
+		),
 	).toBeVisible();
 });
 
@@ -62,15 +62,15 @@ test("toast closes by itself if wait the appropriate time", async ({
 	await page.getByRole("button", { name: "Show Neutral toast" }).press("Enter");
 	await expect(
 		page.getByText(
-			"infoclose Neutral title: Input informative alert information here, provide link "
-		)
+			"Neutral title: Input informative alert information here, provide link ",
+		),
 	).toBeVisible({
 		timeout: 2000,
 	});
 	await expect(
 		page.getByText(
-			"infoclose Neutral title: Input informative alert information here, provide link "
-		)
+			"Neutral title: Input informative alert information here, provide link ",
+		),
 	).not.toBeVisible({
 		timeout: 10000,
 	});
diff --git a/src/scripts/main/topbar/NavMenu.test.js b/src/scripts/main/topbar/NavMenu.test.js
index dbab1e7fc9..62ddebc344 100644
--- a/src/scripts/main/topbar/NavMenu.test.js
+++ b/src/scripts/main/topbar/NavMenu.test.js
@@ -17,18 +17,17 @@ describe("scripts: topbar - NavMenu", () => {
 				data-toggle-nav="#topbar-nav"
 			>
 				{noBtnIcon ? null : (
-					<i className="material-icons topbar-btn-icon" aria-hidden="true">
-						menu
-					</i>
+					<i
+						className="swepay-icon-menu topbar-btn-icon"
+						aria-hidden="true"
+					></i>
 				)}
 				<span className="topbar-btn-text">Menu</span>
 			</button>
 			<nav className={`topbar-nav${navOpen ? " topbar-nav-open" : ""}`}>
 				{noCloseIcon ? null : (
 					<button type="button" className="topbar-close">
-						<i className="material-icons" aria-hidden="true">
-							close
-						</i>
+						<i className="swepay-icon-close" aria-hidden="true"></i>
 					</button>
 				)}
 				<div className="topbar-link-container">
diff --git a/src/scripts/main/topbar/index.test.js b/src/scripts/main/topbar/index.test.js
index cdece07565..d28d22e5af 100644
--- a/src/scripts/main/topbar/index.test.js
+++ b/src/scripts/main/topbar/index.test.js
@@ -28,15 +28,14 @@ describe("scripts: topbar", () => {
 				className="topbar-btn"
 				data-toggle-nav="#topbar-nav"
 			>
-				<i className="material-icons topbar-btn-icon" aria-hidden="true">
-					menu
-				</i>
+				<i className="swepay-icon-menu topbar-btn-icon" aria-hidden="true"></i>
 				<span className="topbar-btn-text">Menu</span>
 			</button>
 			<nav className={`topbar-nav${navOpen ? " topbar-nav-open" : ""}`}>
-				<i className="material-icons close-topbar-nav" aria-hidden="true">
-					close
-				</i>
+				<i
+					className="swepay-icon-close close-topbar-nav"
+					aria-hidden="true"
+				></i>
 				<div className="topbar-link-container">
 					<a href="#">Link 1</a>
 					<a href="#">Link 2</a>
@@ -84,7 +83,7 @@ describe("scripts: topbar", () => {
 				<>
 					<Topbar />
 					<Topbar />
-				</>
+				</>,
 			);
 
 			const renderedTopbars = document.querySelectorAll(".topbar");