From bcbe2d51ddfe7738f77ea6a178cafe51c63cd125 Mon Sep 17 00:00:00 2001
From: JD Francis <jd.johndavidfrancis@gmail.com>
Date: Fri, 17 Nov 2023 16:15:26 -0600
Subject: [PATCH] Tweak Harmony Icon Docs (#6733)

---
 .../src/icons/UtilityIcons.stories.mdx        | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/harmony/src/icons/UtilityIcons.stories.mdx b/packages/harmony/src/icons/UtilityIcons.stories.mdx
index e29e1d4211e..5897ef5cb19 100644
--- a/packages/harmony/src/icons/UtilityIcons.stories.mdx
+++ b/packages/harmony/src/icons/UtilityIcons.stories.mdx
@@ -25,28 +25,26 @@ Utility icons are simple, single-color glyphs that identify labels and actions a
 <Heading>
 ## Usage
 
-Recommended sizes for utility icons: 14px | 16px | 20px | 24px | 30px | 32px
-
 </Heading>
 
 <Flex direction='column' gap='m'>
+  Sizes
   <Flex alignItems='center' gap='2xl'>
     {Object.keys(iconSizes).map((size) => (
-      <Icons.IconNote key={size} size={size} />
-    ))}
-  </Flex>
-  <Flex alignItems='center' gap='2xl'>
-    {Object.keys(iconSizes).map((size) => (
-      <Flex
-        key={size}
-        alignItems='center'
-        justifyContent='center'
-        h={iconSizes[size]}
-        w={iconSizes[size]}
-        css={{ background: 'rgba(255, 0, 0, 0.10)' }}
-      >
+      <Flex direction='column' alignItems='center' gap='s' key={size}>
+        <Icons.IconNote size={size} />
+        <Text css={{ color: '#F00 !important', fontSize: '10px !important' }}>
+          {size}
+        </Text>
+        <Flex
+          alignItems='center'
+          justifyContent='center'
+          h={iconSizes[size]}
+          w={iconSizes[size]}
+          css={{ background: 'rgba(255, 0, 0, 0.10)' }}
+        />
         <Text css={{ color: '#F00 !important', fontSize: '10px !important' }}>
-          {iconSizes[size]}
+          {`${iconSizes[size]}px`}
         </Text>
       </Flex>
     ))}