diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
index 24a789b8f..03d470538 100644
--- a/src/__snapshots__/storybook.test.js.snap
+++ b/src/__snapshots__/storybook.test.js.snap
@@ -3524,7 +3524,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -3563,7 +3563,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -3596,7 +3596,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -3630,7 +3630,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -10749,7 +10749,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -10788,7 +10788,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -10821,7 +10821,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -10855,7 +10855,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -10898,7 +10898,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -10942,7 +10942,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -10980,7 +10980,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11019,7 +11019,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11390,7 +11390,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11429,7 +11429,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11462,7 +11462,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11496,7 +11496,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11539,7 +11539,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11583,7 +11583,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11621,7 +11621,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11660,7 +11660,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11871,7 +11871,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11910,7 +11910,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11943,7 +11943,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -11977,7 +11977,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -12020,7 +12020,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -12064,7 +12064,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -12102,7 +12102,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
@@ -12141,7 +12141,7 @@ Array [
       >
         <span
           aria-hidden={false}
-          className="iconWrapper"
+          className="icon iconWrapper"
           role="presentation"
         >
           <svg
diff --git a/src/components/ConfigProvider/ConfigProvider.stories.tsx b/src/components/ConfigProvider/ConfigProvider.stories.tsx
index 6cbc58948..ed1c99d24 100644
--- a/src/components/ConfigProvider/ConfigProvider.stories.tsx
+++ b/src/components/ConfigProvider/ConfigProvider.stories.tsx
@@ -164,32 +164,28 @@ const ThemedComponents = () => {
             </div>
             <br />
             <br />
-            <Tabs onChange={click} activeTab={'tab1'}>
+            <Tabs onChange={click} value={'tab1'}>
                 {tabs.map((tab) => (
                     <Tab key={tab.value} {...tab} />
                 ))}
             </Tabs>
             <br />
             <br />
-            <Tabs onChange={click} activeTab={'tab1'}>
+            <Tabs onChange={click} value={'tab1'}>
                 {iconTabs.map((tab) => (
                     <Tab key={tab.value} {...tab} />
                 ))}
             </Tabs>
             <br />
             <br />
-            <Tabs
-                onChange={click}
-                activeTab={'tab1'}
-                variant={TabVariant.small}
-            >
+            <Tabs onChange={click} value={'tab1'} variant={TabVariant.small}>
                 {tabs.map((tab) => (
                     <Tab key={tab.value} {...tab} />
                 ))}
             </Tabs>
             <br />
             <br />
-            <Tabs onChange={click} activeTab={'tab1'} variant={TabVariant.pill}>
+            <Tabs onChange={click} value={'tab1'} variant={TabVariant.pill}>
                 {tabs.map((tab) => (
                     <Tab key={tab.value} {...tab} />
                 ))}
diff --git a/src/components/Tabs/Tab/Tab.tsx b/src/components/Tabs/Tab/Tab.tsx
index 4a35b5034..3abe4b4c0 100644
--- a/src/components/Tabs/Tab/Tab.tsx
+++ b/src/components/Tabs/Tab/Tab.tsx
@@ -34,7 +34,7 @@ export const Tab: FC<TabProps> = ({
     ]);
 
     const getIcon = (): JSX.Element =>
-        iconExists && <Icon path={icon} className={styles.icon} />;
+        iconExists && <Icon path={icon} classNames={styles.icon} />;
 
     const getLabel = (): JSX.Element =>
         labelExists && <span className={styles.label}>{label}</span>;
diff --git a/src/components/Tabs/Tabs.context.tsx b/src/components/Tabs/Tabs.context.tsx
index 779c5a367..e08b163e7 100644
--- a/src/components/Tabs/Tabs.context.tsx
+++ b/src/components/Tabs/Tabs.context.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 import {
     TabsContextProps,
     ITabsContext,
@@ -8,12 +8,14 @@ import {
 
 const TabsContext = createContext<Partial<ITabsContext>>({});
 
-const TabsProvider = ({ children, onChange, activeTab }: TabsContextProps) => {
-    const [currentActiveTab, setCurrentActiveTab] =
-        useState<TabValue>(activeTab);
+const TabsProvider = ({ children, onChange, value }: TabsContextProps) => {
+    const [currentActiveTab, setCurrentActiveTab] = useState<TabValue>(value);
 
-    const onTabClick = (value: TabValue, e: SelectTabEvent) => {
+    useEffect(() => {
         setCurrentActiveTab(value);
+    }, [value]);
+
+    const onTabClick = (value: TabValue, e: SelectTabEvent) => {
         onChange(value, e);
     };
 
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 468c67204..4d1308aa9 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Tabs, Tab, TabVariant, TabValue } from './';
 import { IconName } from '../Icon';
 
@@ -44,149 +44,218 @@ const scrollableTabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => ({
     ...(i === 4 ? { disabled: true } : {}),
 }));
 
-export const Default = () => (
-    <>
-        <p>Default Tabs</p>
-        <Tabs onChange={_tabClicked} activeTab={'tab1'}>
-            {tabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Tabs with badge</p>
-        <Tabs onChange={_tabClicked} activeTab={'tab1'}>
-            {badgeTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Icon Tabs</p>
-        <Tabs onChange={_tabClicked} activeTab={'tab1'}>
-            {iconTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Icon Label Tabs</p>
-        <Tabs onChange={_tabClicked} activeTab={'tab1'}>
-            {iconLabelTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Scrollable tabs</p>
-        <div style={{ maxWidth: '500px' }}>
-            <Tabs onChange={_tabClicked} activeTab={'tab1'} scrollable>
-                {scrollableTabs.map((tab) => (
+export const Default = () => {
+    const [activeTabs, setActiveTabs] = useState({
+        defaultTab: 'tab1',
+        defaultTabBadge: 'tab1',
+        iconTab: 'tab1',
+        iconLabelTab: 'tab1',
+        scrollableTab: 'tab1',
+    });
+
+    return (
+        <>
+            <p>Default Tabs</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, defaultTab: tab })
+                }
+                value={activeTabs.defaultTab}
+            >
+                {tabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Tabs with badge</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, defaultTabBadge: tab })
+                }
+                value={activeTabs.defaultTabBadge}
+            >
+                {badgeTabs.map((tab) => (
                     <Tab key={tab.value} {...tab} />
                 ))}
             </Tabs>
-        </div>
-    </>
-);
+            <p>Icon Tabs</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, iconTab: tab })
+                }
+                value={activeTabs.iconTab}
+            >
+                {iconTabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Icon Label Tabs</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, iconLabelTab: tab })
+                }
+                value={activeTabs.iconLabelTab}
+            >
+                {iconLabelTabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Scrollable tabs</p>
+            <div style={{ maxWidth: '500px' }}>
+                <Tabs
+                    onChange={(tab) =>
+                        setActiveTabs({ ...activeTabs, scrollableTab: tab })
+                    }
+                    value={activeTabs.scrollableTab}
+                    scrollable
+                >
+                    {scrollableTabs.map((tab) => (
+                        <Tab key={tab.value} {...tab} />
+                    ))}
+                </Tabs>
+            </div>
+        </>
+    );
+};
+
+export const Small = () => {
+    const [activeTabs, setActiveTabs] = useState({
+        defaultTab: 'tab1',
+        defaultTabBadge: 'tab1',
+        iconTab: 'tab1',
+        iconLabelTab: 'tab1',
+        scrollableTab: 'tab1',
+    });
 
-export const Small = () => (
-    <>
-        <p>Default Tabs</p>
-        <Tabs
-            onChange={_tabClicked}
-            activeTab={'tab1'}
-            variant={TabVariant.small}
-        >
-            {tabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Tabs with badge</p>
-        <Tabs
-            onChange={_tabClicked}
-            activeTab={'tab1'}
-            variant={TabVariant.small}
-        >
-            {badgeTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Icon Tabs</p>
-        <Tabs
-            onChange={_tabClicked}
-            activeTab={'tab1'}
-            variant={TabVariant.small}
-        >
-            {iconTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Icon Label Tabs</p>
-        <Tabs
-            onChange={_tabClicked}
-            activeTab={'tab1'}
-            variant={TabVariant.small}
-        >
-            {iconLabelTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Scrollable tabs</p>
-        <div style={{ maxWidth: '500px' }}>
+    return (
+        <>
+            <p>Default Tabs</p>
             <Tabs
-                onChange={_tabClicked}
-                activeTab={'tab1'}
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, defaultTab: tab })
+                }
+                value={activeTabs.defaultTab}
                 variant={TabVariant.small}
-                scrollable
             >
-                {scrollableTabs.map((tab) => (
+                {tabs.map((tab) => (
                     <Tab key={tab.value} {...tab} />
                 ))}
             </Tabs>
-        </div>
-    </>
-);
-
-export const Pill = () => (
-    <>
-        <h3>
-            <b>Experimental (do not use in production)</b>
-        </h3>
-        <p>Default Tabs</p>
-        <Tabs
-            onChange={_tabClicked}
-            activeTab={'tab1'}
-            variant={TabVariant.pill}
-        >
-            {tabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Tabs with badge</p>
-        <Tabs
-            onChange={_tabClicked}
-            activeTab={'tab1'}
-            variant={TabVariant.pill}
-        >
-            {badgeTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Icon Tabs</p>
-        <Tabs
-            onChange={_tabClicked}
-            activeTab={'tab1'}
-            variant={TabVariant.pill}
-        >
-            {iconTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-        <p>Icon Label Tabs</p>
-        <Tabs
-            onChange={_tabClicked}
-            activeTab={'tab1'}
-            variant={TabVariant.pill}
-        >
-            {iconLabelTabs.map((tab) => (
-                <Tab key={tab.value} {...tab} />
-            ))}
-        </Tabs>
-    </>
-);
+            <p>Tabs with badge</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, defaultTabBadge: tab })
+                }
+                value={activeTabs.defaultTabBadge}
+                variant={TabVariant.small}
+            >
+                {badgeTabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Icon Tabs</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, iconTab: tab })
+                }
+                value={activeTabs.iconTab}
+                variant={TabVariant.small}
+            >
+                {iconTabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Icon Label Tabs</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, iconLabelTab: tab })
+                }
+                value={activeTabs.iconLabelTab}
+                variant={TabVariant.small}
+            >
+                {iconLabelTabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Scrollable tabs</p>
+            <div style={{ maxWidth: '500px' }}>
+                <Tabs
+                    onChange={(tab) =>
+                        setActiveTabs({ ...activeTabs, scrollableTab: tab })
+                    }
+                    value={activeTabs.scrollableTab}
+                    variant={TabVariant.small}
+                    scrollable
+                >
+                    {scrollableTabs.map((tab) => (
+                        <Tab key={tab.value} {...tab} />
+                    ))}
+                </Tabs>
+            </div>
+        </>
+    );
+};
 
-function _tabClicked(tab: TabValue): void {
-    console.log(tab);
-}
+export const Pill = () => {
+    const [activeTabs, setActiveTabs] = useState({
+        defaultTab: 'tab1',
+        defaultTabBadge: 'tab1',
+        iconTab: 'tab1',
+        iconLabelTab: 'tab1',
+        scrollableTab: 'tab1',
+    });
+    return (
+        <>
+            <h3>
+                <b>Experimental (do not use in production)</b>
+            </h3>
+            <p>Default Tabs</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, defaultTab: tab })
+                }
+                value={activeTabs.defaultTab}
+                variant={TabVariant.pill}
+            >
+                {tabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Tabs with badge</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, defaultTabBadge: tab })
+                }
+                value={activeTabs.defaultTabBadge}
+                variant={TabVariant.pill}
+            >
+                {badgeTabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Icon Tabs</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, iconTab: tab })
+                }
+                value={activeTabs.iconTab}
+                variant={TabVariant.pill}
+            >
+                {iconTabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+            <p>Icon Label Tabs</p>
+            <Tabs
+                onChange={(tab) =>
+                    setActiveTabs({ ...activeTabs, iconLabelTab: tab })
+                }
+                value={activeTabs.iconLabelTab}
+                variant={TabVariant.pill}
+            >
+                {iconLabelTabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+        </>
+    );
+};
diff --git a/src/components/Tabs/Tabs.test.tsx b/src/components/Tabs/Tabs.test.tsx
index abf8fc40a..f74279851 100644
--- a/src/components/Tabs/Tabs.test.tsx
+++ b/src/components/Tabs/Tabs.test.tsx
@@ -31,7 +31,7 @@ describe('Panel', () => {
 
     beforeEach(() => {
         wrapper = mount(
-            <Tabs onChange={tabClick} activeTab={'tab1'}>
+            <Tabs onChange={tabClick} value={'tab1'}>
                 {tabs.map((tab) => (
                     <Tab key={tab.value} {...tab} />
                 ))}
@@ -42,7 +42,7 @@ describe('Panel', () => {
     test('tabs snapshot', () => {
         expect(
             create(
-                <Tabs onChange={tabClick} activeTab={'tab1'}>
+                <Tabs onChange={tabClick} value={'tab1'}>
                     {tabs.map((tab) => (
                         <Tab key={tab.value} {...tab} />
                     ))}
@@ -59,6 +59,16 @@ describe('Panel', () => {
         wrapper.find('.tab').at(2).simulate('click');
         expect(tabClick).toHaveBeenCalledTimes(1);
         expect(tabClick).toHaveBeenCalledWith('tab3', expect.any(Object));
+    });
+
+    test('setting value changes tab', async () => {
+        wrapper = mount(
+            <Tabs onChange={tabClick} value={'tab3'}>
+                {tabs.map((tab) => (
+                    <Tab key={tab.value} {...tab} />
+                ))}
+            </Tabs>
+        );
         expect(wrapper.find('.tab').at(2).hasClass('active')).toEqual(true);
     });
 });
diff --git a/src/components/Tabs/Tabs.types.ts b/src/components/Tabs/Tabs.types.ts
index 07ace4689..e959104c0 100644
--- a/src/components/Tabs/Tabs.types.ts
+++ b/src/components/Tabs/Tabs.types.ts
@@ -21,7 +21,7 @@ export enum TabVariant {
 export interface TabsContextProps {
     children: React.ReactNode;
     onChange: OnChangeHandler;
-    activeTab?: TabValue;
+    value?: TabValue;
 }
 
 export interface ITabsContext {
@@ -31,7 +31,7 @@ export interface ITabsContext {
 
 export interface TabProps extends React.ButtonHTMLAttributes<any> {
     /**
-     * The value of the tab.
+     * Active value of the tab.
      */
     value: TabValue;
     /**
@@ -64,7 +64,7 @@ export interface TabsProps {
     /**
      * The default tab to select
      */
-    activeTab?: TabValue;
+    value?: TabValue;
     /**
      * Callback called on click of a tab
      * @param value {TabValue}
diff --git a/src/components/Tabs/Tabs/index.tsx b/src/components/Tabs/Tabs/index.tsx
index f3c93a87a..76705cecf 100644
--- a/src/components/Tabs/Tabs/index.tsx
+++ b/src/components/Tabs/Tabs/index.tsx
@@ -4,9 +4,9 @@ import { TabsProvider } from '../Tabs.context';
 import { AnimatedTabs } from './AnimatedTabs';
 
 export const Tabs: FC<TabsProps> = (props) => {
-    const { activeTab, onChange, children } = props;
+    const { value, onChange, children } = props;
     return (
-        <TabsProvider onChange={onChange} activeTab={activeTab}>
+        <TabsProvider onChange={onChange} value={value}>
             <AnimatedTabs {...props}>{children}</AnimatedTabs>
         </TabsProvider>
     );
diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index 1ae3aa0df..63f4b5de4 100644
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Panel tabs snapshot 1`] = `
     >
       <span
         aria-hidden={false}
-        className="iconWrapper"
+        className="icon iconWrapper"
         role="presentation"
       >
         <svg
@@ -59,7 +59,7 @@ exports[`Panel tabs snapshot 1`] = `
     >
       <span
         aria-hidden={false}
-        className="iconWrapper"
+        className="icon iconWrapper"
         role="presentation"
       >
         <svg
@@ -97,7 +97,7 @@ exports[`Panel tabs snapshot 1`] = `
     >
       <span
         aria-hidden={false}
-        className="iconWrapper"
+        className="icon iconWrapper"
         role="presentation"
       >
         <svg
@@ -136,7 +136,7 @@ exports[`Panel tabs snapshot 1`] = `
     >
       <span
         aria-hidden={false}
-        className="iconWrapper"
+        className="icon iconWrapper"
         role="presentation"
       >
         <svg