diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
index 53eb82897..10a84e5b8 100644
--- a/frontend/src/app/main/ui/ds.cljs
+++ b/frontend/src/app/main/ui/ds.cljs
@@ -16,4 +16,5 @@
        :RawSvg raw-svg*
        ;; meta / misc
        :meta #js {:icons icon-list :svgs raw-svg-list}
-       :storybook #js {:StoryWrapper sb/story-wrapper* :IconGrid sb/icon-grid*}})
+       :storybook #js {:StoryGrid sb/story-grid*
+                       :StoryWrapper sb/story-wrapper*}})
diff --git a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx
index d143da7c3..db0b2c23c 100644
--- a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { Icon } = Components;
-const { StoryWrapper, IconGrid } = Components.storybook;
+const { StoryWrapper, StoryGrid } = Components.storybook;
 const { icons } = Components.meta;
 
 export default {
@@ -19,13 +19,13 @@ export const AllIcons = {
     <StoryWrapper theme="default">
       <h1>All Icons</h1>
       <p>Hover on an icon to see its ID</p>
-      <IconGrid>
+      <StoryGrid>
         {iconList.map((iconId) => (
           <div title={iconId} key={iconId}>
             <Icon icon={iconId} />
           </div>
         ))}
-      </IconGrid>
+      </StoryGrid>
     </StoryWrapper>
   ),
 };
diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx b/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx
index 6f6beb37b..1717a64d0 100644
--- a/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import Components from "@target/components";
 
 const { RawSvg } = Components;
-const { StoryWrapper, IconGrid } = Components.storybook;
+const { StoryWrapper, StoryGrid } = Components.storybook;
 const { svgs } = Components.meta;
 
 export default {
@@ -20,13 +20,13 @@ export const AllAssets = {
       <h1>All assets</h1>
       <p>Hover on a asset to see its id.</p>
 
-      <IconGrid size="200">
+      <StoryGrid size="200">
         {assetList.map(x => (
           <div key={x} title={x}>
             <RawSvg asset={x} style={{maxWidth: "100%"}} />
           </div>
         ))}
-      </IconGrid>
+      </StoryGrid>
     </StoryWrapper>
   ),
   parameters: {
diff --git a/frontend/src/app/main/ui/ds/storybook.cljs b/frontend/src/app/main/ui/ds/storybook.cljs
index 846b0b0e5..3734f8410 100644
--- a/frontend/src/app/main/ui/ds/storybook.cljs
+++ b/frontend/src/app/main/ui/ds/storybook.cljs
@@ -22,8 +22,8 @@
       [:section {:class "default"} children]
       [:section {:class "light"} children]])])
 
-(mf/defc icon-grid*
+(mf/defc story-grid*
   {::mf/props :obj}
   [{:keys [children size]}]
-  [:article {:class (stl/css :icon-grid)
+  [:article {:class (stl/css :story-grid)
              :style (when (some? size) #js {"--component-grid-size" (dm/str size "px")})} children])
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/ds/storybook.scss b/frontend/src/app/main/ui/ds/storybook.scss
index 84076c8f8..edb36fdbb 100644
--- a/frontend/src/app/main/ui/ds/storybook.scss
+++ b/frontend/src/app/main/ui/ds/storybook.scss
@@ -5,7 +5,7 @@
   row-gap: 1rem;
 }
 
-.icon-grid {
+.story-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, var(--component-grid-size, 16px));
   gap: 1rem;