diff --git a/src/components/FieldDateRangeInput/DateRangeInput.css b/src/components/FieldDateRangeInput/DateRangeInput.css
index d9972619..5c72a104 100644
--- a/src/components/FieldDateRangeInput/DateRangeInput.css
+++ b/src/components/FieldDateRangeInput/DateRangeInput.css
@@ -263,8 +263,7 @@
   }
 }
 
-.rootNextMonthIcon,
-.rootPreviousMonthIcon {
+.arrowIcon {
   stroke: var(--matterColorLight);
   fill: var(--matterColorLight);
 }
diff --git a/src/components/FieldDateRangeInput/DateRangeInput.js b/src/components/FieldDateRangeInput/DateRangeInput.js
index c3541e32..7d82f3a4 100644
--- a/src/components/FieldDateRangeInput/DateRangeInput.js
+++ b/src/components/FieldDateRangeInput/DateRangeInput.js
@@ -21,8 +21,7 @@ import {
   pickerEndDateToApiDate,
 } from './DateRangeInput.helpers';
 
-import NextMonthIcon from './NextMonthIcon';
-import PreviousMonthIcon from './PreviousMonthIcon';
+import { IconArrowHead } from '../../components';
 import css from './DateRangeInput.css';
 
 export const HORIZONTAL_ORIENTATION = 'horizontal';
@@ -37,6 +36,15 @@ export const ANCHOR_LEFT = 'left';
 // value and moves on to another input within this component.
 const BLUR_TIMEOUT = 100;
 
+// IconArrowHead component might not be defined if exposed directly to the file.
+// This component is called before IconArrowHead component in components/index.js
+const PrevIcon = props => (
+  <IconArrowHead {...props} direction="left" rootClassName={css.arrowIcon} />
+);
+const NextIcon = props => (
+  <IconArrowHead {...props} direction="right" rootClassName={css.arrowIcon} />
+);
+
 // Possible configuration options of React-dates
 const defaultProps = {
   initialDates: null, // Possible initial date passed for the component
@@ -79,8 +87,8 @@ const defaultProps = {
   hideKeyboardShortcutsPanel: true,
 
   // navigation related props
-  navPrev: <PreviousMonthIcon />,
-  navNext: <NextMonthIcon />,
+  navPrev: <PrevIcon />,
+  navNext: <NextIcon />,
   onPrevMonthClick() {},
   onNextMonthClick() {},
   transitionDuration: 200, // milliseconds between next month changes etc.
diff --git a/src/components/FieldDateRangeInput/NextMonthIcon.js b/src/components/FieldDateRangeInput/NextMonthIcon.js
deleted file mode 100644
index 87df1076..00000000
--- a/src/components/FieldDateRangeInput/NextMonthIcon.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import css from './DateRangeInput.css';
-
-const NextMonthIcon = props => {
-  const { className, rootClassName } = props;
-  const classes = classNames(rootClassName || css.rootNextMonthIcon, className);
-
-  return (
-    <svg
-      className={classes}
-      width="9"
-      height="13"
-      viewBox="0 0 9 13"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M7.472 6.97c.26-.26.26-.68 0-.94L2.14.694c-.263-.26-.684-.26-.944 0-.26.26-.26.683 0 .943L6.056 6.5l-4.86 4.862c-.26.26-.26.683 0 .943.26.26.68.26.943 0L7.47 6.97z"
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};
-
-const { string } = PropTypes;
-
-NextMonthIcon.defaultProps = {
-  className: null,
-  rootClassName: null,
-};
-
-NextMonthIcon.propTypes = {
-  className: string,
-  rootClassName: string,
-};
-
-export default NextMonthIcon;
diff --git a/src/components/FieldDateRangeInput/PreviousMonthIcon.js b/src/components/FieldDateRangeInput/PreviousMonthIcon.js
deleted file mode 100644
index f3d79399..00000000
--- a/src/components/FieldDateRangeInput/PreviousMonthIcon.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import css from './DateRangeInput.css';
-
-const PreviousMonthIcon = props => {
-  const { className, rootClassName } = props;
-  const classes = classNames(rootClassName || css.rootPreviousMonthIcon, className);
-
-  return (
-    <svg
-      className={classes}
-      width="9"
-      height="13"
-      viewBox="0 0 9 13"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1.195 6.03c-.26.26-.26.68 0 .94l5.333 5.335c.262.26.683.26.943 0 .262-.26.262-.683 0-.943L2.61 6.5l4.86-4.862c.262-.26.262-.683 0-.943-.26-.26-.68-.26-.942 0L1.195 6.03z"
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};
-
-const { string } = PropTypes;
-
-PreviousMonthIcon.defaultProps = {
-  className: null,
-  rootClassName: null,
-};
-
-PreviousMonthIcon.propTypes = {
-  className: string,
-  rootClassName: string,
-};
-
-export default PreviousMonthIcon;