diff --git a/change/@fluentui-web-components-2021-01-04-11-34-11-users-v-sedono-fix-start-end-fixed-width-height.json b/change/@fluentui-web-components-2021-01-04-11-34-11-users-v-sedono-fix-start-end-fixed-width-height.json
new file mode 100644
index 0000000000000..8f26de6bef298
--- /dev/null
+++ b/change/@fluentui-web-components-2021-01-04-11-34-11-users-v-sedono-fix-start-end-fixed-width-height.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "update start and end to remove fixed width and height",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-04T19:34:11.159Z"
+}
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
index 75a6be3ad80f6..d488148aea910 100644
--- a/packages/web-components/src/menu-item/menu-item.styles.ts
+++ b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -15,7 +15,7 @@ export const MenuItemStyles = css`
         outline: none;
         box-sizing: border-box;
         height: calc(${heightNumber} * 1px);
-        grid-template-columns: 42px auto 42px;
+        grid-template-columns: minmax(42px, auto) 1fr minmax(42px, auto);
         grid-template-rows: auto;
         justify-items: center;
         align-items: center;
@@ -72,6 +72,7 @@ export const MenuItemStyles = css`
             replace when adaptive typography is figured out */ ''
         } width: 16px;
         height: 16px;
+        display: flex;
     }
 
     :host(:hover) .start,
diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
index 514fc2284dc1c..ff3357f984c03 100644
--- a/packages/web-components/src/styles/patterns/button.ts
+++ b/packages/web-components/src/styles/patterns/button.ts
@@ -95,7 +95,10 @@ export const BaseButtonStyles: ElementStyles = css`
     }
 
     .start,
-    .end,
+    .end {
+        display: flex;
+    }
+
     ::slotted(svg) {
         ${
           /* Glyph size and margin-left is temporary -
@@ -260,6 +263,7 @@ export const HypertextStyles = css`
         font-size: inherit;
         line-height: inherit;
         background: transparent;
+        min-width: 0;
     }
 
     :host(.hypertext) .control {
diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
index 5d8d37f4faf52..03f5504a4e35c 100644
--- a/packages/web-components/src/text-field/text-field.styles.ts
+++ b/packages/web-components/src/text-field/text-field.styles.ts
@@ -71,13 +71,15 @@ export const TextFieldStyles = css`
 
     .start,
     .end {
-        ${
-          /* Glyph size and margin-left is temporary -
+        margin: auto;
+        fill: currentcolor;
+    }
+    
+    ::slotted(svg) {      ${
+      /* Glyph size and margin-left is temporary -
             replace when adaptive typography is figured out */ ''
-        } width: 16px;
+    } width: 16px;
         height: 16px;
-        margin: auto;
-        fill: ${neutralForegroundRestBehavior.var};
     }
 
     .start {
diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
index a7ec50e802a0b..41a1c51044db6 100644
--- a/packages/web-components/src/tree-item/tree-item.styles.ts
+++ b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -147,10 +147,14 @@ export const TreeItemStyles = css`
     }
     .start,
     .end {
+        display: flex;
+        fill: currentcolor;
+    }
+
+     ::slotted(svg) {
         ${/* Glyph size is temporary -
             replace when glyph-size var is added */ ''} width: 16px;
         height: 16px;
-        fill: ${neutralForegroundRestBehavior.var};
     }
 
     .start {