diff --git a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
index eb5b9cf8..de09d9b0 100644
--- a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
+++ b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
@@ -12,26 +12,25 @@ export default {
   },
 };
 
-export const Icons = (): React.ReactElement => {
-  const Wrapper = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-  `;
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
 
-  const IconBox = styled.div`
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: space-evenly;
-
-    padding: 5px;
-    width: 140px;
-    height: 140px;
-    border: 1px solid ${({ theme }) => theme.colors.background};
-    font-family: 'Averta', sans-serif;
-    font-size: 14px;
-  `;
+const IconBox = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-evenly;
+  padding: 5px;
+  width: 140px;
+  height: 140px;
+  border: 1px solid ${({ theme }) => theme.colors.background};
+  font-family: ${({ theme }) => theme.fonts.fontFamily};
+  font-size: 14px;
+`;
 
+export const Icons = (): React.ReactElement => {
   const icons: IconTypes[] = [
     'arrowSort',
     'connectedRinkeby',
@@ -63,3 +62,23 @@ export const Icons = (): React.ReactElement => {
     </Wrapper>
   );
 };
+
+export const IconsWhite = (): React.ReactElement => {
+  const GreenBoxColor = styled(IconBox)`
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: white;
+  `;
+
+  const iconsWhite: IconTypes[] = ['arrowSentWhite', 'arrowReceivedWhite'];
+
+  return (
+    <Wrapper>
+      {iconsWhite.map((iconsWhite) => (
+        <GreenBoxColor key="index">
+          <FixedIcon type={iconsWhite} />
+          {iconsWhite}
+        </GreenBoxColor>
+      ))}
+    </Wrapper>
+  );
+};
diff --git a/src/dataDisplay/FixedIcon/images/arrowReceivedWhite.tsx b/src/dataDisplay/FixedIcon/images/arrowReceivedWhite.tsx
new file mode 100644
index 00000000..7d2fcef0
--- /dev/null
+++ b/src/dataDisplay/FixedIcon/images/arrowReceivedWhite.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const icon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 10 10">
+    <path
+      fill="#FFFFFF"
+      fillRule="evenodd"
+      d="M3.431 7.99h2.6c.554 0 1.004.45 1.004 1.005C7.035 9.55 6.585 10 6.03 10H1.005c-.277 0-.529-.112-.71-.294C.111 9.524 0 9.272 0 8.995V3.97c0-.555.45-1.005 1.005-1.005.555 0 1.005.45 1.005 1.005v2.599L8.284.294c.393-.392 1.03-.392 1.422 0 .392.393.392 1.03 0 1.422L3.43 7.99z"
+    />
+  </svg>
+);
+
+export default icon;
diff --git a/src/dataDisplay/FixedIcon/images/arrowSentWhite.tsx b/src/dataDisplay/FixedIcon/images/arrowSentWhite.tsx
new file mode 100644
index 00000000..696af3ab
--- /dev/null
+++ b/src/dataDisplay/FixedIcon/images/arrowSentWhite.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const icon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 10 10">
+    <path
+      fill="#FFFFFF"
+      fillRule="evenodd"
+      d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z"
+    />
+  </svg>
+);
+
+export default icon;
diff --git a/src/dataDisplay/FixedIcon/index.tsx b/src/dataDisplay/FixedIcon/index.tsx
index d523cfaf..57050982 100644
--- a/src/dataDisplay/FixedIcon/index.tsx
+++ b/src/dataDisplay/FixedIcon/index.tsx
@@ -6,7 +6,9 @@ import connectedWallet from './images/connectedWallet';
 import bullit from './images/bullit';
 import dropdownArrowSmall from './images/dropdownArrowSmall';
 import arrowReceived from './images/arrowReceived';
+import arrowReceivedWhite from './images/arrowReceivedWhite';
 import arrowSent from './images/arrowSent';
+import arrowSentWhite from './images/arrowSentWhite';
 import threeDots from './images/threeDots';
 import options from './images/options';
 import plus from './images/plus';
@@ -25,7 +27,9 @@ const icons = {
   bullit,
   dropdownArrowSmall,
   arrowReceived,
+  arrowReceivedWhite,
   arrowSent,
+  arrowSentWhite,
   threeDots,
   options,
   plus,
diff --git a/src/theme.ts b/src/theme.ts
index 42ad44e0..ac1ecc5b 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -70,7 +70,7 @@ const theme = {
       xs: '10px',
       sm: '16px',
       md: '32px',
-      lg: '60px',
+      lg: '40px',
     },
   },
   loader: {