diff --git a/docs/components.json b/docs/components.json
index 0c62a262..b75434a4 100644
--- a/docs/components.json
+++ b/docs/components.json
@@ -2094,6 +2094,42 @@
       }
     }
   },
+  "components/icons/icon-arrow-left.jsx": {
+    "description": "",
+    "displayName": "IconArrowLeft",
+    "methods": [],
+    "props": {
+      "color": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "colors.icons",
+          "computed": true
+        }
+      }
+    }
+  },
+  "components/icons/icon-arrow-right.jsx": {
+    "description": "",
+    "displayName": "IconArrowRight",
+    "methods": [],
+    "props": {
+      "color": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "colors.icons",
+          "computed": true
+        }
+      }
+    }
+  },
   "components/icons/icon-block.jsx": {
     "description": "",
     "displayName": "IconBlock",
diff --git a/src/icons/icon-arrow-left.jsx b/src/icons/icon-arrow-left.jsx
new file mode 100644
index 00000000..00f94d32
--- /dev/null
+++ b/src/icons/icon-arrow-left.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import colors from '../settings/colors';
+
+const IconArrowLeft = ({ color, ...custom }) => (
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" {...custom}>
+    <path d="M3.03577532,12.1044134 C3.06549272,12.2100933 3.11372808,12.3115539 3.1804814,12.4035368 L8.19869193,19.300379 C8.38342877,19.5561685 8.67237614,19.6888 8.96700771,19.6888 C9.1593235,19.6888 9.35542877,19.6319579 9.52216561,19.5088 C9.94563929,19.2056421 10.0403761,18.6088 9.73058666,18.1824842 L5.80734711,12.7919579 L19.2232182,12.7919579 C19.747113,12.7919579 20.1705866,12.3656421 20.1705866,11.8445895 C20.1705866,11.3235368 19.747113,10.8972211 19.2232182,10.8972211 L5.8073471,10.8972211 L9.73058666,5.50669473 C10.0403761,5.08037894 9.94563929,4.49301052 9.52216561,4.18037895 C9.09774456,3.87722105 8.50563929,3.96248421 8.19869193,4.3888 L3.1804814,11.2856421 C3.11372808,11.377625 3.06549272,11.4790856 3.03577532,11.5847655 C3.03426677,11.5900469 3.03280301,11.5953467 3.0313845,11.6006646 C2.98952823,11.7603043 2.98952823,11.9288747 3.03144617,12.0884907 C3.03280301,12.0938323 3.03426677,12.0991321 3.03577532,12.1044134 Z" fill={color} />
+  </svg>
+);
+
+IconArrowLeft.propTypes = {
+  color: PropTypes.string
+};
+
+IconArrowLeft.defaultProps = {
+  color: colors.icons
+};
+
+IconArrowLeft.displayName = 'IconArrowLeft';
+
+export default IconArrowLeft;
diff --git a/src/icons/icon-arrow-right.jsx b/src/icons/icon-arrow-right.jsx
new file mode 100644
index 00000000..e6deaaff
--- /dev/null
+++ b/src/icons/icon-arrow-right.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import colors from '../settings/colors';
+
+const IconArrowRight = ({ color, ...custom }) => (
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" transform="rotate(180)" {...custom} >
+    <path d="M3.03577532,12.1044134 C3.06549272,12.2100933 3.11372808,12.3115539 3.1804814,12.4035368 L8.19869193,19.300379 C8.38342877,19.5561685 8.67237614,19.6888 8.96700771,19.6888 C9.1593235,19.6888 9.35542877,19.6319579 9.52216561,19.5088 C9.94563929,19.2056421 10.0403761,18.6088 9.73058666,18.1824842 L5.80734711,12.7919579 L19.2232182,12.7919579 C19.747113,12.7919579 20.1705866,12.3656421 20.1705866,11.8445895 C20.1705866,11.3235368 19.747113,10.8972211 19.2232182,10.8972211 L5.8073471,10.8972211 L9.73058666,5.50669473 C10.0403761,5.08037894 9.94563929,4.49301052 9.52216561,4.18037895 C9.09774456,3.87722105 8.50563929,3.96248421 8.19869193,4.3888 L3.1804814,11.2856421 C3.11372808,11.377625 3.06549272,11.4790856 3.03577532,11.5847655 C3.03426677,11.5900469 3.03280301,11.5953467 3.0313845,11.6006646 C2.98952823,11.7603043 2.98952823,11.9288747 3.03144617,12.0884907 C3.03280301,12.0938323 3.03426677,12.0991321 3.03577532,12.1044134 Z" fill={color} />
+  </svg>
+);
+
+IconArrowRight.propTypes = {
+  color: PropTypes.string
+};
+
+IconArrowRight.defaultProps = {
+  color: colors.icons
+};
+
+IconArrowRight.displayName = 'IconArrowRight';
+
+export default IconArrowRight;
diff --git a/src/icons/index.js b/src/icons/index.js
index fa8a3453..9afe158f 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -68,3 +68,5 @@ export IconBroadcast from './icon-broadcast';
 export IconCart from './icon-cart';
 export IconCoins from './icon-coins';
 export IconShop from './icon-shop';
+export IconArrowLeft from './icon-arrow-left';
+export IconArrowRight from './icon-arrow-right';