diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 3d7b0c92..c9868de2 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -34,7 +34,9 @@ Cross out all that don't apply with ~~ ~~ around it like ~~this~~
   - [ ] Have you updated the dependency graph?
   - [ ] Have you updated the docs?
 - [ ] Do you need to update the package version?
-  - [ ] Did you update the example pages in /public?
+  - [ ] Did you update the example pages in `.storybook/assets`?
+- [ ] Were any changes made to the top level optics.css file?
+  - [ ] Were those changes reflected in the other top level files?
 
 ## Screenshots
 
diff --git a/.storybook/assets/example-layout.html b/.storybook/assets/example-layout.html
index 7bdc3299..aaef4d4c 100644
--- a/.storybook/assets/example-layout.html
+++ b/.storybook/assets/example-layout.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.3.0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.3.1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <script type="module" src="https://esm.sh/invokers-polyfill"></script>
     <title>Optics Example Layout</title>
diff --git a/.storybook/assets/login-layout.html b/.storybook/assets/login-layout.html
index 1c71390b..ab66a38c 100644
--- a/.storybook/assets/login-layout.html
+++ b/.storybook/assets/login-layout.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.3.0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.3.1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <title>Optics Login Layout</title>
     <style>
diff --git a/.storybook/assets/spinner-layout.html b/.storybook/assets/spinner-layout.html
index ecb2b76d..32956d92 100644
--- a/.storybook/assets/spinner-layout.html
+++ b/.storybook/assets/spinner-layout.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.3.0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.3.1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <title>Optics Spinner Layout</title>
     <style>
diff --git a/package.json b/package.json
index aa81993f..a7394866 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "packageManager": "yarn@4.8.1",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",
   "scripts": {
     "test": "exit 0",
     "build": "yarn build:css && yarn build:css-min && yarn build:tokens && yarn build:files",
-    "build:css": "postcss src/optics.css -o dist/css/optics.css",
-    "build:css-min": "postcss src/optics.css -o dist/css/optics.min.css --env=minify",
+    "build:css": "postcss 'src/optics*.css' -d dist/css",
+    "build:css-min": "postcss 'src/optics*.css' -d dist/css --ext .min.css --env=minify",
     "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
     "build:files": "mkdir -p dist/css/addons; cp LICENSE README.md package.json dist/; cp -rL src/addons src/core src/components dist/css",
     "storybook": "storybook dev -p 6006 --docs",
diff --git a/src/optics+feather_icons.css b/src/optics+feather_icons.css
new file mode 100644
index 00000000..26d04015
--- /dev/null
+++ b/src/optics+feather_icons.css
@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/feather_icons.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';
diff --git a/src/optics+lucide_icons.css b/src/optics+lucide_icons.css
new file mode 100644
index 00000000..8e2bfd9a
--- /dev/null
+++ b/src/optics+lucide_icons.css
@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/lucide_icons.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';
diff --git a/src/optics+material_outlined_variable.css b/src/optics+material_outlined_variable.css
new file mode 100644
index 00000000..034916c3
--- /dev/null
+++ b/src/optics+material_outlined_variable.css
@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/material_symbols_outlined_variable.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';
diff --git a/src/optics+phosphor_icons.css b/src/optics+phosphor_icons.css
new file mode 100644
index 00000000..4a703227
--- /dev/null
+++ b/src/optics+phosphor_icons.css
@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/phosphor_icons.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';
diff --git a/src/optics+tabler_icons.css b/src/optics+tabler_icons.css
new file mode 100644
index 00000000..6dee45ad
--- /dev/null
+++ b/src/optics+tabler_icons.css
@@ -0,0 +1,17 @@
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset';
+
+/* Fonts */
+@import 'core/fonts/text_fonts.css';
+@import 'addons/fonts/tabler_icons.css';
+
+/* Tokens */
+@import 'core/tokens';
+
+/* Base styles and utilities */
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+/* Components */
+@import 'components';
diff --git a/src/stories/Components/Icon/Icon.mdx b/src/stories/Components/Icon/Icon.mdx
index 17458e65..0a01a01c 100644
--- a/src/stories/Components/Icon/Icon.mdx
+++ b/src/stories/Components/Icon/Icon.mdx
@@ -56,6 +56,46 @@ Icon can be used as a standalone component, however, it does have a few dependen
 
 Optics supports a variety of [Additional icon libraries](?path=/docs/overview-addons--docs) that can be imported. Due to the nature of these libraries, not all of the same icon class modifiers may be available.
 
+There are two ways these icon libraries can be used.
+
+First is as an addon. This means that the default Material Symbols Outlined icons will still be loaded and both can be used.
+
+```css
+@import '@rolemodel/optics';
+@import '@rolemodel/optics/dist/css/addons/fonts/phosphor_icons';
+```
+
+Second is to use an alternate Optics import that does not include the default Material Symbols Outlined icons, and only includes the additional icon library of your choice.
+
+```css
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons';
+```
+
+### Material Symbols Outline Variable Icons
+
+Optics ships with a simplified version of [Material Symbols Outlined](https://fonts.google.com/icons?icon.style=Outlined). It only includes the font weight variable aspect of the icon library which means you won't be able to utilize the fill, or emphasis properties.
+If your app does want to use the full Material Symbols Outlined library, you can import the full library by using the addon shown below.
+This will increase the page load time but will allow you to use the full capabilities of the icon library.
+
+```css
+@import '@rolemodel/optics/dist/css/optics+material_symbols_outlined_variable';
+```
+
+```html
+<i class="icon ph ph-smiley"></i>
+```
+
+The filled, size and weight modifiers can be used with Phosphor Icons.
+
+Phosphor adds `.icon--weight-thin` but does not support `.icon--weight-semi-bold`.
+It also adds a dual tone variation by replacing `.ph` with `.ph-duotone`.
+
+```html
+<i class="icon ph-duotone ph-smiley"></i>
+```
+
+Note: Phosphor Icons do not support the use of emphasis variations or the use of `.icon--filled` in combination with `.ph-duotone` or any weight variations.
+
 ### Phosphor Icons
 
 [Phosphor Icons](https://phosphoricons.com/) can be created with the `<i>` tag and uses the `.ph` prefix with `.ph-{name}` to define a specific icon.
@@ -63,6 +103,8 @@ Optics supports a variety of [Additional icon libraries](?path=/docs/overview-ad
 ```css
 @import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/phosphor_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons';
 ```
 
 ```html
@@ -87,6 +129,8 @@ Note: Phosphor Icons do not support the use of emphasis variations or the use of
 ```css
 @import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/tabler_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+tabler_icons';
 ```
 
 ```html
@@ -114,6 +158,8 @@ Note: Tabler Icons do not support the use of weight or emphasis variations.
 ```css
 @import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/feather_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+feather_icons';
 ```
 
 ```html
@@ -139,6 +185,8 @@ you can use the Feather Icons for a smaller icon pack instead. It is important t
 ```css
 @import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/lucide_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+lucide_icons';
 ```
 
 ```html
diff --git a/src/stories/Overview/Addons.mdx b/src/stories/Overview/Addons.mdx
index 7808d63e..11c4b2a5 100644
--- a/src/stories/Overview/Addons.mdx
+++ b/src/stories/Overview/Addons.mdx
@@ -33,27 +33,41 @@ Optics supports alternative icon libraries. It currently supports
 - [Feather](https://feathericons.com/)
 - [Lucide](https://lucide.dev/icons/)
 
-These can be imported alongside the base design system to provide additional icon options.
+These can be imported alongside the base design system to provide additional icon options. They can also be integrated with the base design system instead of as an addon if you don't want to use the default Material Symbols Outlined icons. This will reduce the page load time by not loading the Material Symbols Outlined icons.
+Note: This alternate import approach (optics+icon_library) supports the minified versions as well. Just add `.min.css` to the end of the file name.
 
 For more information on how to use these icons, see the [Icon Component](?path=/docs/components-icon--docs).
 
 ```css
-@import '@rolemodel/optics';
-
 /* Full Material Symbols Outlined Package */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/material_symbols_outlined_variable';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+material_symbols_outlined_variable';
 
 /* Phosphor Icons */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/phosphor_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons';
 
 /* Tabler Icons */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/tabler_icons';
+/* Or */
+@import '@@rolemodel/optics/dist/css/optics+tabler_icons';
 
 /* Feather Icons */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/feather_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+feather_icons';
 
 /* Lucide Icons (a fork of feather with more icons) */
+@import '@rolemodel/optics';
 @import '@rolemodel/optics/dist/css/addons/fonts/lucide_icons';
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+lucide_icons';
 ```
 
 ## Tom Select
diff --git a/src/stories/Overview/Introduction.mdx b/src/stories/Overview/Introduction.mdx
index 9a002836..996abb1e 100644
--- a/src/stories/Overview/Introduction.mdx
+++ b/src/stories/Overview/Introduction.mdx
@@ -76,6 +76,10 @@ You can add this import to the top of your root level `css` file.
 @import '@rolemodel/optics/dist/css/optics'; /* Using a different compiler */
 /* Or */
 @import '@rolemodel/optics/dist/css/optics.min.css'; /* If you want a single file with all the styles in it. */
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons.css'; /* Using a different icon pack */
+/* Or */
+@import '@rolemodel/optics/dist/css/optics+phosphor_icons.min.css'; /* If you want a single file with all the styles in it and a different icon pack. */
 ```
 
 ### Importing without a compiler
@@ -88,6 +92,11 @@ Add a link in your HTML head or an `@import` to the top of your root level `css`
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@[desired version]/dist/css/optics.min.css"
 />
+<!-- Or -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@[desired version]/dist/css/optics+phosphor_icons.min.css"
+/>
 ```
 
 ```css