diff --git a/src/components/Button/Button-story.js b/src/components/Button/Button-story.js
index 25db9a5dd7..48f216c50d 100644
--- a/src/components/Button/Button-story.js
+++ b/src/components/Button/Button-story.js
@@ -12,28 +12,29 @@ import { withKnobs, boolean, select } from '@storybook/addon-knobs';
 import { iconAddSolid, iconSearch } from 'carbon-icons';
 import AddFilled16 from '@carbon/icons-react/lib/add--filled/16';
 import Search16 from '@carbon/icons-react/lib/search/16';
-import { settings } from 'carbon-components';
 import Button from '../Button';
 import ButtonSkeleton from '../Button/Button.Skeleton';
-import { componentsX } from '../../internal/FeatureFlags';
-
-const { prefix } = settings;
+import { breakingChangesX } from '../../internal/FeatureFlags';
 
 const icons = {
   None: 'None',
-  'Add with filled circle (iconAddSolid from `carbon-icons`)': componentsX
-    ? 'AddFilled16'
-    : 'iconAddSolid',
-  'Search (iconSearch from `carbon-icons`)': componentsX
-    ? 'Search16'
-    : 'iconSearch',
 };
 
+if (breakingChangesX) {
+  icons['Add with filled circle (iconAddSolid from `carbon-icons`)'] =
+    'iconAddSolid';
+  icons['Search (iconSearch from `carbon-icons`)'] = 'iconSearch';
+}
+
+icons['Add with filled circle (AddFilled16 from `@carbon/icons`)'] =
+  'AddFilled16';
+icons['Search (Search16 from `@carbon/icons`)'] = 'Search16';
+
 const iconMap = {
   iconAddSolid,
   iconSearch,
-  AddFilled16: <AddFilled16 className={`${prefix}--btn__icon`} />,
-  Search16: <Search16 className={`${prefix}--btn__icon`} />,
+  AddFilled16,
+  Search16,
 };
 
 const kinds = {
@@ -45,23 +46,31 @@ const kinds = {
 };
 
 const props = {
-  regular: () => ({
-    className: 'some-class',
-    kind: select('Button kind (kind)', kinds, 'primary'),
-    disabled: boolean('Disabled (disabled)', false),
-    small: boolean('Small (small)', false),
-    icon: iconMap[select('Icon (icon)', icons, 'none')],
-    onClick: action('onClick'),
-    onFocus: action('onFocus'),
-  }),
-  set: () => ({
-    className: 'some-class',
-    disabled: boolean('Disabled (disabled)', false),
-    small: boolean('Small (small)', false),
-    icon: iconMap[select('Icon (icon)', icons, 'none')],
-    onClick: action('onClick'),
-    onFocus: action('onFocus'),
-  }),
+  regular: () => {
+    const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
+    return {
+      className: 'some-class',
+      kind: select('Button kind (kind)', kinds, 'primary'),
+      disabled: boolean('Disabled (disabled)', false),
+      small: boolean('Small (small)', false),
+      renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
+      icon: !iconToUse || !iconToUse.svgData ? undefined : iconToUse,
+      onClick: action('onClick'),
+      onFocus: action('onFocus'),
+    };
+  },
+  set: () => {
+    const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
+    return {
+      className: 'some-class',
+      disabled: boolean('Disabled (disabled)', false),
+      small: boolean('Small (small)', false),
+      renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
+      icon: !iconToUse || !iconToUse.svgData ? undefined : iconToUse,
+      onClick: action('onClick'),
+      onFocus: action('onFocus'),
+    };
+  },
 };
 
 const CustomLink = ({ children, href, ...other }) => (
diff --git a/src/components/Button/Button-test.js b/src/components/Button/Button-test.js
index 7311eb389e..19d2cdd2e6 100644
--- a/src/components/Button/Button-test.js
+++ b/src/components/Button/Button-test.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { iconSearch } from 'carbon-icons';
+import Search16 from '@carbon/icons-react/lib/search/16';
 import Button from '../Button';
 import Link from '../Link';
 import ButtonSkeleton from '../Button/Button.Skeleton';
@@ -121,8 +122,35 @@ describe('Button', () => {
       </Button>
     );
     const icon = iconButton.find('svg');
+
+    it('should have the appropriate icon', () => {
+      expect(icon.hasClass('bx--btn__icon')).toBe(true);
+    });
+
+    it('should return error if icon given without description', () => {
+      const props = {
+        icon: 'search',
+      };
+      // eslint-disable-next-line quotes
+      const error = new Error(
+        'icon/renderIcon property specified without also providing an iconDescription property.'
+      );
+      expect(Button.propTypes.iconDescription(props)).toEqual(error);
+    });
+  });
+
+  describe('Renders custom icon buttons', () => {
+    const iconButton = mount(
+      <Button renderIcon={Search16} iconDescription="Search">
+        Search
+      </Button>
+    );
+    const originalIcon = mount(<Search16 />).find('svg');
+    const icon = iconButton.find('svg');
+
     it('should have the appropriate icon', () => {
       expect(icon.hasClass('bx--btn__icon')).toBe(true);
+      expect(icon.children().html()).toBe(originalIcon.children().html());
     });
 
     it('should return error if icon given without description', () => {
@@ -131,7 +159,7 @@ describe('Button', () => {
       };
       // eslint-disable-next-line quotes
       const error = new Error(
-        'icon property specified without also providing an iconDescription property.'
+        'icon/renderIcon property specified without also providing an iconDescription property.'
       );
       expect(Button.propTypes.iconDescription(props)).toEqual(error);
     });
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 31c1ea1336..0b374bf854 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -9,12 +9,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from '../Icon';
 import classNames from 'classnames';
+import warning from 'warning';
 import { settings } from 'carbon-components';
 import { ButtonTypes } from '../../prop-types/types';
-import { componentsX } from '../../internal/FeatureFlags';
+import { breakingChangesX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
+let didWarnAboutDeprecation = false;
+
 const Button = ({
   children,
   as,
@@ -26,6 +29,7 @@ const Button = ({
   tabIndex,
   type,
   inputref,
+  renderIcon,
   icon,
   iconDescription,
   ...other
@@ -46,23 +50,30 @@ const Button = ({
     className: buttonClasses,
     ref: inputref,
   };
-  const buttonImage = (() => {
-    if (componentsX && icon && React.isValidElement(icon)) {
-      return icon;
-    }
-    if (!componentsX && icon) {
-      return (
-        <Icon
-          icon={Object(icon) === icon ? icon : undefined}
-          name={Object(icon) !== icon ? icon : undefined}
-          description={iconDescription}
-          className={`${prefix}--btn__icon`}
-          aria-hidden="true"
-        />
-      );
-    }
-    return null;
-  })();
+
+  if (__DEV__ && breakingChangesX && icon) {
+    warning(
+      didWarnAboutDeprecation,
+      'The `icon` property in the `Button` component is being removed in the next release of ' +
+        '`carbon-components-react`. Please use `renderIcon` instead.'
+    );
+    didWarnAboutDeprecation = true;
+  }
+
+  const hasRenderIcon = Object(renderIcon) === renderIcon;
+  const ButtonImageElement = hasRenderIcon
+    ? renderIcon
+    : !breakingChangesX && icon && Icon;
+  const buttonImage = !ButtonImageElement ? null : (
+    <ButtonImageElement
+      icon={!hasRenderIcon && Object(icon) === icon ? icon : undefined}
+      name={!hasRenderIcon && Object(icon) !== icon ? icon : undefined}
+      aria-label={!hasRenderIcon ? undefined : iconDescription}
+      description={hasRenderIcon ? undefined : iconDescription}
+      className={`${prefix}--btn__icon`}
+      aria-hidden={true}
+    />
+  );
 
   let component = 'button';
   let otherProps = {
@@ -147,6 +158,12 @@ Button.propTypes = {
    */
   role: PropTypes.string,
 
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /**
    * Specify an icon to include in the Button through a string or object
    * representing the SVG data of the icon
@@ -167,9 +184,9 @@ Button.propTypes = {
    * be read by screen readers
    */
   iconDescription: props => {
-    if (props.icon && !props.iconDescription) {
+    if ((props.icon || props.renderIcon) && !props.iconDescription) {
       return new Error(
-        'icon property specified without also providing an iconDescription property.'
+        'icon/renderIcon property specified without also providing an iconDescription property.'
       );
     }
     return undefined;
diff --git a/src/components/DataTable/TableToolbarAction.js b/src/components/DataTable/TableToolbarAction.js
index 96ba3b993c..259af9d0b6 100644
--- a/src/components/DataTable/TableToolbarAction.js
+++ b/src/components/DataTable/TableToolbarAction.js
@@ -6,34 +6,46 @@
  */
 
 import cx from 'classnames';
+import warning from 'warning';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { settings } from 'carbon-components';
 import Icon from '../Icon';
 import isRequiredOneOf from '../../prop-types/isRequiredOneOf';
-import { componentsX } from '../../internal/FeatureFlags';
+import { breakingChangesX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
+let didWarnAboutDeprecation = false;
+
 const TableToolbarAction = ({
   className,
+  renderIcon,
   icon,
   iconName,
   iconDescription,
   ...rest
 }) => {
+  if (__DEV__ && breakingChangesX && (icon || iconName)) {
+    warning(
+      didWarnAboutDeprecation,
+      'The `icon`/`iconName` properties in the `TableToolbarAction` component is being removed in the next release of ' +
+        '`carbon-components-react`. Please use `renderIcon` instead.'
+    );
+    didWarnAboutDeprecation = true;
+  }
+
   const toolbarActionClasses = cx(className, `${prefix}--toolbar-action`);
   const tableToolbarActionIcon = (() => {
-    if (componentsX && icon) {
-      const IconTag = icon;
+    if (Object(renderIcon) === renderIcon) {
+      const IconTag = renderIcon;
       return (
         <IconTag
           className={`${prefix}--toolbar-action__icon`}
           aria-label={iconDescription}
         />
       );
-    }
-    if (!componentsX && icon) {
+    } else if (!breakingChangesX && (icon || iconName)) {
       return (
         <Icon
           className={`${prefix}--toolbar-action__icon`}
@@ -57,6 +69,12 @@ TableToolbarAction.propTypes = {
   className: PropTypes.string,
 
   ...isRequiredOneOf({
+    /**
+     * Optional prop to allow overriding the toolbar icon rendering.
+     * Can be a React component class
+     */
+    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
     /**
      * Specify the icon for the toolbar action
      */
diff --git a/src/components/DataTable/__tests__/TableToolbarAction-test.js b/src/components/DataTable/__tests__/TableToolbarAction-test.js
index d4e96c7dd2..be5895f5eb 100644
--- a/src/components/DataTable/__tests__/TableToolbarAction-test.js
+++ b/src/components/DataTable/__tests__/TableToolbarAction-test.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { iconAddSolid } from 'carbon-icons';
+import Download16 from '@carbon/icons-react/lib/download/16';
 import { TableToolbarAction } from '../';
 
 describe('DataTable.TableToolbarAction', () => {
@@ -22,3 +23,14 @@ describe('DataTable.TableToolbarAction', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });
+
+describe('Custom icon in DataTable.TableToolbarAction', () => {
+  it('should render', () => {
+    const iconAction = mount(
+      <TableToolbarAction renderIcon={Download16} iconDescription="Download" />
+    );
+    const originalIcon = mount(<Download16 />).find('svg');
+    const icon = iconAction.find('svg');
+    expect(icon.children().html()).toBe(originalIcon.children().html());
+  });
+});
diff --git a/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
index fb66e89811..45ab3d0a84 100644
--- a/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
+++ b/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -44,7 +44,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
       type="button"
     >
       <Icon
-        aria-hidden="true"
+        aria-hidden={true}
         className="bx--btn__icon"
         description="Add"
         fillRule="evenodd"
@@ -75,7 +75,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
       >
         <svg
           alt="Add"
-          aria-hidden="true"
+          aria-hidden={true}
           aria-label="Add"
           className="bx--btn__icon"
           fillRule="evenodd"
diff --git a/src/components/DataTable/stories/default.js b/src/components/DataTable/stories/default.js
index 0738a9ee18..6589680f79 100644
--- a/src/components/DataTable/stories/default.js
+++ b/src/components/DataTable/stories/default.js
@@ -8,6 +8,9 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { iconDownload, iconEdit, iconSettings } from 'carbon-icons';
+import Download16 from '@carbon/icons-react/lib/download/16';
+import Edit16 from '@carbon/icons-react/lib/edit/16';
+import Settings16 from '@carbon/icons-react/lib/settings/16';
 import Button from '../../Button';
 import DataTable, {
   Table,
@@ -26,9 +29,6 @@ import DataTable, {
   TableToolbarContent,
   TableToolbarSearch,
 } from '../../DataTable';
-import Download16 from '@carbon/icons-react/lib/download/16';
-import Edit16 from '@carbon/icons-react/lib/edit/16';
-import Settings16 from '@carbon/icons-react/lib/settings/16';
 import { batchActionClick, initialRows, headers } from './shared';
 import { componentsX } from '../../../internal/FeatureFlags';
 
@@ -65,17 +65,20 @@ export default ({ short, shouldShowBorder }) => (
           <TableToolbarSearch onChange={onInputChange} />
           <TableToolbarContent>
             <TableToolbarAction
-              icon={componentsX ? Download16 : iconDownload}
+              renderIcon={!componentsX ? undefined : Download16}
+              icon={componentsX ? undefined : iconDownload}
               iconDescription="Download"
               onClick={action('TableToolbarAction - Download')}
             />
             <TableToolbarAction
-              icon={componentsX ? Edit16 : iconEdit}
+              renderIcon={!componentsX ? undefined : Edit16}
+              icon={componentsX ? undefined : iconEdit}
               iconDescription="Edit"
               onClick={action('TableToolbarAction - Edit')}
             />
             <TableToolbarAction
-              icon={componentsX ? Settings16 : iconSettings}
+              renderIcon={!componentsX ? undefined : Settings16}
+              icon={componentsX ? undefined : iconSettings}
               iconDescription="Settings"
               onClick={action('TableToolbarAction - Settings')}
             />
diff --git a/src/components/DataTable/stories/with-batch-actions.js b/src/components/DataTable/stories/with-batch-actions.js
index 309472b10d..9297b614a7 100644
--- a/src/components/DataTable/stories/with-batch-actions.js
+++ b/src/components/DataTable/stories/with-batch-actions.js
@@ -8,6 +8,9 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { iconDownload, iconEdit, iconSettings } from 'carbon-icons';
+import Download16 from '@carbon/icons-react/lib/download/16';
+import Edit16 from '@carbon/icons-react/lib/edit/16';
+import Settings16 from '@carbon/icons-react/lib/settings/16';
 import Button from '../../Button';
 import DataTable, {
   Table,
@@ -26,9 +29,6 @@ import DataTable, {
   TableToolbarContent,
   TableToolbarSearch,
 } from '../../DataTable';
-import Download16 from '@carbon/icons-react/lib/download/16';
-import Edit16 from '@carbon/icons-react/lib/edit/16';
-import Settings16 from '@carbon/icons-react/lib/settings/16';
 import { batchActionClick, initialRows, headers } from './shared';
 import { componentsX } from '../../../internal/FeatureFlags';
 
@@ -62,17 +62,20 @@ export default () => (
           <TableToolbarSearch onChange={onInputChange} />
           <TableToolbarContent>
             <TableToolbarAction
-              icon={componentsX ? Download16 : iconDownload}
+              renderIcon={!componentsX ? undefined : Download16}
+              icon={componentsX ? undefined : iconDownload}
               iconDescription="Download"
               onClick={action('TableToolbarAction - Download')}
             />
             <TableToolbarAction
-              icon={componentsX ? Edit16 : iconEdit}
+              renderIcon={!componentsX ? undefined : Edit16}
+              icon={componentsX ? undefined : iconEdit}
               iconDescription="Edit"
               onClick={action('TableToolbarAction - Edit')}
             />
             <TableToolbarAction
-              icon={componentsX ? Settings16 : iconSettings}
+              renderIcon={!componentsX ? undefined : Settings16}
+              icon={componentsX ? undefined : iconSettings}
               iconDescription="Settings"
               onClick={action('TableToolbarAction - Settings')}
             />
diff --git a/src/components/DataTable/stories/with-boolean-column.js b/src/components/DataTable/stories/with-boolean-column.js
index c562938f70..21d6b05a07 100644
--- a/src/components/DataTable/stories/with-boolean-column.js
+++ b/src/components/DataTable/stories/with-boolean-column.js
@@ -8,6 +8,9 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { iconDownload, iconEdit, iconSettings } from 'carbon-icons';
+import Download16 from '@carbon/icons-react/lib/download/16';
+import Edit16 from '@carbon/icons-react/lib/edit/16';
+import Settings16 from '@carbon/icons-react/lib/settings/16';
 import Button from '../../Button';
 import Checkbox from '../../Checkbox';
 import DataTable, {
@@ -23,6 +26,7 @@ import DataTable, {
   TableToolbarContent,
   TableToolbarSearch,
 } from '../../DataTable';
+import { componentsX } from '../../../internal/FeatureFlags';
 // import { initialRows, headers } from './shared';
 
 const initialRows = [
@@ -99,17 +103,20 @@ export default () => (
           <TableToolbarSearch onChange={onInputChange} />
           <TableToolbarContent>
             <TableToolbarAction
-              icon={iconDownload}
+              renderIcon={!componentsX ? undefined : Download16}
+              icon={componentsX ? undefined : iconDownload}
               iconDescription="Download"
               onClick={action('TableToolbarAction - Download')}
             />
             <TableToolbarAction
-              icon={iconEdit}
+              renderIcon={!componentsX ? undefined : Edit16}
+              icon={componentsX ? undefined : iconEdit}
               iconDescription="Edit"
               onClick={action('TableToolbarAction - Edit')}
             />
             <TableToolbarAction
-              icon={iconSettings}
+              renderIcon={!componentsX ? undefined : Settings16}
+              icon={componentsX ? undefined : iconSettings}
               iconDescription="Settings"
               onClick={action('TableToolbarAction - Settings')}
             />
diff --git a/src/components/DataTable/stories/with-dynamic-content.js b/src/components/DataTable/stories/with-dynamic-content.js
index 7e4b3ec849..e0993f0bf1 100644
--- a/src/components/DataTable/stories/with-dynamic-content.js
+++ b/src/components/DataTable/stories/with-dynamic-content.js
@@ -133,17 +133,20 @@ export default () => {
                 <TableToolbarSearch onChange={onInputChange} />
                 <TableToolbarContent>
                   <TableToolbarAction
-                    icon={componentsX ? Download16 : iconDownload}
+                    renderIcon={!componentsX ? undefined : Download16}
+                    icon={componentsX ? undefined : iconDownload}
                     iconDescription="Download"
                     onClick={action('TableToolbarAction - Download')}
                   />
                   <TableToolbarAction
-                    icon={componentsX ? Edit16 : iconEdit}
+                    renderIcon={!componentsX ? undefined : Edit16}
+                    icon={componentsX ? undefined : iconEdit}
                     iconDescription="Edit"
                     onClick={action('TableToolbarAction - Edit')}
                   />
                   <TableToolbarAction
-                    icon={componentsX ? Settings16 : iconSettings}
+                    renderIcon={!componentsX ? undefined : Settings16}
+                    icon={componentsX ? undefined : iconSettings}
                     iconDescription="Settings"
                     onClick={action('TableToolbarAction - Settings')}
                   />
diff --git a/src/components/DataTable/stories/with-toolbar.js b/src/components/DataTable/stories/with-toolbar.js
index b887775ab1..3092275eb9 100644
--- a/src/components/DataTable/stories/with-toolbar.js
+++ b/src/components/DataTable/stories/with-toolbar.js
@@ -38,17 +38,20 @@ export default () => (
           <TableToolbarSearch onChange={onInputChange} />
           <TableToolbarContent>
             <TableToolbarAction
-              icon={componentsX ? Download16 : iconDownload}
+              renderIcon={!componentsX ? undefined : Download16}
+              icon={componentsX ? undefined : iconDownload}
               iconDescription="Download"
               onClick={action('TableToolbarAction - Download')}
             />
             <TableToolbarAction
-              icon={componentsX ? Edit16 : iconEdit}
+              renderIcon={!componentsX ? undefined : Edit16}
+              icon={componentsX ? undefined : iconEdit}
               iconDescription="Edit"
               onClick={action('TableToolbarAction - Edit')}
             />
             <TableToolbarAction
-              icon={componentsX ? Settings16 : iconSettings}
+              renderIcon={!componentsX ? undefined : Settings16}
+              icon={componentsX ? undefined : iconSettings}
               iconDescription="Settings"
               onClick={action('TableToolbarAction - Settings')}
             />
diff --git a/src/components/ModalWrapper/ModalWrapper-story.js b/src/components/ModalWrapper/ModalWrapper-story.js
index efa5f52192..53e275015a 100644
--- a/src/components/ModalWrapper/ModalWrapper-story.js
+++ b/src/components/ModalWrapper/ModalWrapper-story.js
@@ -7,64 +7,85 @@
 
 import React from 'react';
 import { iconAddSolid, iconSearch } from 'carbon-icons';
+import AddFilled16 from '@carbon/icons-react/lib/add--filled/16';
+import Search16 from '@carbon/icons-react/lib/search/16';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
+import { settings } from 'carbon-components';
 import ModalWrapper from '../ModalWrapper';
 import TextInput from '../TextInput';
 import Select from '../Select';
 import SelectItem from '../SelectItem';
 import RadioButtonGroup from '../RadioButtonGroup';
 import RadioButton from '../RadioButton';
+import { breakingChangesX } from '../../internal/FeatureFlags';
+
+const { prefix } = settings;
 
 const icons = {
   None: 'None',
-  'Add with filled circle (iconAddSolid from `carbon-icons`)': 'iconAddSolid',
-  'Search (iconSearch from `carbon-icons`)': 'iconSearch',
+  ...(breakingChangesX
+    ? {}
+    : {
+        'Add with filled circle (iconAddSolid from `carbon-icons`)':
+          'iconAddSolid',
+        'Search (iconSearch from `carbon-icons`)': 'iconSearch',
+      }),
+  'Add with filled circle (AddFilled16 from `@carbon/icons`)': 'AddFilled16',
+  'Search (Search16 from `@carbon/icons`)': 'Search16',
 };
 
 const iconMap = {
   iconAddSolid,
   iconSearch,
+  AddFilled16: props => (
+    <AddFilled16 className={`${prefix}--btn__icon`} {...props} />
+  ),
+  Search16: props => <Search16 className={`${prefix}--btn__icon`} {...props} />,
 };
 
-const props = () => ({
-  className: 'some-class',
-  disabled: boolean('Disable the launcher button (disabled)', false),
-  passiveModal: boolean('Without footer (passiveModal)', false),
-  danger: boolean('Danger mode (danger)', false),
-  buttonTriggerText: text(
-    'The text in the trigger button (buttonTriggerText)',
-    'Launch Modal'
-  ),
-  triggerButtonIcon: iconMap[select('Icon (icon)', icons, 'none')],
-  modalLabel: text('The modal label (optional) (modalLabel)', 'Label'),
-  modalHeading: text('The modal heading (modalHeading)', 'Modal'),
-  selectorPrimaryFocus: text(
-    'Primary focus element selector (selectorPrimaryFocus)',
-    '[data-modal-primary-focus]'
-  ),
-  primaryButtonText: text(
-    'The text in the primary button (primaryButtonText)',
-    'Save'
-  ),
-  secondaryButtonText: text(
-    'The text in the secondary button (secondaryButtonText)',
-    'Cancel'
-  ),
-  shouldCloseAfterSubmit: boolean(
-    'Close after submit (shouldCloseAfterSubmit)',
-    true
-  ),
-  onBlur: action('onBlur'),
-  onClick: action('onClick'),
-  onFocus: action('onFocus'),
-  onMouseDown: action('onMouseDown'),
-  onMouseEnter: action('onMouseEnter'),
-  onMouseLeave: action('onMouseLeave'),
-  onMouseUp: action('onMouseUp'),
-});
+const props = () => {
+  const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
+  return {
+    className: 'some-class',
+    disabled: boolean('Disable the launcher button (disabled)', false),
+    passiveModal: boolean('Without footer (passiveModal)', false),
+    danger: boolean('Danger mode (danger)', false),
+    buttonTriggerText: text(
+      'The text in the trigger button (buttonTriggerText)',
+      'Launch Modal'
+    ),
+    renderTriggerButtonIcon: typeof iconToUse === 'function' && iconToUse,
+    triggerButtonIcon: typeof iconToUse !== 'function' && iconToUse,
+    modalLabel: text('The modal label (optional) (modalLabel)', 'Label'),
+    modalHeading: text('The modal heading (modalHeading)', 'Modal'),
+    selectorPrimaryFocus: text(
+      'Primary focus element selector (selectorPrimaryFocus)',
+      '[data-modal-primary-focus]'
+    ),
+    primaryButtonText: text(
+      'The text in the primary button (primaryButtonText)',
+      'Save'
+    ),
+    secondaryButtonText: text(
+      'The text in the secondary button (secondaryButtonText)',
+      'Cancel'
+    ),
+    shouldCloseAfterSubmit: boolean(
+      'Close after submit (shouldCloseAfterSubmit)',
+      true
+    ),
+    onBlur: action('onBlur'),
+    onClick: action('onClick'),
+    onFocus: action('onFocus'),
+    onMouseDown: action('onMouseDown'),
+    onMouseEnter: action('onMouseEnter'),
+    onMouseLeave: action('onMouseLeave'),
+    onMouseUp: action('onMouseUp'),
+  };
+};
 
 storiesOf('ModalWrapper', module)
   .addDecorator(withKnobs)
diff --git a/src/components/ModalWrapper/ModalWrapper.js b/src/components/ModalWrapper/ModalWrapper.js
index 974567e80c..03777e5da8 100644
--- a/src/components/ModalWrapper/ModalWrapper.js
+++ b/src/components/ModalWrapper/ModalWrapper.js
@@ -29,6 +29,10 @@ export default class ModalWrapper extends React.Component {
     secondaryButtonText: PropTypes.string,
     handleSubmit: PropTypes.func,
     disabled: PropTypes.bool,
+    renderTriggerButtonIcon: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.object,
+    ]),
     triggerButtonIcon: PropTypes.string,
     triggerButtonIconDescription: PropTypes.string,
     triggerButtonKind: ButtonTypes.buttonKind,
@@ -76,6 +80,7 @@ export default class ModalWrapper extends React.Component {
       onKeyDown,
       buttonTriggerText,
       buttonTriggerClassName,
+      renderTriggerButtonIcon,
       triggerButtonIcon,
       triggerButtonIconDescription,
       triggerButtonKind,
@@ -107,6 +112,7 @@ export default class ModalWrapper extends React.Component {
           className={buttonTriggerClassName}
           disabled={disabled}
           kind={triggerButtonKind}
+          renderIcon={renderTriggerButtonIcon}
           icon={triggerButtonIcon}
           iconDescription={triggerButtonIconDescription}
           onClick={this.handleOpen}
diff --git a/src/components/Notification/Notification-test.js b/src/components/Notification/Notification-test.js
index 9dffa48739..c8cbf86ecb 100644
--- a/src/components/Notification/Notification-test.js
+++ b/src/components/Notification/Notification-test.js
@@ -13,6 +13,7 @@ import {
   iconWarningSolid,
   iconClose,
 } from 'carbon-icons';
+import Close16 from '@carbon/icons-react/lib/close/16';
 import Icon from '../Icon';
 import Notification, {
   NotificationButton,
@@ -40,6 +41,15 @@ describe('NotificationButton', () => {
       expect(icon.props().icon).toEqual(iconClose);
     });
 
+    it('supports custom icon', () => {
+      const iconButton = mount(
+        <NotificationButton renderIcon={Close16} iconDescription="Close" />
+      );
+      const originalIcon = mount(<Close16 />).find('svg');
+      const icon = iconButton.find('svg');
+      expect(icon.children().html()).toBe(originalIcon.children().html());
+    });
+
     describe('When notificationType equals "toast"', () => {
       it('button should have correct className by default', () => {
         expect(wrapper.hasClass('bx--toast-notification__close-button')).toBe(
diff --git a/src/components/Notification/Notification.js b/src/components/Notification/Notification.js
index 953cc0f765..24e3a969e6 100644
--- a/src/components/Notification/Notification.js
+++ b/src/components/Notification/Notification.js
@@ -8,6 +8,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import warning from 'warning';
 import {
   iconClose,
   iconCheckmarkSolid,
@@ -24,10 +25,12 @@ import ErrorFilled16 from '@carbon/icons-react/lib/error--filled/16';
 import CheckmarkFilled16 from '@carbon/icons-react/lib/checkmark--filled/16';
 import InformationFilled16 from '@carbon/icons-react/lib/information--filled/16';
 import WarningAltFilled16 from '@carbon/icons-react/lib/warning--alt--filled/16';
-import { componentsX } from '../../internal/FeatureFlags';
+import { breakingChangesX, componentsX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
+let didWarnAboutDeprecation = false;
+
 export class NotificationButton extends Component {
   static propTypes = {
     /**
@@ -61,6 +64,12 @@ export class NotificationButton extends Component {
       svgData: PropTypes.object.isRequired,
     }),
 
+    /**
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
+     */
+    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
     /**
      * Specify an optional icon for the Button through a string,
      * if something but regular "close" icon is desirable
@@ -78,6 +87,7 @@ export class NotificationButton extends Component {
     notificationType: 'toast',
     type: 'button',
     iconDescription: 'close icon',
+    renderIcon: !componentsX ? undefined : Close16,
   };
 
   render() {
@@ -87,11 +97,21 @@ export class NotificationButton extends Component {
       iconDescription,
       type,
       icon,
+      renderIcon: IconTag,
       name,
       notificationType,
       ...other
     } = this.props;
 
+    if (__DEV__ && breakingChangesX && (icon || name)) {
+      warning(
+        didWarnAboutDeprecation,
+        'The `icon`/`name` properties in the `NotificationButton` component is being removed in the next release of ' +
+          '`carbon-components-react`. Please use `renderIcon` instead.'
+      );
+      didWarnAboutDeprecation = true;
+    }
+
     const buttonClasses = classNames(
       {
         [`${prefix}--toast-notification__close-button`]:
@@ -110,8 +130,7 @@ export class NotificationButton extends Component {
     });
 
     const NotificationButtonIcon = (() => {
-      if (componentsX) {
-        const IconTag = icon || Close16;
+      if (Object(IconTag) === IconTag) {
         return (
           <IconTag
             aria-label={iconDescription}
@@ -120,8 +139,7 @@ export class NotificationButton extends Component {
             name={name}
           />
         );
-      }
-      if (!componentsX) {
+      } else if (!breakingChangesX) {
         return (
           <Icon
             description={iconDescription}
diff --git a/src/components/OverflowMenu/OverflowMenu-test.js b/src/components/OverflowMenu/OverflowMenu-test.js
index 0caea4c366..1e15f2e032 100644
--- a/src/components/OverflowMenu/OverflowMenu-test.js
+++ b/src/components/OverflowMenu/OverflowMenu-test.js
@@ -196,7 +196,7 @@ describe('OverflowMenu', () => {
 
   describe('customized icon', () => {
     it('renders', () => {
-      const rootWrapper = shallow(
+      const rootWrapper = mount(
         <OverflowMenu
           className="extra-class"
           renderIcon={() => <div className="other">Other</div>}>
@@ -204,7 +204,12 @@ describe('OverflowMenu', () => {
           <div className="test-child" />
         </OverflowMenu>
       );
-      expect(rootWrapper.find('.bx--overflow-menu__icon')).toHaveLength(0);
+      // renderIcon should be the only component where `bx--overflow-menu__icon` class is applied,
+      // meaning no actual DOM node should have that class
+      const nodesWithIconClasses = rootWrapper.find('.bx--overflow-menu__icon');
+      expect(nodesWithIconClasses.length).toBe(
+        nodesWithIconClasses.filter('renderIcon').length
+      );
       expect(rootWrapper.find('.other')).toHaveLength(1);
     });
   });
diff --git a/src/components/OverflowMenu/OverflowMenu.js b/src/components/OverflowMenu/OverflowMenu.js
index d31b3fa168..305eaf4fa6 100644
--- a/src/components/OverflowMenu/OverflowMenu.js
+++ b/src/components/OverflowMenu/OverflowMenu.js
@@ -20,11 +20,13 @@ import FloatingMenu, {
 import OptimizedResize from '../../internal/OptimizedResize';
 import Icon from '../Icon';
 import OverflowMenuVertical16 from '@carbon/icons-react/lib/overflow-menu--vertical/16';
-import { componentsX } from '../../internal/FeatureFlags';
+import { breakingChangesX, componentsX } from '../../internal/FeatureFlags';
 import { keys, matches as keyCodeMatches } from '../../tools/key';
 
 const { prefix } = settings;
 
+let didWarnAboutDeprecation = false;
+
 const matchesFuncName =
   typeof Element !== 'undefined' &&
   ['matches', 'webkitMatchesSelector', 'msMatchesSelector'].filter(
@@ -275,7 +277,7 @@ export default class OverflowMenu extends Component {
     /**
      * Function called to override icon rendering.
      */
-    renderIcon: PropTypes.func,
+    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
     /**
      * Function called when menu is closed
@@ -295,6 +297,7 @@ export default class OverflowMenu extends Component {
     direction: DIRECTION_BOTTOM,
     flipped: false,
     floatingMenu: false,
+    renderIcon: !componentsX ? undefined : OverflowMenuVertical16,
     onClick: () => {},
     onKeyDown: () => {},
     onClose: () => {},
@@ -557,7 +560,7 @@ export default class OverflowMenu extends Component {
       iconClass,
       onClick, // eslint-disable-line
       onOpen, // eslint-disable-line
-      renderIcon,
+      renderIcon: IconElement,
       ...other
     } = this.props;
 
@@ -569,6 +572,15 @@ export default class OverflowMenu extends Component {
       );
     }
 
+    if (__DEV__ && breakingChangesX && (icon || iconName)) {
+      warning(
+        didWarnAboutDeprecation,
+        'The `icon`/`iconName` properties in the `OverflowMenu` component is being removed in the next release of ' +
+          '`carbon-components-react`. Please use `renderIcon` instead.'
+      );
+      didWarnAboutDeprecation = true;
+    }
+
     const { open } = this.state;
 
     const overflowMenuClasses = classNames(
@@ -644,19 +656,15 @@ export default class OverflowMenu extends Component {
     };
 
     const overflowMenuIcon = (() => {
-      if (renderIcon) {
-        return renderIcon(iconProps);
-      }
-      if (!componentsX) {
-        return (
-          <Icon
-            {...iconProps}
-            icon={!icon && !iconName ? iconOverflowMenu : icon}
-            name={iconName}
-          />
-        );
-      }
-      return <OverflowMenuVertical16 {...iconProps} />;
+      return IconElement ? (
+        <IconElement {...iconProps} />
+      ) : (
+        <Icon
+          {...iconProps}
+          icon={!icon && !iconName ? iconOverflowMenu : icon}
+          name={iconName}
+        />
+      );
     })();
 
     return (
diff --git a/src/components/Tooltip/Tooltip.js b/src/components/Tooltip/Tooltip.js
index d5694e7087..14bb197105 100644
--- a/src/components/Tooltip/Tooltip.js
+++ b/src/components/Tooltip/Tooltip.js
@@ -109,7 +109,8 @@ const getMenuOffset = (menuBody, menuDirection) => {
   }
 };
 
-let didWarnAboutDeprecation = false;
+let didWarnAboutDeprecationClickToOpen = false;
+let didWarnAboutDeprecationIcon = false;
 
 export default class Tooltip extends Component {
   state = {};
@@ -225,6 +226,7 @@ export default class Tooltip extends Component {
   static defaultProps = {
     open: false,
     direction: DIRECTION_BOTTOM,
+    renderIcon: !componentsX ? undefined : Information,
     showIcon: true,
     iconDescription: 'tooltip',
     iconTitle: '',
@@ -390,7 +392,7 @@ export default class Tooltip extends Component {
       iconName,
       iconTitle,
       iconDescription,
-      renderIcon,
+      renderIcon: IconCustomElement,
       menuOffset,
       // Exclude `clickToOpen` from `other` to avoid passing it along to `<div>`
       clickToOpen,
@@ -400,11 +402,20 @@ export default class Tooltip extends Component {
 
     if (!clickToOpen && __DEV__) {
       warning(
-        didWarnAboutDeprecation,
+        didWarnAboutDeprecationClickToOpen,
         'The `clickToOpen=false` option in `Tooltip` component is being updated in the next release of ' +
           '`carbon-components-react`. Please use `TooltipIcon` or `TooltipDefinition` instead.'
       );
-      didWarnAboutDeprecation = true;
+      didWarnAboutDeprecationClickToOpen = true;
+    }
+
+    if (__DEV__ && breakingChangesX && (icon || iconName)) {
+      warning(
+        didWarnAboutDeprecationIcon,
+        'The `icon`/`iconName` properties in the `Tooltip` component is being removed in the next release of ' +
+          '`carbon-components-react`. Please use `renderIcon` instead.'
+      );
+      didWarnAboutDeprecationIcon = true;
     }
 
     const { open } = this.state;
@@ -426,8 +437,6 @@ export default class Tooltip extends Component {
           'aria-owns': tooltipId,
         };
 
-    const IconCustomElement = renderIcon || (componentsX && Information);
-
     const finalIcon = IconCustomElement ? (
       <IconCustomElement
         name={iconName}