diff --git a/code/lib/blocks/src/components/IconGallery.stories.tsx b/code/lib/blocks/src/components/IconGallery.stories.tsx
index b7b086d03173..4fba7d3e9a25 100644
--- a/code/lib/blocks/src/components/IconGallery.stories.tsx
+++ b/code/lib/blocks/src/components/IconGallery.stories.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 
-import { AddIcon, FaceHappyIcon, HomeIcon, SubtractIcon } from '@storybook/icons';
+import {
+  AddIcon,
+  AlertIcon,
+  BellIcon,
+  FaceHappyIcon,
+  HomeIcon,
+  SubtractIcon,
+} from '@storybook/icons';
 
 import { IconGallery, IconItem } from './IconGallery';
 
@@ -25,8 +32,11 @@ export const DefaultStyle = () => (
     <IconItem name="bar">
       <img src="https://storybook.js.org/images/placeholders/50x50.png" alt="example" />
     </IconItem>
-    <IconItem name="bar">
-      <img src="https://storybook.js.org/images/placeholders/50x50.png" alt="example" />
+    <IconItem name="very-long-icon-name">
+      <AlertIcon />
+    </IconItem>
+    <IconItem name="very-long-icon-name-that-should-truncate">
+      <BellIcon />
     </IconItem>
   </IconGallery>
 );
diff --git a/code/lib/blocks/src/components/IconGallery.tsx b/code/lib/blocks/src/components/IconGallery.tsx
index ef83bad6f13f..55f242ae11b9 100644
--- a/code/lib/blocks/src/components/IconGallery.tsx
+++ b/code/lib/blocks/src/components/IconGallery.tsx
@@ -8,10 +8,17 @@ import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 
 const ItemLabel = styled.div(({ theme }) => ({
   fontFamily: theme.typography.fonts.base,
-  fontSize: theme.typography.size.s2,
+  fontSize: theme.typography.size.s1,
   color: theme.color.defaultText,
   marginLeft: 10,
   lineHeight: 1.2,
+
+  display: '-webkit-box',
+  overflow: 'hidden',
+  wordBreak: 'break-word',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
 }));
 
 const ItemSpecimen = styled.div(({ theme }) => ({
@@ -34,15 +41,16 @@ const Item = styled.div({
   display: 'inline-flex',
   flexDirection: 'row',
   alignItems: 'center',
-  flex: '0 1 calc(20% - 10px)',
-  minWidth: 120,
-
-  margin: '0px 10px 30px 0',
+  width: '100%',
+  padding: '0 8px',
 });
 
 const List = styled.div({
-  display: 'flex',
-  flexFlow: 'row wrap',
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+  gridGap: 8,
+  gridAutoFlow: 'row dense',
+  gridAutoRows: 50,
 });
 
 interface IconItemProps {