diff --git a/packages/ui-components/.storybook/preview.js b/packages/ui-components/.storybook/preview.js
new file mode 100644
index 0000000000..a8f2d55d73
--- /dev/null
+++ b/packages/ui-components/.storybook/preview.js
@@ -0,0 +1,5 @@
+import { initTheme } from '../src/theme';
+import { initIcons } from '../src/components/Icons';
+
+initTheme();
+initIcons();
diff --git a/packages/ui-components/stories/UICallout.story.tsx b/packages/ui-components/stories/UICallout.story.tsx
index 5ad8eb9449..829c5783b4 100644
--- a/packages/ui-components/stories/UICallout.story.tsx
+++ b/packages/ui-components/stories/UICallout.story.tsx
@@ -2,9 +2,7 @@ import React, { useState } from 'react';
 import { UIDefaultButton, UIIconButton } from '../src/components/UIButton';
 import { UICallout, UICalloutContentPadding } from '../src/components/UICallout';
 import { UIFocusZone } from '../src/components/UIFocusZone';
-import { initIcons, UiIcons } from '../src/components/Icons';
-
-initIcons();
+import { UiIcons } from '../src/components/Icons';
 
 export default { title: 'Dropdowns/Callout' };
 
diff --git a/packages/ui-components/stories/UICalloutCollisionTransform.story.tsx b/packages/ui-components/stories/UICalloutCollisionTransform.story.tsx
index b63eed819a..f7f3f764d7 100644
--- a/packages/ui-components/stories/UICalloutCollisionTransform.story.tsx
+++ b/packages/ui-components/stories/UICalloutCollisionTransform.story.tsx
@@ -10,13 +10,10 @@ import {
     UITextInput,
     UICallout,
     UICheckbox,
-    initIcons,
     CalloutCollisionTransform
 } from '../src/components';
 import { data } from '../test/__mock__/select-data';
 
-initIcons();
-
 export default { title: 'Dialogs/Dialogs' };
 
 enum ControlTypes {
diff --git a/packages/ui-components/stories/UICheckbox.story.tsx b/packages/ui-components/stories/UICheckbox.story.tsx
index 2fc7bff66f..01a771acf6 100644
--- a/packages/ui-components/stories/UICheckbox.story.tsx
+++ b/packages/ui-components/stories/UICheckbox.story.tsx
@@ -4,10 +4,6 @@ import { Text, Stack } from '@fluentui/react';
 
 import { UICheckbox } from '../src/components/UICheckbox';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Basic Inputs/Checkbox' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
diff --git a/packages/ui-components/stories/UIChoiceGroup.story.tsx b/packages/ui-components/stories/UIChoiceGroup.story.tsx
index 620c992fc3..e02e04f84f 100644
--- a/packages/ui-components/stories/UIChoiceGroup.story.tsx
+++ b/packages/ui-components/stories/UIChoiceGroup.story.tsx
@@ -4,10 +4,6 @@ import { Text, Stack } from '@fluentui/react';
 import type { ChoiceGroupOption } from '../src/components/UIChoiceGroup';
 import { UIChoiceGroup } from '../src/components/UIChoiceGroup';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Basic Inputs/ChoiceGroup' };
 
 const props: any = {
diff --git a/packages/ui-components/stories/UICombobox.story.tsx b/packages/ui-components/stories/UICombobox.story.tsx
index 1b84e26718..a8ec6e157e 100644
--- a/packages/ui-components/stories/UICombobox.story.tsx
+++ b/packages/ui-components/stories/UICombobox.story.tsx
@@ -12,11 +12,8 @@ import {
 import { UICheckbox } from '../src/components/UICheckbox';
 import { data, groupsData } from '../test/__mock__/select-data';
 
-import { initIcons } from '../src/components/Icons';
 import { UITextInput } from '../src/components';
 
-initIcons();
-
 export default { title: 'Dropdowns/Combobox' };
 
 export const SearchHighlight = (): JSX.Element => (
diff --git a/packages/ui-components/stories/UIContextualMenu.story.tsx b/packages/ui-components/stories/UIContextualMenu.story.tsx
index bac38f00a6..7f981fbea2 100644
--- a/packages/ui-components/stories/UIContextualMenu.story.tsx
+++ b/packages/ui-components/stories/UIContextualMenu.story.tsx
@@ -10,12 +10,10 @@ import {
 } from '../src/components/UIContextualMenu';
 import { UIDefaultButton, UIIconButton } from '../src/components/UIButton';
 import { UIDirectionalHint } from '../src/components/UITreeDropdown';
-import { initIcons, UiIcons } from '../src/components/Icons';
+import { UiIcons } from '../src/components/Icons';
 import { UIDropdown } from '../src/components/UIDropdown';
 import { UIToggle } from '../src/components/UIToggle';
 
-initIcons();
-
 export default { title: 'Dropdowns/ContextualMenu' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
 function getItems(iconsToLeft = false): UIContextualMenuItem[] {
diff --git a/packages/ui-components/stories/UICreateSelect.story.tsx b/packages/ui-components/stories/UICreateSelect.story.tsx
index 32cdb2f258..43a508b397 100644
--- a/packages/ui-components/stories/UICreateSelect.story.tsx
+++ b/packages/ui-components/stories/UICreateSelect.story.tsx
@@ -10,9 +10,6 @@ import {
     UICreateSelectInstance
 } from '../src/components/UICreateSelect';
 import { UILabel } from '../src/components/UILabel';
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
 
 export default { title: 'Dropdowns/CreateSelect' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
diff --git a/packages/ui-components/stories/UIDatePicker.story.tsx b/packages/ui-components/stories/UIDatePicker.story.tsx
index fb54354943..955566f5ab 100644
--- a/packages/ui-components/stories/UIDatePicker.story.tsx
+++ b/packages/ui-components/stories/UIDatePicker.story.tsx
@@ -4,10 +4,6 @@ import { Text, Stack } from '@fluentui/react';
 
 import { UIDatePicker } from '../src/components/UIDatePicker';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Basic Inputs/DatePicker' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
diff --git a/packages/ui-components/stories/UIDialog.story.tsx b/packages/ui-components/stories/UIDialog.story.tsx
index ec9b540a3c..2c5f23ef14 100644
--- a/packages/ui-components/stories/UIDialog.story.tsx
+++ b/packages/ui-components/stories/UIDialog.story.tsx
@@ -10,10 +10,6 @@ import { UIDropdown } from '../src/components/UIDropdown';
 import { UIComboBox } from '../src/components/UIComboBox';
 import { UICheckbox } from '../src/components/UICheckbox';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Dialogs/Dialogs' };
 
 const stackTokens: IStackTokens = { childrenGap: 40 };
diff --git a/packages/ui-components/stories/UIDropdown.story.tsx b/packages/ui-components/stories/UIDropdown.story.tsx
index 5ba60d228d..77a6cdd21c 100644
--- a/packages/ui-components/stories/UIDropdown.story.tsx
+++ b/packages/ui-components/stories/UIDropdown.story.tsx
@@ -5,14 +5,11 @@ import {
     UISelectableOptionMenuItemType,
     UICheckbox,
     UIDropdown,
-    initIcons,
     UISelectableOption,
     UITextInput
 } from '../src/components';
 import { data, shortData, groupsData } from '../test/__mock__/select-data';
 
-initIcons();
-
 export default { title: 'Dropdowns/Dropdown' };
 
 export const Basic = (): JSX.Element => (
diff --git a/packages/ui-components/stories/UIFlexibleTable.story.tsx b/packages/ui-components/stories/UIFlexibleTable.story.tsx
index 6e5e196805..6fe55fa349 100644
--- a/packages/ui-components/stories/UIFlexibleTable.story.tsx
+++ b/packages/ui-components/stories/UIFlexibleTable.story.tsx
@@ -25,10 +25,6 @@ import {
 
 import { arrayMove } from 'react-movable';
 
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
-
 export default { title: 'Tables/UIFlexibleTable' };
 const tableIds = ['table1', 'table2'];
 
diff --git a/packages/ui-components/stories/UIIcon.story.tsx b/packages/ui-components/stories/UIIcon.story.tsx
index b395b5c0ee..32251a41c2 100644
--- a/packages/ui-components/stories/UIIcon.story.tsx
+++ b/packages/ui-components/stories/UIIcon.story.tsx
@@ -2,12 +2,9 @@ import React from 'react';
 import type { IColumn } from '@fluentui/react';
 import { DetailsList, SelectionMode } from '@fluentui/react';
 import { UIIcon } from '../src/components/UIIcon';
-import { initIcons, UiIcons } from '../src/components/Icons';
 
 export default { title: 'Utilities/Icons' };
 
-initIcons();
-
 const items: any = [];
 for (const icon in UiIcons) {
     items.push(icon);
diff --git a/packages/ui-components/stories/UILabel.story.tsx b/packages/ui-components/stories/UILabel.story.tsx
index 10c6b0422d..d5c427f03e 100644
--- a/packages/ui-components/stories/UILabel.story.tsx
+++ b/packages/ui-components/stories/UILabel.story.tsx
@@ -2,9 +2,6 @@ import React from 'react';
 import type { IStackTokens } from '@fluentui/react';
 import { Text, Stack } from '@fluentui/react';
 import { UILabel } from '../src/components/UILabel';
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
 
 export default { title: 'Basic Inputs/Label' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
diff --git a/packages/ui-components/stories/UILoader.story.tsx b/packages/ui-components/stories/UILoader.story.tsx
index af6a41801b..4c0d2ea134 100644
--- a/packages/ui-components/stories/UILoader.story.tsx
+++ b/packages/ui-components/stories/UILoader.story.tsx
@@ -3,13 +3,11 @@ import type { IStackTokens } from '@fluentui/react';
 import { Text, Stack, SpinnerSize } from '@fluentui/react';
 
 import { UILoader } from '../src/components/UILoader';
-import { initIcons } from '../src/components/Icons';
 import { UIDefaultButton } from '../src/components/UIButton';
 import { UIDialog } from '../src/components/UIDialog';
 
 export default { title: 'Progress/Loader' };
 
-initIcons();
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
 export const Loaders = () => (
diff --git a/packages/ui-components/stories/UIQuickNavigation.story.tsx b/packages/ui-components/stories/UIQuickNavigation.story.tsx
index 15c5daf69f..994e705bf8 100644
--- a/packages/ui-components/stories/UIQuickNavigation.story.tsx
+++ b/packages/ui-components/stories/UIQuickNavigation.story.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import {
     UIQuickNavigation,
     UIDefaultButton,
-    initIcons,
     UITextInput,
     setQuickNavigationKey,
     UIQuickNavigationOffset
@@ -11,8 +10,6 @@ import {
 
 export default { title: 'Utilities/Quick Navigation' };
 
-initIcons();
-
 const value = {
     name: 'Hello, world!',
     html: '<span><strong>Tag:</strong> name</span>'
@@ -67,9 +64,14 @@ export const External = () => {
 };
 
 export const ExternalWithCustomOffset = () => {
-    return <QuickNavigation inline={false} offsets={[
-        { y: 30, x: 0},
-        { y: 0, x: 30},
-        { y: -15, x: -15}
-    ]} />;
+    return (
+        <QuickNavigation
+            inline={false}
+            offsets={[
+                { y: 30, x: 0 },
+                { y: 0, x: 30 },
+                { y: -15, x: -15 }
+            ]}
+        />
+    );
 };
diff --git a/packages/ui-components/stories/UISearchBox.story.tsx b/packages/ui-components/stories/UISearchBox.story.tsx
index 838524fb0a..ffa67871e3 100644
--- a/packages/ui-components/stories/UISearchBox.story.tsx
+++ b/packages/ui-components/stories/UISearchBox.story.tsx
@@ -3,14 +3,11 @@ import type { ISearchBoxProps, IStackTokens } from '@fluentui/react';
 import { Text, Stack } from '@fluentui/react';
 
 import { UISearchBox } from '../src/components/UISearchBox';
-import { initIcons } from '../src/components/Icons';
 import { UICheckbox } from '../src/components';
 
 export default { title: 'Basic Inputs/Search' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
-initIcons();
-
 export const SearchBox = () => {
     const [query, setQuery] = useState('');
 
diff --git a/packages/ui-components/stories/UITextInput.story.tsx b/packages/ui-components/stories/UITextInput.story.tsx
index 6adaebeeb3..de34697d35 100644
--- a/packages/ui-components/stories/UITextInput.story.tsx
+++ b/packages/ui-components/stories/UITextInput.story.tsx
@@ -4,12 +4,9 @@ import { Text, Stack, Separator } from '@fluentui/react';
 
 import { UITextInput } from '../src/components/UIInput';
 import { UICheckbox } from '../src/components/UICheckbox';
-import { initIcons } from '../src/components/Icons';
 
 export default { title: 'Basic Inputs/Input' };
 
-initIcons();
-
 const stackTokens: IStackTokens = { childrenGap: 40 };
 const iconFolderProps = { iconName: 'FolderOpened' };
 
diff --git a/packages/ui-components/stories/UIToggleGroup.story.tsx b/packages/ui-components/stories/UIToggleGroup.story.tsx
index e50a1232e1..26e83509c8 100644
--- a/packages/ui-components/stories/UIToggleGroup.story.tsx
+++ b/packages/ui-components/stories/UIToggleGroup.story.tsx
@@ -2,9 +2,6 @@ import React, { useState } from 'react';
 import type { IStackTokens } from '@fluentui/react';
 import { Text, Stack } from '@fluentui/react';
 import { UIToggleGroup } from '../src/components/UIToggleGroup';
-import { initIcons } from '../src/components/Icons';
-
-initIcons();
 
 export default { title: 'Basic Inputs/Toggle/Group' };
 const stackTokens: IStackTokens = { childrenGap: 40 };
diff --git a/packages/ui-components/stories/UITooltip.story.tsx b/packages/ui-components/stories/UITooltip.story.tsx
index 87074dd8a1..2fe24020eb 100644
--- a/packages/ui-components/stories/UITooltip.story.tsx
+++ b/packages/ui-components/stories/UITooltip.story.tsx
@@ -2,12 +2,9 @@ import React from 'react';
 
 import { UITooltip, UITooltipUtils } from '../src/components/UITooltip';
 import { UIDefaultButton } from '../src/components/UIButton';
-import { initIcons } from '../src/components/Icons';
 
 export default { title: 'Dropdowns/Tooltip' };
 
-initIcons();
-
 const value = {
     name: 'Hello, world!',
     html: '<span><strong>Tag:</strong> name</span>'
diff --git a/packages/ui-components/stories/UITranslationInput.story.tsx b/packages/ui-components/stories/UITranslationInput.story.tsx
index 747b541306..c9c5ee8a8f 100644
--- a/packages/ui-components/stories/UITranslationInput.story.tsx
+++ b/packages/ui-components/stories/UITranslationInput.story.tsx
@@ -4,7 +4,7 @@ import type { IStackTokens } from '@fluentui/react';
 import { Stack } from '@fluentui/react';
 import type { I18nBundle, TranslationEntry } from '../src/components/UITranslationInput';
 import { TranslationTextPattern, UITranslationInput } from '../src/components/UITranslationInput';
-import { initIcons, UiIcons } from '../src/components/Icons';
+import { UiIcons } from '../src/components/Icons';
 import { UITable } from '../src/components/UITable';
 import type { UIColumn } from '../src/components/UITable';
 import { UIIconButton } from '../src/components/UIButton';
@@ -26,8 +26,6 @@ interface CustomTranslationEntry extends TranslationEntry {
     dummyPath: string;
 }
 
-initIcons();
-
 const stackTokens: IStackTokens = { childrenGap: 60 };
 
 const I18N_BUNDLE_KEY = 'ui-components-i18n-bundle';
diff --git a/packages/ui-components/stories/Utilities.story.tsx b/packages/ui-components/stories/Utilities.story.tsx
index 0e7b0300bd..d00934c294 100644
--- a/packages/ui-components/stories/Utilities.story.tsx
+++ b/packages/ui-components/stories/Utilities.story.tsx
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 import { Stack } from '@fluentui/react';
 import type { IStackTokens } from '@fluentui/react';
-import { initIcons, UICallout } from '../src/components';
-
-initIcons();
+import { UICallout } from '../src/components';
 
 export default { title: 'Utilities/Misc' };
 
@@ -15,11 +13,12 @@ const getContent = (name: string): JSX.Element => {
             style={{
                 padding: 10
             }}>
-            {name}<br />
-            lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-            nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt
+            {name}
+            <br />
+            lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt
         </div>
     );
 };