diff --git a/changelogs/react-button-refactor.txt b/changelogs/react-button-refactor.txt
new file mode 100644
index 0000000000..559c09a90a
--- /dev/null
+++ b/changelogs/react-button-refactor.txt
@@ -0,0 +1,4 @@
+___DESCRIPTION___
+change
+minor
+- (React) Refactored ButtonWithIcon to replace ButtonSearch component #81
diff --git a/react/src/components/atoms/buttons/ButtonSearch/ButtonSearch.md b/react/src/components/atoms/buttons/ButtonSearch/ButtonSearch.md
deleted file mode 100644
index 650e74ff26..0000000000
--- a/react/src/components/atoms/buttons/ButtonSearch/ButtonSearch.md
+++ /dev/null
@@ -1,18 +0,0 @@
-### Description
-A button used for a keyword search.
-
-### Changes for React
-* `classes` array: To improve reusability of this component, classes can now be added to the button by adding them to the new `classes` array.
-* `ariaLabel` string: To improve accessablitily of this component, an aria-label can be added if the displayed text is not helpful to assistive technologies.
-
-### Variables
-~~~
-onClick:
-  type: function / optional
-text:
-  type: string / optional
-ariaLabel:
-  type: string / optional
-classes:
-  type: array (string) / optional
-~~~
diff --git a/react/src/components/atoms/buttons/ButtonSearch/ButtonSearch.stories.js b/react/src/components/atoms/buttons/ButtonSearch/ButtonSearch.stories.js
deleted file mode 100644
index 60cc725769..0000000000
--- a/react/src/components/atoms/buttons/ButtonSearch/ButtonSearch.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-import { text, withKnobs } from '@storybook/addon-knobs/react';
-import { action } from '@storybook/addon-actions';
-
-import ButtonSearch from '.';
-import ButtonSearchReadme from './ButtonSearch.md';
-
-storiesOf('atoms/buttons', module)
-  .addDecorator(withKnobs)
-  .add(
-    'ButtonSearch',
-    withInfo(`<div>${ButtonSearchReadme}</div>`)(() => {
-      const props = {
-        text: text('ButtonSearch.text', 'Search'),
-        ariaLabel: text('ButtonSearch.ariaLabel', 'Search'),
-        onClick: action('ButtonSearch.onClick')
-      };
-
-      return(<ButtonSearch {...props} />);
-    })
-  );
diff --git a/react/src/components/atoms/buttons/ButtonSearch/index.js b/react/src/components/atoms/buttons/ButtonSearch/index.js
deleted file mode 100644
index 899a81d2c7..0000000000
--- a/react/src/components/atoms/buttons/ButtonSearch/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SvgSearch from '../../icons/SvgSearch';
-
-const ButtonSearch = (buttonSearch) => {
-  const onButtonClick = Object.prototype.hasOwnProperty.call(buttonSearch, 'onClick');
-  return((
-    <button
-      type="submit"
-      aria-label={buttonSearch.ariaLabel}
-      className={buttonSearch.classes.join(' ')}
-      onClick={(e) => { if (onButtonClick) buttonSearch.onClick(e); }}
-    >
-      <span>{buttonSearch.text}</span>
-      <SvgSearch />
-    </button>
-  ));
-};
-
-ButtonSearch.propTypes = {
-  /** Custom click handler function. */
-  onClick: PropTypes.func,
-  /** The text to display in the button */
-  text: PropTypes.string,
-  /** The aria-label property is used to provide the label to any assistive
-   * technologies. This is useful if the text value is not descriptive of the
-   * button's functionality. */
-  ariaLabel: PropTypes.string.isRequired,
-  /** Optional classes to apply to the button in place of the default */
-  classes: PropTypes.arrayOf(PropTypes.string)
-};
-
-ButtonSearch.defaultProps = {
-  text: 'Search',
-  classes: ['ma__button-search']
-};
-
-export default ButtonSearch;
diff --git a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.knob.options.js b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.knob.options.js
index c375504caf..c6711fa337 100644
--- a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.knob.options.js
+++ b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.knob.options.js
@@ -6,5 +6,10 @@ export default {
   color: {
     '': 'grey (default)',
     green: 'green'
+  },
+  type: {
+    button: 'button',
+    submit: 'submit',
+    reset: 'reset'
   }
 };
diff --git a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.md b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.md
index c06169dafe..a32983cf1d 100644
--- a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.md
+++ b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.md
@@ -1,2 +1,9 @@
 ### Description
 A button that displays with an icon component.
+e.g. ButtonSearch, which is used for submitting a keyword search.
+e.g. Button with chevron, which is used for toggling between the expanded state and the collapsed state.
+
+### Changes for React
+* Button with Icon is a common button pattern that is currently not available in Patternlab. It's an extension on top of the [Button Search atom](https://mayflower.digital.mass.gov/?p=atoms-button-search).
+* `classes` array: To improve reusability of this component, classes can now be added to the button by adding them to the new `classes` array.
+* `ariaLabel` string: To improve accessibility of this component, an aria-label can be added if the displayed text is not helpful to assistive technologies.
diff --git a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js
index 3fd00b63f3..6902eb448f 100644
--- a/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js
+++ b/react/src/components/atoms/buttons/ButtonWithIcon/ButtonWithIcon.stories.js
@@ -25,9 +25,10 @@ storiesOf('atoms/buttons', module)
       const props = {
         onClick: action('ButtonWithIcon clicked'),
         text: text('ButtonWithIcon.text', 'Button With Icon'),
+        type: select('ButtonWithIcon.type', buttonWithIconOptions.type, 'submit'),
         classes: array('ButtonWithIcon.classes', []),
         icon: select('ButtonWithIcon.icon', Object.keys(icons), 'chevron'),
-        iconSize: select('ButtonWithIcon.iconSize', buttonWithIconOptions.size),
+        iconSize: select('ButtonWithIcon.iconSize', buttonWithIconOptions.size, ''),
         iconColor: select('ButtonWithIcon.iconColor', buttonWithIconOptions.color),
         canExpand: boolean('ButtonWithIcon.canExpand', true),
         expanded: boolean('ButtonWithIcon.expanded', true),
@@ -37,6 +38,21 @@ storiesOf('atoms/buttons', module)
       // Set the icon prop to the actual element based on knob selection.
       props.icon = icons[props.icon];
 
+      return(
+        <ButtonWithIcon {...props} />
+      );
+    })
+  )
+  .add(
+    'ButtonSearch',
+    withInfo(`<div>${buttonWithIconReadme}</div>`)(() => {
+      const props = {
+        onClick: action('ButtonWithIcon clicked')
+      };
+
+      // Set the icon prop to the actual element based on knob selection.
+      props.icon = icons[props.icon];
+
       return(
         <ButtonWithIcon {...props} />
       );
diff --git a/react/src/components/atoms/buttons/ButtonWithIcon/index.js b/react/src/components/atoms/buttons/ButtonWithIcon/index.js
index c885dea3ff..d70ff4849a 100644
--- a/react/src/components/atoms/buttons/ButtonWithIcon/index.js
+++ b/react/src/components/atoms/buttons/ButtonWithIcon/index.js
@@ -21,28 +21,36 @@ class ButtonWithIcon extends React.Component {
     }
   }
   render() {
-    let classNames = this.props.classes.join(' ');
-    if (this.props.canExpand) {
+    const {
+      classes, canExpand, expanded, capitalized, iconSize, iconColor, icon, type
+    } = this.props;
+    let classNames = classes.join(' ');
+    if (canExpand) {
       classNames += ' ma__button-icon--expandable';
-      classNames += this.props.expanded ? ' ma__button-icon--expanded' : '';
+      if (expanded) {
+        classNames += ' ma__button-icon--expanded';
+      }
     }
-    if (this.props.capitalized) {
+    if (capitalized) {
       classNames += ' ma__button-capitalized';
     }
-    if (this.props.iconSize === 'small') {
+    if (iconSize === 'small' || icon.type.name === 'SvgChevron') {
       classNames += ' ma__icon-small';
     }
-    if (this.props.iconColor === 'green') {
+    if (iconColor === 'green') {
       classNames += ' ma__icon-green';
     }
+    if (icon.type.name === 'SvgSearch') {
+      classNames += ' ma__button-search';
+    }
     const buttonProps = {
-      type: 'submit',
+      type,
       className: `ma__button-icon ${classNames}`,
       onClick: this.handleClick,
       tabIndex: 0
     };
     return(
-      <button {...buttonProps} ref={this.setButtonRef}>
+      <button {...buttonProps} aria-label={this.props.ariaLabel} ref={this.setButtonRef}>
         <span>{this.props.text}</span>
         {this.props.icon}
       </button>
@@ -57,6 +65,8 @@ ButtonWithIcon.propTypes = {
   setButtonRef: PropTypes.func,
   // Button text.
   text: PropTypes.string,
+  /** HTML <button> 'type' attribute  */
+  type: PropTypes.oneOf(['submit', 'reset', 'button', '']),
   // Button classes.
   classes: PropTypes.arrayOf(PropTypes.string),
   // Icon to display within the button.
@@ -67,18 +77,26 @@ ButtonWithIcon.propTypes = {
   expanded: PropTypes.bool,
   // Adds capitalized class to button if true.
   capitalized: PropTypes.bool,
+  // Defines the size, default size fits the most square icons and "small" setting is specific for the chevron icon.
   iconSize: PropTypes.oneOf(['', 'small']),
-  iconColor: PropTypes.oneOf(['', 'green'])
+  // Defines the fill color of the svg, default color is $c-gray-dcdcdc.
+  iconColor: PropTypes.oneOf(['', 'green']),
+  /** The aria-label property is used to provide the label to any assistive
+   * technologies. This is useful if the text value is not descriptive of the
+   * button's functionality. */
+  ariaLabel: PropTypes.string
 };
 
 ButtonWithIcon.defaultProps = {
   text: 'Search',
+  type: 'submit',
   classes: [],
   icon: <SvgSearch />,
   canExpand: false,
   capitalized: false,
-  iconSize: 'small',
-  iconColor: ''
+  iconSize: '',
+  iconColor: '',
+  ariaLabel: 'search'
 };
 
 export default ButtonWithIcon;
diff --git a/react/src/components/molecules/HeaderSearch/HeaderSearch.scss b/react/src/components/molecules/HeaderSearch/HeaderSearch.scss
index b978265d81..073215dd10 100644
--- a/react/src/components/molecules/HeaderSearch/HeaderSearch.scss
+++ b/react/src/components/molecules/HeaderSearch/HeaderSearch.scss
@@ -5,6 +5,10 @@
   	display: flex;
     position: relative;
 
+    .ma__button-icon {
+      border-right: none;
+    }
+
     &--responsive {
       @media ($bp-medium-max) {
         > div:first-child {
@@ -15,8 +19,5 @@
   }
   .ma__form {
     display: flex;
-    .ma__button-icon {
-      border-right: none;
-    }
   }
 }
diff --git a/react/src/components/molecules/HeaderSearch/HeaderSearch.stories.js b/react/src/components/molecules/HeaderSearch/HeaderSearch.stories.js
index 242f93e8ef..3ac8fc95c5 100644
--- a/react/src/components/molecules/HeaderSearch/HeaderSearch.stories.js
+++ b/react/src/components/molecules/HeaderSearch/HeaderSearch.stories.js
@@ -16,10 +16,7 @@ storiesOf('molecules', module).addDecorator(withKnobs)
     const props = {
       placeholder: text('HeaderSearch.placeholder', 'Search Mass.gov'),
       buttonSearch: {
-        onClick: (e) => {
-          action('Button clicked')(e);
-          e.preventDefault();
-        },
+        onClick: action('Button clicked'),
         ariaLabel: text('HeaderSearch.buttonSearch.ariaLabel', 'Search'),
         text: text('HeaderSearch.buttonSearch.text', 'Search')
       },
diff --git a/react/src/components/molecules/HeaderSearch/index.js b/react/src/components/molecules/HeaderSearch/index.js
index fb7d173532..c9fad5a498 100644
--- a/react/src/components/molecules/HeaderSearch/index.js
+++ b/react/src/components/molecules/HeaderSearch/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ButtonSearch from '../../atoms/buttons/ButtonSearch';
+import ButtonWithIcon from '../../atoms/buttons/ButtonWithIcon';
 import TypeAheadDropdown from '../../molecules/TypeAheadDropdown';
 import './HeaderSearch.css';
 
@@ -46,7 +46,7 @@ class HeaderSearch extends React.Component {
               type="search"
               value={this.state.value}
             />
-            <ButtonSearch {...headerSearch.buttonSearch} />
+            <ButtonWithIcon {...headerSearch.buttonSearch} />
           </form>
         </section>
       </div>
@@ -62,7 +62,7 @@ HeaderSearch.propTypes = {
   /** The placeholder text for the input */
   placeholder: PropTypes.string,
   /** The Search button */
-  buttonSearch: PropTypes.shape(ButtonSearch.propTypes),
+  buttonSearch: PropTypes.shape(ButtonWithIcon.propTypes),
   /** Custom submit function */
   onSubmit: PropTypes.func,
   /** Custom change function for the text input */
@@ -78,7 +78,7 @@ HeaderSearch.defaultProps = {
   label: 'Search terms',
   placeholder: 'Search Mass.gov',
   buttonSearch: {
-    ariaLabel: 'Search'
+    ariaLabel: 'search'
   }
 };
 
diff --git a/react/src/components/molecules/SearchBannerForm/index.js b/react/src/components/molecules/SearchBannerForm/index.js
index c6be0a2df2..bc86ea488d 100644
--- a/react/src/components/molecules/SearchBannerForm/index.js
+++ b/react/src/components/molecules/SearchBannerForm/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import InputText from '../../atoms/forms/InputText';
-import ButtonSearch from '../../atoms/buttons/ButtonSearch';
+import ButtonWithIcon from '../../atoms/buttons/ButtonWithIcon';
 
 const SearchBannerForm = (searchBannerForm) => {
   let { classes = [] } = searchBannerForm.buttonSearch;
@@ -13,7 +13,7 @@ const SearchBannerForm = (searchBannerForm) => {
       <div className="ma__search-banner__input">
         <InputText {...searchBannerForm.inputText} />
       </div>
-      <ButtonSearch {...searchBannerForm.buttonSearch} classes={classes} />
+      <ButtonWithIcon {...searchBannerForm.buttonSearch} classes={classes} />
     </form>
   );
 };
@@ -26,7 +26,7 @@ SearchBannerForm.propTypes = {
   /** The properties for the text input field */
   inputText: PropTypes.shape(InputText.propTypes).isRequired,
   /** The Search button */
-  buttonSearch: PropTypes.shape(ButtonSearch.propTypes).isRequired
+  buttonSearch: PropTypes.shape(ButtonWithIcon.propTypes).isRequired
 };
 
 export default SearchBannerForm;
diff --git a/react/src/index.js b/react/src/index.js
index c866ba7f66..d82f52dada 100644
--- a/react/src/index.js
+++ b/react/src/index.js
@@ -10,7 +10,6 @@ export Placeholder from './components/base/Placeholder'
 export Divider from './components/atoms/Divider';
 // @atoms/@buttons
 export Button from './components/atoms/buttons/Button';
-export ButtonSearch from './components/atoms/buttons/ButtonSearch';
 export ButtonSort from './components/atoms/buttons/ButtonSort';
 export ButtonToggle from './components/atoms/buttons/ButtonToggle';
 export ButtonWithIcon from './components/atoms/buttons/ButtonWithIcon';