diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
index 0fd41f3b8be5..1bf411b1add2 100644
--- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap
+++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -72,7 +72,7 @@ exports[`EuiAvatar is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -118,7 +118,7 @@ exports[`EuiAvatar props color as null is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -162,7 +162,7 @@ exports[`EuiAvatar props color as plain is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
   background-color: #FFF;
 }
@@ -207,7 +207,7 @@ exports[`EuiAvatar props color as string is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -252,7 +252,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -264,7 +264,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
   title="name"
 >
   <span
-    class="euiAvatar__icon emotion-1"
+    class="euiAvatar__icon"
     data-euiicon-type="bolt"
   >
     name
@@ -298,7 +298,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -310,7 +310,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
   title="name"
 >
   <span
-    class="euiAvatar__icon emotion-1"
+    class="euiAvatar__icon"
     color="primary"
     data-euiicon-type="bolt"
   >
@@ -345,7 +345,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -357,7 +357,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
   title="name"
 >
   <span
-    class="euiAvatar__icon emotion-1"
+    class="euiAvatar__icon"
     color="#000000"
     data-euiicon-type="bolt"
   >
@@ -392,7 +392,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -404,7 +404,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
   title="name"
 >
   <span
-    class="euiAvatar__icon emotion-1"
+    class="euiAvatar__icon"
     color="#000000"
     data-euiicon-type="bolt"
   >
@@ -439,7 +439,7 @@ exports[`EuiAvatar props imageUrl is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -478,7 +478,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -523,7 +523,7 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -568,7 +568,7 @@ exports[`EuiAvatar props isDisabled is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
   cursor: not-allowed;
   -webkit-filter: grayscale(100%);
@@ -615,7 +615,7 @@ exports[`EuiAvatar props size l is rendered 1`] = `
   width: 40px;
   height: 40px;
   line-height: 40px;
-  font-size: calc(24px * .8);
+  font-size: calc(24px * 0.8);
   border-radius: 50%;
 }
 
@@ -660,7 +660,7 @@ exports[`EuiAvatar props size m is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 50%;
 }
 
@@ -750,7 +750,7 @@ exports[`EuiAvatar props size xl is rendered 1`] = `
   width: calc(16px * 4);
   height: calc(16px * 4);
   line-height: calc(16px * 4);
-  font-size: calc(32px * .8);
+  font-size: calc(32px * 0.8);
   border-radius: 50%;
 }
 
@@ -795,7 +795,7 @@ exports[`EuiAvatar props type is rendered 1`] = `
   width: 32px;
   height: 32px;
   line-height: 32px;
-  font-size: calc(16px * .9);
+  font-size: calc(16px * 0.9);
   border-radius: 6px;
 }
 
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index 3577c357063f..88d6edc786bc 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -8,79 +8,59 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { size } from '../../global_styling/mixins/_size';
 
-export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => {
-  const avatarSizing = {
-    s: {
-      size: euiTheme.size.l,
-      fontSize: euiTheme.size.m,
-    },
-    m: {
-      size: euiTheme.size.xl,
-      fontSize: `calc(${euiTheme.size.base} * .9)`,
-    },
-    l: {
-      size: euiTheme.size.xxl,
-      fontSize: `calc(${euiTheme.size.l} * .8)`,
-    },
-    xl: {
-      size: `calc(${euiTheme.size.base} * 4)`,
-      fontSize: `calc(${euiTheme.size.xl} * .8)`,
-    },
-  };
-
-  return {
-    // Block
-    euiAvatar: css`
-      flex-shrink: 0; // Ensures it never scales down below its intended size
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      background-size: cover;
-      text-align: center;
-      vertical-align: middle;
-      overflow-x: hidden;
-      font-weight: ${euiTheme.font.weight
-        .medium}; // Explicitly state so it doesn't get overridden by inheritance
-    `,
-    // Variants
-    plain: css`
-      background-color: ${euiTheme.colors.emptyShade};
-    `,
-    user: css`
-      border-radius: 50%;
-    `,
-    space: css`
-      border-radius: ${euiTheme.border.radius.medium};
-    `,
-    // States
-    isDisabled: css`
-      cursor: not-allowed;
-      filter: grayscale(100%);
-    `,
-    // Sizes
-    s: css`
-      ${size(avatarSizing.s.size)}
-      line-height: ${avatarSizing.s.size};
-      font-size: ${avatarSizing.s.fontSize};
-    `,
-    m: css`
-      ${size(avatarSizing.m.size)}
-      line-height: ${avatarSizing.m.size};
-      font-size: ${avatarSizing.m.fontSize};
-    `,
-    l: css`
-      ${size(avatarSizing.l.size)}
-      line-height: ${avatarSizing.l.size};
-      font-size: ${avatarSizing.l.fontSize};
-    `,
-    xl: css`
-      ${size(avatarSizing.xl.size)}
-      line-height: ${avatarSizing.xl.size};
-      font-size: ${avatarSizing.xl.fontSize};
-    `,
-    // Elements
-    euiAvatarIcon: css``,
-  };
-};
+export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
+  // Base
+  euiAvatar: css`
+    flex-shrink: 0; // Ensures it never scales down below its intended size
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-size: cover;
+    text-align: center;
+    vertical-align: middle;
+    overflow-x: hidden;
+    font-weight: ${euiTheme.font.weight
+      .medium}; // Explicitly state so it doesn't get overridden by inheritance
+  `,
+  // Variants
+  plain: css`
+    background-color: ${euiTheme.colors.emptyShade};
+  `,
+  user: css`
+    border-radius: 50%;
+  `,
+  space: css`
+    border-radius: ${euiTheme.border.radius.medium};
+  `,
+  // States
+  isDisabled: css`
+    cursor: not-allowed;
+    filter: grayscale(100%);
+  `,
+  // Sizes
+  s: css`
+    width: ${euiTheme.size.l};
+    height: ${euiTheme.size.l};
+    line-height: ${euiTheme.size.l};
+    font-size: ${euiTheme.size.m};
+  `,
+  m: css`
+    width: ${euiTheme.size.xl};
+    height: ${euiTheme.size.xl};
+    line-height: ${euiTheme.size.xl};
+    font-size: calc(${euiTheme.size.base} * 0.9);
+  `,
+  l: css`
+    width: ${euiTheme.size.xxl};
+    height: ${euiTheme.size.xxl};
+    line-height: ${euiTheme.size.xxl};
+    font-size: calc(${euiTheme.size.l} * 0.8);
+  `,
+  xl: css`
+    width: calc(${euiTheme.size.base} * 4);
+    height: calc(${euiTheme.size.base} * 4);
+    line-height: calc(${euiTheme.size.base} * 4);
+    font-size: calc(${euiTheme.size.xl} * 0.8);
+  `,
+});
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index 555527a080bb..e047d24c7d9e 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -175,7 +175,6 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
   } else if (iconType) {
     content = (
       <EuiIcon
-        css={[styles.euiAvatarIcon]}
         className="euiAvatar__icon"
         size={iconSize || size}
         type={iconType}
diff --git a/src/components/comment_list/__snapshots__/comment.test.tsx.snap b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
index 03a62384e668..5c9b0e66b7ae 100644
--- a/src/components/comment_list/__snapshots__/comment.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
@@ -114,7 +114,7 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
   width: 40px;
   height: 40px;
   line-height: 40px;
-  font-size: calc(24px * .8);
+  font-size: calc(24px * 0.8);
   border-radius: 50%;
 }
 
diff --git a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
index 5ecbca9dc96f..642afc167f6b 100644
--- a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`EuiCommentTimeline props timelineIcon is rendered 1`] = `
   width: 40px;
   height: 40px;
   line-height: 40px;
-  font-size: calc(24px * .8);
+  font-size: calc(24px * 0.8);
   border-radius: 50%;
 }
 
diff --git a/src/global_styling/mixins/_size.ts b/src/global_styling/mixins/_size.ts
deleted file mode 100644
index 47045b42e06e..000000000000
--- a/src/global_styling/mixins/_size.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export const size = (size: number | string) => `
-  width: ${size};
-  height: ${size};
-`;