diff --git a/change/@microsoft-fast-components-86b3473d-11b0-4783-ab8c-6e102807d0c9.json b/change/@microsoft-fast-components-86b3473d-11b0-4783-ab8c-6e102807d0c9.json
new file mode 100644
index 00000000000..a5ae59e001c
--- /dev/null
+++ b/change/@microsoft-fast-components-86b3473d-11b0-4783-ab8c-6e102807d0c9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "flex items should be aligned on cross axis.",
+  "packageName": "@microsoft/fast-components",
+  "email": "srdsecond@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-components/src/button/fixtures/button.html b/packages/web-components/fast-components/src/button/fixtures/button.html
index 926e8f539c1..751cb19cc59 100644
--- a/packages/web-components/fast-components/src/button/fixtures/button.html
+++ b/packages/web-components/fast-components/src/button/fixtures/button.html
@@ -78,3 +78,24 @@ <h2>With aria-label</h2>
     <input type="text" name="test-2" />
     <fast-button type="reset">Reset</fast-button>
 </form>
+
+<h2>One default, one with start slot, and one with end slot</h2>
+<div>
+    <fast-button>Default</fast-button>
+    <fast-button>
+        SVG in Start
+        <svg slot="start" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+            />
+        </svg>
+    </fast-button>
+    <fast-button>
+        SVG in End
+        <svg slot="end" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+            />
+        </svg>
+    </fast-button>
+</div>
diff --git a/packages/web-components/fast-components/src/number-field/fixtures/number-field.html b/packages/web-components/fast-components/src/number-field/fixtures/number-field.html
index b84323dfb8c..b72122932b4 100644
--- a/packages/web-components/fast-components/src/number-field/fixtures/number-field.html
+++ b/packages/web-components/fast-components/src/number-field/fixtures/number-field.html
@@ -128,3 +128,20 @@ <h2>In a form</h2>
     ></fast-number-field>
     <input type="submit" value="submit" />
 </form>
+
+<h2>One default, one with start slot, and one with end slot</h2>
+<fast-number-field></fast-number-field>
+<fast-number-field>
+    <svg slot="start" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+        />
+    </svg>
+</fast-number-field>
+<fast-number-field>
+    <svg slot="end" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+        />
+    </svg>
+</fast-number-field>
diff --git a/packages/web-components/fast-components/src/number-field/number-field.styles.ts b/packages/web-components/fast-components/src/number-field/number-field.styles.ts
index 45d0474c909..4d91c693858 100644
--- a/packages/web-components/fast-components/src/number-field/number-field.styles.ts
+++ b/packages/web-components/fast-components/src/number-field/number-field.styles.ts
@@ -55,6 +55,7 @@ export const numberFieldStyles: FoundationElementTemplate<
         border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid ${accentFillRest};
         height: calc(${heightNumber} * 1px);
+        align-items: baseline;
     }
 
     .control {
@@ -98,6 +99,13 @@ export const numberFieldStyles: FoundationElementTemplate<
         visibility: hidden;
     }
 
+    .start,
+    .control,
+    .controls,
+    .end {
+        align-self: center;
+    }
+
     .start,
     .end {
         margin: auto;
diff --git a/packages/web-components/fast-components/src/search/fixtures/search.html b/packages/web-components/fast-components/src/search/fixtures/search.html
index d1d9784d013..bd8b76f8eff 100644
--- a/packages/web-components/fast-components/src/search/fixtures/search.html
+++ b/packages/web-components/fast-components/src/search/fixtures/search.html
@@ -113,3 +113,20 @@ <h2>In a form</h2>
     <fast-search name="fname" aria-label="Text field with aria-label"></fast-search>
     <input type="submit" value="submit" />
 </form>
+
+<h2>One default, one with start slot, and one with end slot</h2>
+<fast-search></fast-search>
+<fast-search>
+    <svg slot="start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path
+            d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+        />
+    </svg>
+</fast-search>
+<fast-search>
+    <svg slot="end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path
+            d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+        />
+    </svg>
+</fast-search>
diff --git a/packages/web-components/fast-components/src/search/search.styles.ts b/packages/web-components/fast-components/src/search/search.styles.ts
index 8252575d9cd..566ef44051e 100644
--- a/packages/web-components/fast-components/src/search/search.styles.ts
+++ b/packages/web-components/fast-components/src/search/search.styles.ts
@@ -50,6 +50,7 @@ export const searchStyles: FoundationElementTemplate<ElementStyles, TextFieldOpt
         border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid ${accentFillRest};
         height: calc(${heightNumber} * 1px);
+        align-items: baseline;
     }
 
     .control {
@@ -109,6 +110,12 @@ export const searchStyles: FoundationElementTemplate<ElementStyles, TextFieldOpt
         visibility: hidden;
     }
 
+    .input-wrapper,
+    .start,
+    .end {
+        align-self: center;
+    }
+
     .start,
     .end {
         display: flex;
diff --git a/packages/web-components/fast-components/src/styles/patterns/button.ts b/packages/web-components/fast-components/src/styles/patterns/button.ts
index 3fbe27ffc43..d2726418be4 100644
--- a/packages/web-components/fast-components/src/styles/patterns/button.ts
+++ b/packages/web-components/fast-components/src/styles/patterns/button.ts
@@ -60,7 +60,7 @@ export const BaseButtonStyles = css`
         box-sizing: border-box;
         display: inline-flex;
         justify-content: center;
-        align-items: center;
+        align-items: baseline;
         padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);
         white-space: nowrap;
         outline: none;
@@ -93,6 +93,12 @@ export const BaseButtonStyles = css`
         border: 0;
     }
 
+    .start,
+    .content,
+    .end {
+        align-self: center;
+    }
+
     .start,
     .end {
         display: flex;
diff --git a/packages/web-components/fast-components/src/text-field/fixtures/text-field.html b/packages/web-components/fast-components/src/text-field/fixtures/text-field.html
index dc3f7b6d327..a12bcb34cd2 100644
--- a/packages/web-components/fast-components/src/text-field/fixtures/text-field.html
+++ b/packages/web-components/fast-components/src/text-field/fixtures/text-field.html
@@ -99,3 +99,20 @@ <h2>In a form</h2>
     ></fast-text-field>
     <input type="submit" value="submit" />
 </form>
+
+<h2>One default, one with start slot, and one with end slot</h2>
+<fast-text-field></fast-text-field>
+<fast-text-field>
+    <svg slot="start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path
+            d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+        />
+    </svg>
+</fast-text-field>
+<fast-text-field>
+    <svg slot="end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path
+            d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+        />
+    </svg>
+</fast-text-field>
diff --git a/packages/web-components/fast-components/src/text-field/text-field.styles.ts b/packages/web-components/fast-components/src/text-field/text-field.styles.ts
index 2db812eb9ea..cccda141495 100644
--- a/packages/web-components/fast-components/src/text-field/text-field.styles.ts
+++ b/packages/web-components/fast-components/src/text-field/text-field.styles.ts
@@ -55,6 +55,7 @@ export const textFieldStyles: FoundationElementTemplate<
         border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid ${accentFillRest};
         height: calc(${heightNumber} * 1px);
+        align-items: baseline;
     }
 
     .control {
@@ -94,6 +95,12 @@ export const textFieldStyles: FoundationElementTemplate<
         visibility: hidden;
     }
 
+    .start,
+    .control,
+    .end {
+        align-self: center;
+    }
+
     .start,
     .end {
         display: flex;