diff --git a/.changeset/lovely-zebras-destroy.md b/.changeset/lovely-zebras-destroy.md
new file mode 100644
index 0000000000..4908e2aeb7
--- /dev/null
+++ b/.changeset/lovely-zebras-destroy.md
@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-user-badge': minor
+'@toptal/picasso-avatar': minor
+---
+
+- export Avatar.Wrapper to support custom icons
diff --git a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
index 8fc9ece907..7142c77fc5 100644
--- a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
@@ -34,20 +34,22 @@ exports[`AccountSelect renders 1`] = `
                   <div
                     class="items-start flex text-[1rem]"
                   >
-                    <div
-                      class="flex relative"
-                    >
+                    <div>
                       <div
-                        class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+                        class="relative"
                       >
                         <div
-                          class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+                          class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
                         >
-                          <p
-                            class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+                          <div
+                            class="uppercase text-[1em]"
                           >
-                            PL
-                          </p>
+                            <p
+                              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+                            >
+                              PL
+                            </p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -110,20 +112,22 @@ exports[`AccountSelect renders 1`] = `
                   <div
                     class="items-start flex text-[1rem]"
                   >
-                    <div
-                      class="flex relative"
-                    >
+                    <div>
                       <div
-                        class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+                        class="relative"
                       >
                         <div
-                          class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+                          class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
                         >
-                          <p
-                            class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+                          <div
+                            class="uppercase text-[1em]"
                           >
-                            PL
-                          </p>
+                            <p
+                              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+                            >
+                              PL
+                            </p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -186,17 +190,19 @@ exports[`AccountSelect renders 1`] = `
                   <div
                     class="items-start flex text-[1rem]"
                   >
-                    <div
-                      class="flex relative"
-                    >
+                    <div>
                       <div
-                        class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+                        class="relative"
                       >
-                        <img
-                          alt="Phil Leif 3"
-                          class="block object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize"
-                          src="./jacqueline-with-flowers-1954-square.jpg"
-                        />
+                        <div
+                          class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+                        >
+                          <img
+                            alt="Phil Leif 3"
+                            class="block object-cover w-full h-full [image-rendering:-webkit-optimize"
+                            src="./jacqueline-with-flowers-1954-square.jpg"
+                          />
+                        </div>
                       </div>
                     </div>
                     <div
diff --git a/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx b/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
index cf28039819..1c5bf68042 100644
--- a/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
+++ b/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
@@ -27,7 +27,7 @@ const showLogo = (size: Size, showEmblem?: boolean): boolean => {
 const AvatarLogo = ({ size }: Pick<Props, 'size'>) => (
   <div
     className={twJoin(
-      'flex absolute bottom-0',
+      'flex absolute bottom-0 left-0',
       avatarLogoClassesBySize.root[size]
     )}
     role='img'
@@ -44,7 +44,7 @@ const AvatarLogo = ({ size }: Pick<Props, 'size'>) => (
   </div>
 )
 
-const AvatarWrapper = (props: Props) => {
+export const AvatarWrapper = (props: Props) => {
   const {
     children,
     className,
@@ -55,26 +55,25 @@ const AvatarWrapper = (props: Props) => {
   } = props
 
   return (
-    <div
-      className={twJoin(
-        `flex relative`,
-        showLogo(size, showEmblem) && 'bg-white'
-      )}
-    >
+    <div>
       <div
-        style={style}
-        data-testid={dataTestId}
-        className={twMerge(
-          'relative bg-gray-500 text-[1rem] shrink-0 grow-0',
-          classBySize[size],
-          clipClassBySize[size],
-          className
-        )}
+        className={twJoin(`relative`, showLogo(size, showEmblem) && 'bg-white')}
       >
-        {children}
+        <div
+          style={style}
+          data-testid={dataTestId}
+          className={twMerge(
+            'relative bg-gray-500 text-[1rem]',
+            'grid place-items-center',
+            classBySize[size],
+            clipClassBySize[size],
+            className
+          )}
+        >
+          {children}
+        </div>
+        {showLogo(size, showEmblem) && <AvatarLogo size={size} />}
       </div>
-
-      {showLogo(size, showEmblem) && <AvatarLogo size={size} />}
     </div>
   )
 }
diff --git a/packages/base/Avatar/src/Avatar/IconAvatar/IconAvatar.tsx b/packages/base/Avatar/src/Avatar/IconAvatar/IconAvatar.tsx
index 4be65d0c5a..cf020bd3f8 100644
--- a/packages/base/Avatar/src/Avatar/IconAvatar/IconAvatar.tsx
+++ b/packages/base/Avatar/src/Avatar/IconAvatar/IconAvatar.tsx
@@ -19,11 +19,7 @@ const IconAvatar = ({
 }: Props) => {
   return (
     <Profile16
-      className={twMerge(
-        className,
-        'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
-        classBySize[size]
-      )}
+      className={twMerge(className, classBySize[size])}
       color='white'
       data-testid={dataTestId}
       style={style}
diff --git a/packages/base/Avatar/src/Avatar/ImageAvatar/ImageAvatar.tsx b/packages/base/Avatar/src/Avatar/ImageAvatar/ImageAvatar.tsx
index 59499b8038..e8e0bd1cf5 100644
--- a/packages/base/Avatar/src/Avatar/ImageAvatar/ImageAvatar.tsx
+++ b/packages/base/Avatar/src/Avatar/ImageAvatar/ImageAvatar.tsx
@@ -28,7 +28,7 @@ const ImageAvatar = (props: Props) => {
       <Image
         alt={alt || name || ''}
         className={twMerge(
-          'object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize-contrast]',
+          'object-cover w-full h-full [image-rendering:-webkit-optimize-contrast]',
           className
         )}
         src={src}
diff --git a/packages/base/Avatar/src/Avatar/TextAvatar/TextAvatar.tsx b/packages/base/Avatar/src/Avatar/TextAvatar/TextAvatar.tsx
index 415631bf81..3e0a61b563 100644
--- a/packages/base/Avatar/src/Avatar/TextAvatar/TextAvatar.tsx
+++ b/packages/base/Avatar/src/Avatar/TextAvatar/TextAvatar.tsx
@@ -26,11 +26,7 @@ const TextAvatar = ({
   'data-private': dataPrivate,
 }: Props) => (
   <div
-    className={twMerge(
-      'uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)]',
-      containerTextClassBySize[size],
-      className
-    )}
+    className={twMerge('uppercase', containerTextClassBySize[size], className)}
     style={style}
     data-private={dataPrivate}
   >
diff --git a/packages/base/Avatar/src/Avatar/index.ts b/packages/base/Avatar/src/Avatar/index.ts
index cba0f11dfa..402720a4b4 100644
--- a/packages/base/Avatar/src/Avatar/index.ts
+++ b/packages/base/Avatar/src/Avatar/index.ts
@@ -3,4 +3,5 @@ import type { OmitInternalProps } from '@toptal/picasso-shared'
 import type { Props } from './Avatar'
 
 export { default as Avatar } from './Avatar'
+export { AvatarWrapper } from './AvatarWrapper/AvatarWrapper'
 export type AvatarProps = OmitInternalProps<Props>
diff --git a/packages/base/Avatar/src/Avatar/story/LongName.example.tsx b/packages/base/Avatar/src/Avatar/story/LongName.example.tsx
index 8c951767ba..2600ce95c6 100644
--- a/packages/base/Avatar/src/Avatar/story/LongName.example.tsx
+++ b/packages/base/Avatar/src/Avatar/story/LongName.example.tsx
@@ -3,22 +3,12 @@ import { Avatar, Container } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
-  <Container top={SPACING_4}>
-    <Container inline>
-      <Avatar size='xxsmall' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='xsmall' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='small' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' name='William Wallace Wo Wade' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='large' name='William Wallace Wo Wade' />
-    </Container>
+  <Container top={SPACING_4} flex gap={SPACING_4}>
+    <Avatar size='xxsmall' name='William Wallace Wo Wade' />
+    <Avatar size='xsmall' name='William Wallace Wo Wade' />
+    <Avatar size='small' name='William Wallace Wo Wade' />
+    <Avatar size='medium' name='William Wallace Wo Wade' />
+    <Avatar size='large' name='William Wallace Wo Wade' />
   </Container>
 )
 
diff --git a/packages/base/Avatar/src/Avatar/story/Sizes.example.tsx b/packages/base/Avatar/src/Avatar/story/Sizes.example.tsx
index f920012e5b..ff9b1436bc 100644
--- a/packages/base/Avatar/src/Avatar/story/Sizes.example.tsx
+++ b/packages/base/Avatar/src/Avatar/story/Sizes.example.tsx
@@ -4,83 +4,53 @@ import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
   <div>
-    <Container>
-      <Container inline>
-        <Avatar
-          size='xxsmall'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='xsmall'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='small'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='medium'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Medium'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar
-          size='large'
-          alt='Jacqueline Roque. Pablo Picasso, 1954. Large'
-          name='Jacqueline Roque'
-          src='./jacqueline-with-flowers-1954-square.jpg'
-        />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar
+        size='xxsmall'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='xsmall'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='small'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Small'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='medium'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Medium'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
+      <Avatar
+        size='large'
+        alt='Jacqueline Roque. Pablo Picasso, 1954. Large'
+        name='Jacqueline Roque'
+        src='./jacqueline-with-flowers-1954-square.jpg'
+      />
     </Container>
 
-    <Container top={SPACING_4}>
-      <Container inline>
-        <Avatar size='xxsmall' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='xsmall' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='small' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='medium' name='Jacqueline Roque' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='large' name='Jacqueline Roque' />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar size='xxsmall' name='Jacqueline Roque' />
+      <Avatar size='xsmall' name='Jacqueline Roque' />
+      <Avatar size='small' name='Jacqueline Roque' />
+      <Avatar size='medium' name='Jacqueline Roque' />
+      <Avatar size='large' name='Jacqueline Roque' />
     </Container>
 
-    <Container top={SPACING_4}>
-      <Container inline>
-        <Avatar size='xxsmall' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='xsmall' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='small' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='medium' />
-      </Container>
-      <Container inline left={SPACING_4}>
-        <Avatar size='large' />
-      </Container>
+    <Container top={SPACING_4} flex gap={SPACING_4}>
+      <Avatar size='xxsmall' />
+      <Avatar size='xsmall' />
+      <Avatar size='small' />
+      <Avatar size='medium' />
+      <Avatar size='large' />
     </Container>
   </div>
 )
diff --git a/packages/base/Avatar/src/Avatar/story/ToptalLogo.example.tsx b/packages/base/Avatar/src/Avatar/story/ToptalLogo.example.tsx
index 6520e40f52..89fd75ed85 100644
--- a/packages/base/Avatar/src/Avatar/story/ToptalLogo.example.tsx
+++ b/packages/base/Avatar/src/Avatar/story/ToptalLogo.example.tsx
@@ -3,33 +3,19 @@ import { Avatar, Container } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
-  <div>
-    <Container inline>
-      <Avatar size='xxsmall' showEmblem />
-    </Container>
-
-    <Container inline left={SPACING_4}>
-      <Avatar size='xsmall' showEmblem />
-    </Container>
-
-    <Container inline left={SPACING_4}>
-      <Avatar size='small' showEmblem />
-    </Container>
-
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' name='Jacqueline Roque' showEmblem />
-    </Container>
-
-    <Container inline left={SPACING_4}>
-      <Avatar
-        size='large'
-        alt='Jacqueline Roque. Pablo Picasso, 1954'
-        name='Jacqueline Roque'
-        src='./jacqueline-with-flowers-1954-square.jpg'
-        showEmblem
-      />
-    </Container>
-  </div>
+  <Container top={SPACING_4} flex gap={SPACING_4}>
+    <Avatar size='xxsmall' showEmblem />
+    <Avatar size='xsmall' showEmblem />
+    <Avatar size='small' showEmblem />
+    <Avatar size='medium' name='Jacqueline Roque' showEmblem />
+    <Avatar
+      size='large'
+      alt='Jacqueline Roque. Pablo Picasso, 1954'
+      name='Jacqueline Roque'
+      src='./jacqueline-with-flowers-1954-square.jpg'
+      showEmblem
+    />
+  </Container>
 )
 
 export default Example
diff --git a/packages/base/Avatar/src/Avatar/story/Variants.example.tsx b/packages/base/Avatar/src/Avatar/story/Variants.example.tsx
index a5529e57b9..e049962f13 100644
--- a/packages/base/Avatar/src/Avatar/story/Variants.example.tsx
+++ b/packages/base/Avatar/src/Avatar/story/Variants.example.tsx
@@ -3,31 +3,23 @@ import { Avatar, Container } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
 const Example = () => (
-  <div>
-    <Container inline>
-      <Avatar
-        size='medium'
-        alt='Jacqueline Roque. Pablo Picasso, 1954'
-        name='Jacqueline Roque'
-        src='./jacqueline-with-flowers-1954-square.jpg'
-      />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' name='Jacqueline Roque' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar size='medium' />
-    </Container>
-    <Container inline left={SPACING_4}>
-      <Avatar
-        size='medium'
-        alt='Jacqueline Roque. Pablo Picasso, 1954'
-        name='Jacqueline Roque'
-        src='./jacqueline-with-flowers-1954-square.jpg'
-        showEmblem
-      />
-    </Container>
-  </div>
+  <Container top={SPACING_4} flex gap={SPACING_4}>
+    <Avatar
+      size='medium'
+      alt='Jacqueline Roque. Pablo Picasso, 1954'
+      name='Jacqueline Roque'
+      src='./jacqueline-with-flowers-1954-square.jpg'
+    />
+    <Avatar size='medium' name='Jacqueline Roque' />
+    <Avatar size='medium' />
+    <Avatar
+      size='medium'
+      alt='Jacqueline Roque. Pablo Picasso, 1954'
+      name='Jacqueline Roque'
+      src='./jacqueline-with-flowers-1954-square.jpg'
+      showEmblem
+    />
+  </Container>
 )
 
 export default Example
diff --git a/packages/base/Avatar/src/AvatarCompound/index.ts b/packages/base/Avatar/src/AvatarCompound/index.ts
index 359610c778..ffc5b99c29 100644
--- a/packages/base/Avatar/src/AvatarCompound/index.ts
+++ b/packages/base/Avatar/src/AvatarCompound/index.ts
@@ -1,6 +1,7 @@
-import { Avatar } from '../Avatar'
+import { Avatar, AvatarWrapper } from '../Avatar'
 import { AvatarGroup } from '../AvatarGroup'
 
 export const AvatarCompound = Object.assign(Avatar, {
   Group: AvatarGroup,
+  Wrapper: AvatarWrapper,
 })
diff --git a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
index 33b98bddc1..3e400bb25c 100644
--- a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
@@ -14,17 +14,19 @@ exports[`PageTopBarMenu renders 1`] = `
         <div
           class="items-center flex text-[1rem]"
         >
-          <div
-            class="flex relative"
-          >
+          <div>
             <div
-              class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2em] h-[2em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+              class="relative"
             >
-              <img
-                alt="Jacqueline Roque"
-                class="block object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize"
-                src="./jacqueline-with-flowers-1954-square.jpg"
-              />
+              <div
+                class="relative bg-gray text-[1rem] grid place-items w-[2em] h-[2em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+              >
+                <img
+                  alt="Jacqueline Roque"
+                  class="block object-cover w-full h-full [image-rendering:-webkit-optimize"
+                  src="./jacqueline-with-flowers-1954-square.jpg"
+                />
+              </div>
             </div>
           </div>
           <div
diff --git a/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap b/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
index de7cd03e7a..82fb30fb38 100644
--- a/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
+++ b/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
@@ -8,20 +8,22 @@ exports[`UserBadge auto center alignment 1`] = `
     <div
       class="items-center flex text-[1rem]"
     >
-      <div
-        class="flex relative"
-      >
+      <div>
         <div
-          class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+          class="relative"
         >
           <div
-            class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+            class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
           >
-            <p
-              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+            <div
+              class="uppercase text-[1em]"
             >
-              JD
-            </p>
+              <p
+                class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+              >
+                JD
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -51,20 +53,22 @@ exports[`UserBadge custom name 1`] = `
     <div
       class="items-start flex text-[1rem]"
     >
-      <div
-        class="flex relative"
-      >
+      <div>
         <div
-          class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+          class="relative"
         >
           <div
-            class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+            class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
           >
-            <p
-              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+            <div
+              class="uppercase text-[1em]"
             >
-              JD
-            </p>
+              <p
+                class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+              >
+                JD
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -97,20 +101,22 @@ exports[`UserBadge custom title 1`] = `
     <div
       class="items-start flex text-[1rem]"
     >
-      <div
-        class="flex relative"
-      >
+      <div>
         <div
-          class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+          class="relative"
         >
           <div
-            class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+            class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
           >
-            <p
-              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+            <div
+              class="uppercase text-[1em]"
             >
-              JD
-            </p>
+              <p
+                class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+              >
+                JD
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -148,20 +154,22 @@ exports[`UserBadge invert render 1`] = `
     <div
       class="items-start flex text-[1rem]"
     >
-      <div
-        class="flex relative"
-      >
+      <div>
         <div
-          class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+          class="relative"
         >
           <div
-            class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+            class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
           >
-            <p
-              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+            <div
+              class="uppercase text-[1em]"
             >
-              JD
-            </p>
+              <p
+                class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+              >
+                JD
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -196,20 +204,22 @@ exports[`UserBadge manual center alignment 1`] = `
     <div
       class="items-center flex text-[1rem]"
     >
-      <div
-        class="flex relative"
-      >
+      <div>
         <div
-          class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+          class="relative"
         >
           <div
-            class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+            class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
           >
-            <p
-              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+            <div
+              class="uppercase text-[1em]"
             >
-              JD
-            </p>
+              <p
+                class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+              >
+                JD
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -244,20 +254,22 @@ exports[`UserBadge override auto center alignment 1`] = `
     <div
       class="items-start flex text-[1rem]"
     >
-      <div
-        class="flex relative"
-      >
+      <div>
         <div
-          class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+          class="relative"
         >
           <div
-            class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+            class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
           >
-            <p
-              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+            <div
+              class="uppercase text-[1em]"
             >
-              JD
-            </p>
+              <p
+                class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+              >
+                JD
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -287,20 +299,22 @@ exports[`UserBadge renders 1`] = `
     <div
       class="items-start flex text-[1rem]"
     >
-      <div
-        class="flex relative"
-      >
+      <div>
         <div
-          class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+          class="relative"
         >
           <div
-            class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[1em]"
+            class="relative bg-gray text-[1rem] grid place-items w-[2.5em] h-[2.5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
           >
-            <p
-              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+            <div
+              class="uppercase text-[1em]"
             >
-              JD
-            </p>
+              <p
+                class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+              >
+                JD
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -335,20 +349,22 @@ exports[`UserBadge small size 1`] = `
     <div
       class="items-start flex text-[1rem]"
     >
-      <div
-        class="flex relative"
-      >
+      <div>
         <div
-          class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[5em] h-[5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_1em_100%,_0_calc(100%-1em))]"
+          class="relative"
         >
           <div
-            class="uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)] text-[2em]"
+            class="relative bg-gray text-[1rem] grid place-items w-[5em] h-[5em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_1em_100%,_0_calc(100%-1em))]"
           >
-            <p
-              class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+            <div
+              class="uppercase text-[2em]"
             >
-              JD
-            </p>
+              <p
+                class="m-0 text-white font-regular text-[1em] leading-[1.5em]"
+              >
+                JD
+              </p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/base/UserBadge/src/UserBadge/story/WithIcon.example.tsx b/packages/base/UserBadge/src/UserBadge/story/WithIcon.example.tsx
new file mode 100644
index 0000000000..840b7f44f7
--- /dev/null
+++ b/packages/base/UserBadge/src/UserBadge/story/WithIcon.example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { UserBadge, Support16, Avatar } from '@toptal/picasso'
+
+const Example = () => (
+  <div>
+    <UserBadge
+      name='Jacqueline Roque'
+      title='UI specialist'
+      avatar={
+        <Avatar.Wrapper size='xsmall'>
+          <Support16 color='white' />
+        </Avatar.Wrapper>
+      }
+    />
+  </div>
+)
+
+export default Example
diff --git a/packages/base/UserBadge/src/UserBadge/story/index.jsx b/packages/base/UserBadge/src/UserBadge/story/index.jsx
index f1b14eb788..dbbfaed3b7 100644
--- a/packages/base/UserBadge/src/UserBadge/story/index.jsx
+++ b/packages/base/UserBadge/src/UserBadge/story/index.jsx
@@ -4,7 +4,7 @@ import PicassoBook from '~/.storybook/components/PicassoBook'
 const page = PicassoBook.section('Components').createPage(
   'UserBadge',
   `Show user avatar and name along with addition content
-  
+
   ${PicassoBook.createSourceLink(__filename)}
   `
 )
@@ -33,3 +33,8 @@ page
     'With Title',
     'base/UserBadge'
   )
+  .addExample(
+    'UserBadge/story/WithIcon.example.tsx',
+    'With Icon',
+    'base/UserBadge'
+  )