diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx
new file mode 100644
index 0000000000..d8b881b7e8
--- /dev/null
+++ b/libs/components/src/icon/icon.mdx
@@ -0,0 +1,99 @@
+import { Meta, Story, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./icon.stories";
+
+
+
+# Icon Use Instructions
+
+- Icons will generally be attached to the associated Jira task.
+ - Designers should minify any SVGs before attaching them to Jira using a tool like
+ [SVGOMG](https://jakearchibald.github.io/svgomg/).
+ - **Note:** Ensure the "Remove viewbox" option is toggled off if responsive resizing of the icon
+ is desired.
+
+## Developer Instructions
+
+1. **Download the SVG** and import it as an `.svg` initially into the IDE of your choice.
+
+ - The SVG should be formatted using either a built-in formatter or an external tool like
+ [SVG Formatter Beautifier](https://codebeautify.org/svg-formatter-beautifier) to make applying
+ classes easier.
+
+2. **Rename the file** as a `.icon.ts` TypeScript file.
+
+3. **Import** `svgIcon` from `@bitwarden/components`.
+
+4. **Define and export** a `const` to represent your `svgIcon`.
+
+ ```typescript
+ export const ExampleIcon = svgIcon`