diff --git a/scripts/jest/jest.config.js b/scripts/jest/jest.config.js
index 64835fabe1..8cc5d744a2 100644
--- a/scripts/jest/jest.config.js
+++ b/scripts/jest/jest.config.js
@@ -8,6 +8,7 @@ module.exports = {
     moduleNameMapper: {
         'box-ui-elements-locale-data': '<rootDir>/i18n/en-US.js',
         'box-locale-data': '<rootDir>/node_modules/@box/cldr-data/locale-data/en-US',
+        '^elements/(.*)$': '<rootDir>/src/elements/$1',
         '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
             '<rootDir>/scripts/jest/mocks/fileMock.js',
         '\\.(css|less|scss|md)$': '<rootDir>/scripts/jest/mocks/styleMock.js',
diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js
index 3564febd1f..8153f164b7 100644
--- a/src/components/sidebar-toggle-button/SidebarToggleButton.js
+++ b/src/components/sidebar-toggle-button/SidebarToggleButton.js
@@ -4,8 +4,12 @@ import classNames from 'classnames';
 import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
 
+import { IconButton } from '@box/blueprint-web';
+import { useFeatureConfig } from 'elements/common/feature-checking';
 import IconHide from '../../icons/general/IconHide';
 import IconShow from '../../icons/general/IconShow';
+import IconRightSidebarChevronOpen from '../../icons/general/IconRightSidebarChevronOpen';
+import IconRightSidebarChevronClose from '../../icons/general/IconRightSidebarChevronClose';
 import PlainButton from '../plain-button';
 import Tooltip from '../tooltip';
 
@@ -40,18 +44,49 @@ const SidebarToggleButton = ({
     });
     const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left';
 
+    const { enabled: isPreviewModernizationEnabled } = useFeatureConfig('previewModernization');
+
     const renderButton = () => {
-        if (direction === DIRECTION_LEFT) {
-            return isOpen ? <IconShow height={16} width={16} /> : <IconHide height={16} width={16} />;
+        if (isPreviewModernizationEnabled) {
+            if (direction === DIRECTION_LEFT) {
+                return (
+                    <IconButton
+                        aria-label={intlText}
+                        icon={isOpen ? IconRightSidebarChevronOpen : IconRightSidebarChevronClose}
+                        onClick={onClick}
+                        size="large"
+                        variant="high-contrast"
+                    />
+                );
+            }
+            return (
+                <IconButton
+                    aria-label={intlText}
+                    icon={isOpen ? IconRightSidebarChevronClose : IconRightSidebarChevronOpen}
+                    onClick={onClick}
+                    size="large"
+                    variant="high-contrast"
+                />
+            );
         }
-        return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
+
+        const renderIcon = () => {
+            if (direction === DIRECTION_LEFT) {
+                return isOpen ? <IconShow height={16} width={16} /> : <IconHide height={16} width={16} />;
+            }
+            return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
+        };
+
+        return (
+            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+                {renderIcon()}
+            </PlainButton>
+        );
     };
 
     return (
         <Tooltip position={tooltipPosition} text={intlText}>
-            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
-                {renderButton()}
-            </PlainButton>
+            {renderButton()}
         </Tooltip>
     );
 };
diff --git a/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js b/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
index 9cfc881dc8..fb372219c8 100644
--- a/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
+++ b/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js
@@ -2,7 +2,19 @@ import * as React from 'react';
 
 import SidebarToggleButton from '..';
 
+jest.mock('elements/common/feature-checking', () => ({
+    useFeatureConfig: jest.fn(),
+}));
+
+const { useFeatureConfig } = require('elements/common/feature-checking');
+
+const mockUseFeatureConfig = useFeatureConfig;
+
 describe('components/sidebar-toggle-button/SidebarToggleButton', () => {
+    beforeEach(() => {
+        mockUseFeatureConfig.mockReturnValue({ enabled: false });
+    });
+
     test('should render correctly as open', () => {
         const wrapper = mount(<SidebarToggleButton isOpen />);
 
@@ -32,4 +44,61 @@ describe('components/sidebar-toggle-button/SidebarToggleButton', () => {
 
         expect(wrapper).toMatchSnapshot();
     });
+
+    describe('previewModernization feature enabled', () => {
+        beforeEach(() => {
+            mockUseFeatureConfig.mockReturnValue({ enabled: true });
+        });
+
+        test('should render IconButton when previewModernization is enabled and sidebar is open (right direction)', () => {
+            const wrapper = mount(<SidebarToggleButton isOpen />);
+
+            expect(wrapper.find('IconButton')).toHaveLength(1);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should render IconButton when previewModernization is enabled and sidebar is closed (right direction)', () => {
+            const wrapper = mount(<SidebarToggleButton isOpen={false} />);
+
+            expect(wrapper.find('IconButton')).toHaveLength(1);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should render IconButton when previewModernization is enabled and sidebar is open (left direction)', () => {
+            const wrapper = mount(<SidebarToggleButton direction="left" isOpen />);
+
+            expect(wrapper.find('IconButton')).toHaveLength(1);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should render IconButton when previewModernization is enabled and sidebar is closed (left direction)', () => {
+            const wrapper = mount(<SidebarToggleButton direction="left" isOpen={false} />);
+
+            expect(wrapper.find('IconButton')).toHaveLength(1);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should call onClick when IconButton is clicked', () => {
+            const onClick = jest.fn();
+            const wrapper = mount(<SidebarToggleButton isOpen onClick={onClick} />);
+
+            wrapper.find('IconButton').simulate('click');
+
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+
+        test('should render IconButton with correct props when previewModernization is enabled', () => {
+            const onClick = jest.fn();
+            const wrapper = mount(<SidebarToggleButton isOpen onClick={onClick} />);
+
+            const iconButton = wrapper.find('IconButton');
+            expect(iconButton.prop('size')).toBe('large');
+            expect(iconButton.prop('variant')).toBe('high-contrast');
+            expect(iconButton.prop('onClick')).toBe(onClick);
+        });
+    });
 });
diff --git a/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap
index d25c9f336a..18316a6b16 100644
--- a/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap
+++ b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap
@@ -1,5 +1,509 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/sidebar-toggle-button/SidebarToggleButton previewModernization feature enabled should render IconButton when previewModernization is enabled and sidebar is closed (left direction) 1`] = `
+<SidebarToggleButton
+  direction="left"
+  isOpen={false}
+>
+  <SidebarToggleButton
+    direction="left"
+    intl={
+      {
+        "formatDate": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatRelativeTime": [Function],
+      }
+    }
+    isOpen={false}
+  >
+    <Tooltip
+      constrainToScrollParent={false}
+      constrainToWindow={true}
+      isDisabled={false}
+      position="middle-right"
+      text="Show Sidebar"
+      theme="default"
+    >
+      <TetherComponent
+        attachment="middle left"
+        bodyElement={<body />}
+        classPrefix="tooltip"
+        constraints={
+          [
+            {
+              "attachment": "together",
+              "to": "window",
+            },
+          ]
+        }
+        enabled={false}
+        renderElementTag="div"
+        renderElementTo={null}
+        targetAttachment="middle right"
+      >
+        <IconButton
+          aria-label="Show Sidebar"
+          icon={[Function]}
+          key=".0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          size="large"
+          tabIndex="0"
+          variant="high-contrast"
+        >
+          <Button2
+            aria-label="Show Sidebar"
+            className="bp_icon_button_module_iconButton--cb154 bp_icon_button_module_high-contrast--cb154 bp_icon_button_module_large--cb154"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            tabIndex="0"
+          >
+            <button
+              aria-label="Show Sidebar"
+              className="bp_icon_button_module_iconButton--cb154 bp_icon_button_module_high-contrast--cb154 bp_icon_button_module_large--cb154"
+              onBlur={[Function]}
+              onClickCapture={[Function]}
+              onFocus={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onKeyDownCapture={[Function]}
+              onKeyPressCapture={[Function]}
+              onKeyUp={[Function]}
+              onLoadedMetadataCapture={[Function]}
+              onMouseDown={[Function]}
+              onMouseDownCapture={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              tabIndex="0"
+              type="button"
+            >
+              <IconRightSidebarChevronClose
+                className="bp_icon_button_module_icon--cb154"
+                height="1.5rem"
+                role="presentation"
+                width="1.5rem"
+              >
+                <AccessibleSVG
+                  className="icon-show bp_icon_button_module_icon--cb154"
+                  height="1.5rem"
+                  viewBox="0 0 24 24"
+                  width="1.5rem"
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="icon-show bp_icon_button_module_icon--cb154"
+                    focusable="false"
+                    height="1.5rem"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="1.5rem"
+                  >
+                    <path
+                      d="M15.707 9.29297C15.3165 8.90245 14.6835 8.90245 14.293 9.29297C13.9024 9.68349 13.9024 10.3165 14.293 10.707L15.5859 12L14.293 13.293C13.9024 13.6835 13.9024 14.3165 14.293 14.707C14.6835 15.0975 15.3165 15.0975 15.707 14.707L17.707 12.707C18.0975 12.3165 18.0975 11.6835 17.707 11.293L15.707 9.29297Z"
+                      fill="#000000"
+                      fill-opacity="0.6"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
+                      fill="#000000"
+                      fill-opacity="0.6"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </AccessibleSVG>
+              </IconRightSidebarChevronClose>
+            </button>
+          </Button2>
+        </IconButton>
+      </TetherComponent>
+    </Tooltip>
+  </SidebarToggleButton>
+</SidebarToggleButton>
+`;
+
+exports[`components/sidebar-toggle-button/SidebarToggleButton previewModernization feature enabled should render IconButton when previewModernization is enabled and sidebar is closed (right direction) 1`] = `
+<SidebarToggleButton
+  isOpen={false}
+>
+  <SidebarToggleButton
+    intl={
+      {
+        "formatDate": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatRelativeTime": [Function],
+      }
+    }
+    isOpen={false}
+  >
+    <Tooltip
+      constrainToScrollParent={false}
+      constrainToWindow={true}
+      isDisabled={false}
+      position="middle-left"
+      text="Show Sidebar"
+      theme="default"
+    >
+      <TetherComponent
+        attachment="middle right"
+        bodyElement={<body />}
+        classPrefix="tooltip"
+        constraints={
+          [
+            {
+              "attachment": "together",
+              "to": "window",
+            },
+          ]
+        }
+        enabled={false}
+        renderElementTag="div"
+        renderElementTo={null}
+        targetAttachment="middle left"
+      >
+        <IconButton
+          aria-label="Show Sidebar"
+          icon={[Function]}
+          key=".0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          size="large"
+          tabIndex="0"
+          variant="high-contrast"
+        >
+          <Button2
+            aria-label="Show Sidebar"
+            className="bp_icon_button_module_iconButton--cb154 bp_icon_button_module_high-contrast--cb154 bp_icon_button_module_large--cb154"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            tabIndex="0"
+          >
+            <button
+              aria-label="Show Sidebar"
+              className="bp_icon_button_module_iconButton--cb154 bp_icon_button_module_high-contrast--cb154 bp_icon_button_module_large--cb154"
+              onBlur={[Function]}
+              onClickCapture={[Function]}
+              onFocus={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onKeyDownCapture={[Function]}
+              onKeyPressCapture={[Function]}
+              onKeyUp={[Function]}
+              onLoadedMetadataCapture={[Function]}
+              onMouseDown={[Function]}
+              onMouseDownCapture={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              tabIndex="0"
+              type="button"
+            >
+              <IconRightSidebarChevronOpen
+                className="bp_icon_button_module_icon--cb154"
+                height="1.5rem"
+                role="presentation"
+                width="1.5rem"
+              >
+                <AccessibleSVG
+                  className="icon-show bp_icon_button_module_icon--cb154"
+                  height="1.5rem"
+                  viewBox="0 0 24 24"
+                  width="1.5rem"
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="icon-show bp_icon_button_module_icon--cb154"
+                    focusable="false"
+                    height="1.5rem"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="1.5rem"
+                  >
+                    <path
+                      d="M17.707 9.29297C17.3165 8.90245 16.6835 8.90247 16.293 9.29297L14.293 11.293C13.9024 11.6835 13.9024 12.3165 14.293 12.707L16.293 14.707C16.6835 15.0975 17.3165 15.0975 17.707 14.707C18.0975 14.3165 18.0975 13.6835 17.707 13.293L16.4141 12L17.707 10.707C18.0975 10.3165 18.0975 9.68349 17.707 9.29297Z"
+                      fill="#000000"
+                      fill-opacity="0.6"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
+                      fill="#000000"
+                      fill-opacity="0.6"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </AccessibleSVG>
+              </IconRightSidebarChevronOpen>
+            </button>
+          </Button2>
+        </IconButton>
+      </TetherComponent>
+    </Tooltip>
+  </SidebarToggleButton>
+</SidebarToggleButton>
+`;
+
+exports[`components/sidebar-toggle-button/SidebarToggleButton previewModernization feature enabled should render IconButton when previewModernization is enabled and sidebar is open (left direction) 1`] = `
+<SidebarToggleButton
+  direction="left"
+  isOpen={true}
+>
+  <SidebarToggleButton
+    direction="left"
+    intl={
+      {
+        "formatDate": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatRelativeTime": [Function],
+      }
+    }
+    isOpen={true}
+  >
+    <Tooltip
+      constrainToScrollParent={false}
+      constrainToWindow={true}
+      isDisabled={false}
+      position="middle-right"
+      text="Hide Sidebar"
+      theme="default"
+    >
+      <TetherComponent
+        attachment="middle left"
+        bodyElement={<body />}
+        classPrefix="tooltip"
+        constraints={
+          [
+            {
+              "attachment": "together",
+              "to": "window",
+            },
+          ]
+        }
+        enabled={false}
+        renderElementTag="div"
+        renderElementTo={null}
+        targetAttachment="middle right"
+      >
+        <IconButton
+          aria-label="Hide Sidebar"
+          icon={[Function]}
+          key=".0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          size="large"
+          tabIndex="0"
+          variant="high-contrast"
+        >
+          <Button2
+            aria-label="Hide Sidebar"
+            className="bp_icon_button_module_iconButton--cb154 bp_icon_button_module_high-contrast--cb154 bp_icon_button_module_large--cb154"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            tabIndex="0"
+          >
+            <button
+              aria-label="Hide Sidebar"
+              className="bp_icon_button_module_iconButton--cb154 bp_icon_button_module_high-contrast--cb154 bp_icon_button_module_large--cb154"
+              onBlur={[Function]}
+              onClickCapture={[Function]}
+              onFocus={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onKeyDownCapture={[Function]}
+              onKeyPressCapture={[Function]}
+              onKeyUp={[Function]}
+              onLoadedMetadataCapture={[Function]}
+              onMouseDown={[Function]}
+              onMouseDownCapture={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              tabIndex="0"
+              type="button"
+            >
+              <IconRightSidebarChevronOpen
+                className="bp_icon_button_module_icon--cb154"
+                height="1.5rem"
+                role="presentation"
+                width="1.5rem"
+              >
+                <AccessibleSVG
+                  className="icon-show bp_icon_button_module_icon--cb154"
+                  height="1.5rem"
+                  viewBox="0 0 24 24"
+                  width="1.5rem"
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="icon-show bp_icon_button_module_icon--cb154"
+                    focusable="false"
+                    height="1.5rem"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="1.5rem"
+                  >
+                    <path
+                      d="M17.707 9.29297C17.3165 8.90245 16.6835 8.90247 16.293 9.29297L14.293 11.293C13.9024 11.6835 13.9024 12.3165 14.293 12.707L16.293 14.707C16.6835 15.0975 17.3165 15.0975 17.707 14.707C18.0975 14.3165 18.0975 13.6835 17.707 13.293L16.4141 12L17.707 10.707C18.0975 10.3165 18.0975 9.68349 17.707 9.29297Z"
+                      fill="#000000"
+                      fill-opacity="0.6"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
+                      fill="#000000"
+                      fill-opacity="0.6"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </AccessibleSVG>
+              </IconRightSidebarChevronOpen>
+            </button>
+          </Button2>
+        </IconButton>
+      </TetherComponent>
+    </Tooltip>
+  </SidebarToggleButton>
+</SidebarToggleButton>
+`;
+
+exports[`components/sidebar-toggle-button/SidebarToggleButton previewModernization feature enabled should render IconButton when previewModernization is enabled and sidebar is open (right direction) 1`] = `
+<SidebarToggleButton
+  isOpen={true}
+>
+  <SidebarToggleButton
+    intl={
+      {
+        "formatDate": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatRelativeTime": [Function],
+      }
+    }
+    isOpen={true}
+  >
+    <Tooltip
+      constrainToScrollParent={false}
+      constrainToWindow={true}
+      isDisabled={false}
+      position="middle-left"
+      text="Hide Sidebar"
+      theme="default"
+    >
+      <TetherComponent
+        attachment="middle right"
+        bodyElement={<body />}
+        classPrefix="tooltip"
+        constraints={
+          [
+            {
+              "attachment": "together",
+              "to": "window",
+            },
+          ]
+        }
+        enabled={false}
+        renderElementTag="div"
+        renderElementTo={null}
+        targetAttachment="middle left"
+      >
+        <IconButton
+          aria-label="Hide Sidebar"
+          icon={[Function]}
+          key=".0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          size="large"
+          tabIndex="0"
+          variant="high-contrast"
+        >
+          <Button2
+            aria-label="Hide Sidebar"
+            className="bp_icon_button_module_iconButton--cb154 bp_icon_button_module_high-contrast--cb154 bp_icon_button_module_large--cb154"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            tabIndex="0"
+          >
+            <button
+              aria-label="Hide Sidebar"
+              className="bp_icon_button_module_iconButton--cb154 bp_icon_button_module_high-contrast--cb154 bp_icon_button_module_large--cb154"
+              onBlur={[Function]}
+              onClickCapture={[Function]}
+              onFocus={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onKeyDownCapture={[Function]}
+              onKeyPressCapture={[Function]}
+              onKeyUp={[Function]}
+              onLoadedMetadataCapture={[Function]}
+              onMouseDown={[Function]}
+              onMouseDownCapture={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              tabIndex="0"
+              type="button"
+            >
+              <IconRightSidebarChevronClose
+                className="bp_icon_button_module_icon--cb154"
+                height="1.5rem"
+                role="presentation"
+                width="1.5rem"
+              >
+                <AccessibleSVG
+                  className="icon-show bp_icon_button_module_icon--cb154"
+                  height="1.5rem"
+                  viewBox="0 0 24 24"
+                  width="1.5rem"
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="icon-show bp_icon_button_module_icon--cb154"
+                    focusable="false"
+                    height="1.5rem"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="1.5rem"
+                  >
+                    <path
+                      d="M15.707 9.29297C15.3165 8.90245 14.6835 8.90245 14.293 9.29297C13.9024 9.68349 13.9024 10.3165 14.293 10.707L15.5859 12L14.293 13.293C13.9024 13.6835 13.9024 14.3165 14.293 14.707C14.6835 15.0975 15.3165 15.0975 15.707 14.707L17.707 12.707C18.0975 12.3165 18.0975 11.6835 17.707 11.293L15.707 9.29297Z"
+                      fill="#000000"
+                      fill-opacity="0.6"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
+                      fill="#000000"
+                      fill-opacity="0.6"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </AccessibleSVG>
+              </IconRightSidebarChevronClose>
+            </button>
+          </Button2>
+        </IconButton>
+      </TetherComponent>
+    </Tooltip>
+  </SidebarToggleButton>
+</SidebarToggleButton>
+`;
+
 exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as closed 1`] = `
 <SidebarToggleButton
   isOpen={false}
diff --git a/src/icons/general/IconRightSidebarChevronClose.js.flow b/src/icons/general/IconRightSidebarChevronClose.js.flow
new file mode 100644
index 0000000000..9d74b4ee2e
--- /dev/null
+++ b/src/icons/general/IconRightSidebarChevronClose.js.flow
@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+
+import { Icon } from '../iconTypes';
+
+// Copied from Figma - will replace with blueprint icon once available
+const IconRightSidebarChevronClose = ({ className = '', color = '#000000', height = 24, title, width = 24 }: Icon) => (
+    <AccessibleSVG className={`icon-show ${className}`} title={title} width={width} height={height} viewBox="0 0 24 24">
+        <path
+            d="M15.707 9.29297C15.3165 8.90245 14.6835 8.90245 14.293 9.29297C13.9024 9.68349 13.9024 10.3165 14.293 10.707L15.5859 12L14.293 13.293C13.9024 13.6835 13.9024 14.3165 14.293 14.707C14.6835 15.0975 15.3165 15.0975 15.707 14.707L17.707 12.707C18.0975 12.3165 18.0975 11.6835 17.707 11.293L15.707 9.29297Z"
+            fill={color}
+            fill-opacity="0.6"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
+            fill={color}
+            fill-opacity="0.6"
+        />
+    </AccessibleSVG>
+);
+
+export default IconRightSidebarChevronClose;
diff --git a/src/icons/general/IconRightSidebarChevronClose.tsx b/src/icons/general/IconRightSidebarChevronClose.tsx
new file mode 100644
index 0000000000..e093f31bf6
--- /dev/null
+++ b/src/icons/general/IconRightSidebarChevronClose.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+
+import { Icon } from '../iconTypes';
+
+// Copied from Figma - will replace with blueprint icon once available
+const IconRightSidebarChevronClose = ({ className = '', color = '#000000', height = 24, title, width = 24 }: Icon) => (
+    <AccessibleSVG className={`icon-show ${className}`} title={title} width={width} height={height} viewBox="0 0 24 24">
+        <path
+            d="M15.707 9.29297C15.3165 8.90245 14.6835 8.90245 14.293 9.29297C13.9024 9.68349 13.9024 10.3165 14.293 10.707L15.5859 12L14.293 13.293C13.9024 13.6835 13.9024 14.3165 14.293 14.707C14.6835 15.0975 15.3165 15.0975 15.707 14.707L17.707 12.707C18.0975 12.3165 18.0975 11.6835 17.707 11.293L15.707 9.29297Z"
+            fill={color}
+            fill-opacity="0.6"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
+            fill={color}
+            fill-opacity="0.6"
+        />
+    </AccessibleSVG>
+);
+
+export default IconRightSidebarChevronClose;
diff --git a/src/icons/general/IconRightSidebarChevronOpen.js.flow b/src/icons/general/IconRightSidebarChevronOpen.js.flow
new file mode 100644
index 0000000000..2a59a6738a
--- /dev/null
+++ b/src/icons/general/IconRightSidebarChevronOpen.js.flow
@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+
+import { Icon } from '../iconTypes';
+
+// Copied from Figma - will replace with blueprint icon once available
+const IconRightSidebarChevronOpen = ({ className = '', color = '#000000', height = 24, title, width = 24 }: Icon) => (
+    <AccessibleSVG className={`icon-show ${className}`} title={title} width={width} height={height} viewBox="0 0 24 24">
+        <path
+            d="M17.707 9.29297C17.3165 8.90245 16.6835 8.90247 16.293 9.29297L14.293 11.293C13.9024 11.6835 13.9024 12.3165 14.293 12.707L16.293 14.707C16.6835 15.0975 17.3165 15.0975 17.707 14.707C18.0975 14.3165 18.0975 13.6835 17.707 13.293L16.4141 12L17.707 10.707C18.0975 10.3165 18.0975 9.68349 17.707 9.29297Z"
+            fill={color}
+            fill-opacity="0.6"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
+            fill={color}
+            fill-opacity="0.6"
+        />
+    </AccessibleSVG>
+);
+
+export default IconRightSidebarChevronOpen;
diff --git a/src/icons/general/IconRightSidebarChevronOpen.tsx b/src/icons/general/IconRightSidebarChevronOpen.tsx
new file mode 100644
index 0000000000..bd0d28b1fb
--- /dev/null
+++ b/src/icons/general/IconRightSidebarChevronOpen.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+
+import { Icon } from '../iconTypes';
+
+// Copied from Figma - will replace with blueprint icon once available
+const IconRightSidebarChevronOpen = ({ className = '', color = '#000000', height = 24, title, width = 24 }: Icon) => (
+    <AccessibleSVG className={`icon-show ${className}`} title={title} width={width} height={height} viewBox="0 0 24 24">
+        <path
+            d="M17.707 9.29297C17.3165 8.90245 16.6835 8.90247 16.293 9.29297L14.293 11.293C13.9024 11.6835 13.9024 12.3165 14.293 12.707L16.293 14.707C16.6835 15.0975 17.3165 15.0975 17.707 14.707C18.0975 14.3165 18.0975 13.6835 17.707 13.293L16.4141 12L17.707 10.707C18.0975 10.3165 18.0975 9.68349 17.707 9.29297Z"
+            fill={color}
+            fill-opacity="0.6"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M7 4C4.23858 4 2 6.23858 2 9V15C2 17.7614 4.23858 20 7 20H17C19.6753 20 21.8595 17.8989 21.9932 15.2568L22 15V9C22 6.23858 19.7614 4 17 4H7ZM17 6C18.6569 6 20 7.34315 20 9V15L19.9961 15.1543C19.9158 16.7394 18.6051 18 17 18H12V6H17ZM10 18H7C5.34315 18 4 16.6569 4 15V9C4 7.34315 5.34315 6 7 6H10V18Z"
+            fill={color}
+            fill-opacity="0.6"
+        />
+    </AccessibleSVG>
+);
+
+export default IconRightSidebarChevronOpen;