From 89895a7286c08f4a2bd1fe552396d3c7d0bf77cb Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Tue, 17 Mar 2026 18:47:25 +1100
Subject: [PATCH] chore(studio): file explorer rows (#43845)

## What kind of change does this PR introduce?

UI touch-up

## What is the current behavior?

Explorer rows in file storage is a bit rough around the edges.

## What is the new behavior?

- Consistent loaders
- Consistent icons

Also includes:

- Fix to `stroke-width` on files-bucket.svg as documented in icons.mdx

| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/055518b2-6d93-4c9d-879b-6e7dd51e0620"
/> | <img width="1024" height="563" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/fae05446-95d9-4ca1-b441-7cd39d1c6036"
/> |
---
 apps/design-system/content/docs/icons.mdx     |  6 +-
 .../StorageExplorer/FileExplorerHeader.tsx    |  6 +-
 .../StorageExplorer/FileExplorerRow.tsx       | 76 +++++++++----------
 .../Storage/StorageExplorer/PreviewPane.tsx   | 10 +--
 apps/studio/public/img/bucket-filled.svg      | 15 ----
 apps/studio/public/img/folder-filled.svg      | 12 ---
 packages/icons/__registry__/index.tsx         |  4 +-
 packages/icons/src/icons/files-bucket.ts      | 10 +--
 packages/icons/src/raw-icons/files-bucket.svg |  6 +-
 9 files changed, 56 insertions(+), 89 deletions(-)
 delete mode 100644 apps/studio/public/img/bucket-filled.svg
 delete mode 100644 apps/studio/public/img/folder-filled.svg

diff --git a/apps/design-system/content/docs/icons.mdx b/apps/design-system/content/docs/icons.mdx
index f50082c5255..eefdbb97749 100644
--- a/apps/design-system/content/docs/icons.mdx
+++ b/apps/design-system/content/docs/icons.mdx
@@ -45,7 +45,7 @@ function app() {
 }
 ```
 
-**Default props**: All icons default to `size={24}`. Stroke and fill defaults come from the source SVG's root attributes (e.g. `stroke-width="1"` in the source becomes the component's default `strokeWidth`). Override these props as needed for your use case.
+**Default props**: All icons default to `size={24}`. Stroke and fill defaults come from the source SVG's root attributes (e.g. `stroke-width="1"` on the root `<svg>` becomes the component's default `strokeWidth`). You can override those defaults at the call site, but any `stroke`, `fill`, or `stroke-width` set on individual child paths will still win.
 
 ### Adding new custom icons
 
@@ -63,7 +63,7 @@ Follow these steps to add a new custom icon to the Supabase icon library.
 
    For **fill-only icons** (e.g. logos that use shapes instead of strokes), add `stroke="none"` to the root `<svg>` element. The build will propagate this so the component never renders an unwanted stroke.
 
-Leave attributes like `stroke-width` as they are. The root SVG's `fill`, `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin` attributes are automatically propagated as the component's defaults by the build process. The conversion to camel-case for React compatibility (e.g. `strokeWidth`) is also handled automatically.
+Prefer putting shared styling like `fill`, `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin` on the root `<svg>`. The build propagates those root attributes as the component's defaults, and also converts them to camel-case for React compatibility (e.g. `strokeWidth`). If you put those attributes on individual child paths instead, they become fixed path-level styling and will override props passed to the component.
 
 2. **Build the component**: Run `npm run build:icons` from inside the `packages/icons` directory
 
@@ -133,4 +133,4 @@ Note `stroke="none"` on the root to prevent unwanted strokes, and `fill="current
 
 ### Troubleshooting
 
-If your SVG specifies `stroke-width` attributes, they will override the component's `strokeWidth` prop. Remove stroke attributes from individual paths to let the component control them.
+If your SVG specifies `stroke-width` attributes on individual child paths, they will override the component's `strokeWidth` prop. Keep shared stroke attributes on the root `<svg>` and remove them from individual paths if you want consumers to control stroke weight.
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
index cca26003006..f8d5cce061b 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
@@ -12,7 +12,7 @@ import {
   Edit2,
   FolderPlus,
   List,
-  Loader,
+  LoaderCircle,
   RefreshCw,
   Search,
   Upload,
@@ -61,7 +61,7 @@ const HeaderPathEdit = ({ loading, isSearching, breadcrumbs, togglePathEdit }: a
     >
       {loading.isLoading ? (
         <div className="ml-2 flex items-center gap-x-3">
-          <Loader size={14} strokeWidth={2} className="animate-spin" />
+          <LoaderCircle size={14} strokeWidth={2} className="animate-spin" />
           <p className="text-sm text-foreground-light">{loading.message}</p>
         </div>
       ) : (
@@ -113,7 +113,7 @@ const HeaderBreadcrumbs = ({
 
   return loading.isLoading ? (
     <div className="ml-2 flex items-center">
-      <Loader size={16} strokeWidth={2} className="animate-spin" />
+      <LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
       <p className="ml-3 text-sm">{loading.message}</p>
     </div>
   ) : (
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRow.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRow.tsx
index a65afc9403b..79e9362c414 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRow.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRow.tsx
@@ -1,4 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { FilesBucket as FilesBucketIcon } from 'icons'
+import { formatBytes } from 'lib/helpers'
 import { find, isEmpty, isEqual } from 'lodash'
 import {
   AlertCircle,
@@ -7,20 +10,16 @@ import {
   Edit,
   File,
   Film,
+  FolderOpen,
   Image,
-  Loader,
+  LoaderCircle,
   MoreVertical,
   Move,
   Music,
   Trash2,
 } from 'lucide-react'
-import { useContextMenu } from 'react-contexify'
-import SVG from 'react-inlinesvg'
-
-import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { BASE_PATH } from 'lib/constants'
-import { formatBytes } from 'lib/helpers'
 import type { CSSProperties } from 'react'
+import { useContextMenu } from 'react-contexify'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import {
   Checkbox,
@@ -38,6 +37,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
+
 import {
   CONTEXT_MENU_KEYS,
   STORAGE_ROW_STATUS,
@@ -54,47 +54,42 @@ export const RowIcon = ({
   view,
   status,
   fileType,
+  isOpened = false,
   mimeType,
 }: {
   view: STORAGE_VIEWS
   status: STORAGE_ROW_STATUS
   fileType: string
+  isOpened?: boolean
   mimeType: string | undefined
 }) => {
   if (view === STORAGE_VIEWS.LIST && status === STORAGE_ROW_STATUS.LOADING) {
-    return <Loader size={16} strokeWidth={2} className="animate-spin" />
+    return (
+      <LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
+    )
   }
 
-  if (fileType === STORAGE_ROW_TYPES.BUCKET || fileType === STORAGE_ROW_TYPES.FOLDER) {
-    const iconSrc =
-      fileType === STORAGE_ROW_TYPES.BUCKET
-        ? `${BASE_PATH}/img/bucket-filled.svg`
-        : fileType === STORAGE_ROW_TYPES.FOLDER
-          ? `${BASE_PATH}/img/folder-filled.svg`
-          : `${BASE_PATH}/img/file-filled.svg`
-    return (
-      <SVG
-        src={iconSrc}
-        preProcessor={(code) =>
-          code.replace(/svg/, 'svg class="w-4 h-4 text-color-inherit opacity-75"')
-        }
-      />
+  if (fileType === STORAGE_ROW_TYPES.FOLDER) {
+    return isOpened ? (
+      <FolderOpen size={16} strokeWidth={2} className="text-foreground-lighter" />
+    ) : (
+      <FilesBucketIcon size={16} strokeWidth={2} className="text-foreground-lighter" />
     )
   }
 
   if (mimeType?.includes('image')) {
-    return <Image size={16} strokeWidth={2} />
+    return <Image size={16} className="text-foreground-lighter" />
   }
 
   if (mimeType?.includes('audio')) {
-    return <Music size={16} strokeWidth={2} />
+    return <Music size={16} strokeWidth={2} className="text-foreground-lighter" />
   }
 
   if (mimeType?.includes('video')) {
-    return <Film size={16} strokeWidth={2} />
+    return <Film size={16} strokeWidth={2} className="text-foreground-lighter" />
   }
 
-  return <File size={16} strokeWidth={2} />
+  return <File size={16} strokeWidth={2} className="text-foreground-lighter" />
 }
 
 interface FileExplorerRowProps {
@@ -173,19 +168,19 @@ export const FileExplorerRow = ({
             ? [
                 {
                   name: 'Rename',
-                  icon: <Edit size={14} strokeWidth={1} />,
+                  icon: <Edit size={12} className="text-foreground-light" />,
                   onClick: () => setSelectedItemToRename(itemWithColumnIndex),
                 },
               ]
             : []),
           {
             name: 'Download',
-            icon: <Download size={14} strokeWidth={1} />,
+            icon: <Download size={12} className="text-foreground-light" />,
             onClick: () => downloadFolder(itemWithColumnIndex),
           },
           {
             name: 'Copy path to folder',
-            icon: <Copy size={14} strokeWidth={1} />,
+            icon: <Copy size={12} className="text-foreground-light" />,
             onClick: () => copyPathToFolder(openedFolders, itemWithColumnIndex),
           },
           ...(canUpdateFiles
@@ -193,7 +188,7 @@ export const FileExplorerRow = ({
                 { name: 'Separator', icon: undefined, onClick: undefined },
                 {
                   name: 'Delete',
-                  icon: <Trash2 size={14} strokeWidth={1} />,
+                  icon: <Trash2 size={12} className="text-foreground-light" />,
                   onClick: () => setSelectedItemsToDelete([itemWithColumnIndex]),
                 },
               ]
@@ -206,14 +201,14 @@ export const FileExplorerRow = ({
                   ? [
                       {
                         name: 'Get URL',
-                        icon: <Copy size={14} strokeWidth={1} />,
+                        icon: <Copy size={12} className="text-foreground-light" />,
                         onClick: () => onCopyUrl(itemWithColumnIndex.name),
                       },
                     ]
                   : [
                       {
                         name: 'Get URL',
-                        icon: <Copy size={14} strokeWidth={1} />,
+                        icon: <Copy size={12} className="text-foreground-light" />,
                         children: [
                           {
                             name: 'Expire in 1 week',
@@ -239,19 +234,19 @@ export const FileExplorerRow = ({
                     ]),
                 {
                   name: 'Download',
-                  icon: <Download size={14} strokeWidth={1} />,
+                  icon: <Download size={12} className="text-foreground-light" />,
                   onClick: () => downloadFile(itemWithColumnIndex),
                 },
                 ...(canUpdateFiles
                   ? [
                       {
                         name: 'Rename',
-                        icon: <Edit size={14} strokeWidth={1} />,
+                        icon: <Edit size={12} className="text-foreground-light" />,
                         onClick: () => setSelectedItemToRename(itemWithColumnIndex),
                       },
                       {
                         name: 'Move',
-                        icon: <Move size={14} strokeWidth={1} />,
+                        icon: <Move size={12} className="text-foreground-light" />,
                         onClick: () => setSelectedItemsToMove([itemWithColumnIndex]),
                       },
                       { name: 'Separator', icon: undefined, onClick: undefined },
@@ -263,7 +258,7 @@ export const FileExplorerRow = ({
             ? [
                 {
                   name: 'Delete',
-                  icon: <Trash2 size={14} strokeWidth={1} />,
+                  icon: <Trash2 size={12} className="text-foreground-light" />,
                   onClick: () => setSelectedItemsToDelete([itemWithColumnIndex]),
                 },
               ]
@@ -324,7 +319,7 @@ export const FileExplorerRow = ({
           event.stopPropagation()
           event.preventDefault()
           if (item.status !== STORAGE_ROW_STATUS.LOADING && !isOpened && !isPreviewed) {
-            item.type === STORAGE_ROW_TYPES.FOLDER || item.type === STORAGE_ROW_TYPES.BUCKET
+            item.type === STORAGE_ROW_TYPES.FOLDER
               ? openFolder(columnIndex, item)
               : onSelectFile(columnIndex)
           }
@@ -348,6 +343,7 @@ export const FileExplorerRow = ({
                   view={view}
                   status={item.status}
                   fileType={item.type}
+                  isOpened={isOpened}
                   mimeType={item.metadata?.mimetype}
                 />
               </div>
@@ -398,9 +394,9 @@ export const FileExplorerRow = ({
           }
         >
           {item.status === STORAGE_ROW_STATUS.LOADING ? (
-            <Loader
-              className={`animate-spin ${view === STORAGE_VIEWS.LIST ? 'invisible' : ''}`}
-              size={16}
+            <LoaderCircle
+              className={`animate-spin text-foreground-lighter ${view === STORAGE_VIEWS.LIST ? 'invisible' : ''}`}
+              size={14}
               strokeWidth={2}
             />
           ) : (
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx
index a57c4562384..68176cc020b 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx
@@ -1,13 +1,12 @@
 import { Transition } from '@headlessui/react'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { isEmpty } from 'lodash'
-import { AlertCircle, ChevronDown, Copy, Download, Loader, Trash2, X } from 'lucide-react'
-import SVG from 'react-inlinesvg'
-
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { BASE_PATH } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
+import { isEmpty } from 'lodash'
+import { AlertCircle, ChevronDown, Copy, Download, LoaderCircle, Trash2, X } from 'lucide-react'
+import SVG from 'react-inlinesvg'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import {
   Button,
@@ -16,6 +15,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from 'ui'
+
 import { URL_EXPIRY_DURATION } from '../Storage.constants'
 import { StorageItem } from '../Storage.types'
 import { useCopyUrl } from './useCopyUrl'
@@ -41,7 +41,7 @@ const PreviewFile = ({ item }: { item: StorageItem }) => {
   if (isLoading) {
     return (
       <div className="flex h-full w-full items-center justify-center text-foreground-lighter">
-        <Loader size={14} strokeWidth={2} className="animate-spin" />
+        <LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
       </div>
     )
   }
diff --git a/apps/studio/public/img/bucket-filled.svg b/apps/studio/public/img/bucket-filled.svg
deleted file mode 100644
index abf6ea5e043..00000000000
--- a/apps/studio/public/img/bucket-filled.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="23px" height="21px" viewBox="0 0 23 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <title>Group 6</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-6">
-            <path d="M0,2 C4.08145016,2.66666667 7.74811683,3 11,3 C14.2518832,3 17.9185498,2.66666667 22,2 L19.1660126,18.0592619 C19.055643,18.6846956 18.6547827,19.2205336 18.0859564,19.5029965 C16.07617,20.5009988 13.7141845,21 11,21 C8.28582036,21 5.92383852,20.5010006 3.9140545,19.5030018 C3.34522199,19.2205451 2.94435968,18.6847049 2.83398858,18.0592686 L0,2 L0,2 Z" id="Rectangle" fill="#888888"></path>
-            <ellipse id="Oval" fill="#727272" cx="11" cy="2" rx="11" ry="2"></ellipse>
-            <circle id="Oval" fill="#727272" cx="11" cy="7.5" r="1.5"></circle>
-            <path d="M11.5,8 C16.1151574,10.3589239 19.1151574,11.6922572 20.5,12 C21.8848426,12.3077428 21.8848426,11.6532252 20.5,10.0364473" id="Line" stroke="#727272" stroke-linecap="square"></path>
-            <rect id="Rectangle" fill="#888888" transform="translate(19.706608, 9.250860) rotate(10.000000) translate(-19.706608, -9.250860) " x="18.7066082" y="7.75085981" width="2" height="3"></rect>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/apps/studio/public/img/folder-filled.svg b/apps/studio/public/img/folder-filled.svg
deleted file mode 100644
index e179aebbd01..00000000000
--- a/apps/studio/public/img/folder-filled.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="21px" viewBox="0 0 24 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <title>Group 5</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-5">
-            <path d="M2,0 L9.88060242,0 L9.88060242,0 L11.3224046,0.774228654 C11.6133185,0.930445558 11.9383852,1.01220287 12.2685891,1.01220287 L22,1.01220287 C23.1045695,1.01220287 24,1.90763337 24,3.01220287 L24,19 C24,20.1045695 23.1045695,21 22,21 L2,21 C0.8954305,21 1.3527075e-16,20.1045695 0,19 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="Rectangle" fill="#727272"></path>
-            <path d="M2,4.95404091 L10.0483363,4.95404091 L10.0483363,4.95404091 L11.4020388,3.59077368 C11.7775083,3.21265135 12.288349,3 12.8212221,3 L22,3 C23.1045695,3 24,3.8954305 24,5 L24,18 C24,19.1045695 23.1045695,20 22,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,6.95404091 C-1.3527075e-16,5.84947141 0.8954305,4.95404091 2,4.95404091 Z" id="Rectangle" fill="#888888"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/icons/__registry__/index.tsx b/packages/icons/__registry__/index.tsx
index a64698d95c3..6a1b1713733 100644
--- a/packages/icons/__registry__/index.tsx
+++ b/packages/icons/__registry__/index.tsx
@@ -148,10 +148,10 @@ export const Index: Record<string, any> = [
   name: "files-bucket",
   componentName: "FilesBucket",
   deprecated: false,
-  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name FilesBucket\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMy45OTk4OCAyMEgxOS45OTk5QzIwLjUzMDMgMjAgMjEuMDM5IDE5Ljc4OTMgMjEuNDE0MSAxOS40MTQyQzIxLjc4OTIgMTkuMDM5MSAyMS45OTk5IDE4LjUzMDQgMjEuOTk5OSAxOFY4QzIxLjk5OTkgNy40Njk1NyAyMS43ODkyIDYuOTYwODYgMjEuNDE0MSA2LjU4NTc5QzIxLjAzOSA2LjIxMDcxIDIwLjUzMDMgNiAxOS45OTk5IDZIMTIuMDY5OUMxMS43NDA1IDUuOTk4MyAxMS40MTY2IDUuOTE1MjUgMTEuMTI3IDUuNzU4MjRDMTAuODM3NCA1LjYwMTIzIDEwLjU5MTEgNS4zNzUxMiAxMC40MDk5IDUuMUw5LjU4OTg4IDMuOUM5LjQwODcgMy42MjQ4OCA5LjE2MjM3IDMuMzk4NzcgOC44NzI3OCAzLjI0MTc2QzguNTgzMTkgMy4wODQ3NSA4LjI1OTI5IDMuMDAxNyA3LjkyOTg4IDNIMy45OTk4OEMzLjQ2OTQ0IDMgMi45NjA3NCAzLjIxMDcxIDIuNTg1NjYgMy41ODU3OUMyLjIxMDU5IDMuOTYwODYgMS45OTk4OCA0LjQ2OTU3IDEuOTk5ODggNVYxOEMxLjk5OTg4IDE5LjEgMi44OTk4OCAyMCAzLjk5OTg4IDIwWiIgc3Ryb2tlPSIjMDAwIiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsgYm9yZGVyLXJhZGl1czogMnB4IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik01IDEwLjVIMTkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst FilesBucket = createSupabaseIcon(\n  'FilesBucket',\n  [\n    [\n      'path',\n      {\n        d: 'M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z',\n        stroke: 'currentColor',\n        'stroke-width': '1.5',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        key: 'o4u44y',\n      },\n    ],\n    [\n      'path',\n      {\n        d: 'M5 10.5H19',\n        stroke: 'currentColor',\n        'stroke-width': '1.5',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        key: 'cf9ou5',\n      },\n    ],\n  ],\n  { fill: 'none' },\n);\n\nexport default FilesBucket;\n",
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name FilesBucket\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMuOTk5ODggMjBIMTkuOTk5OUMyMC41MzAzIDIwIDIxLjAzOSAxOS43ODkzIDIxLjQxNDEgMTkuNDE0MkMyMS43ODkyIDE5LjAzOTEgMjEuOTk5OSAxOC41MzA0IDIxLjk5OTkgMThWOEMyMS45OTk5IDcuNDY5NTcgMjEuNzg5MiA2Ljk2MDg2IDIxLjQxNDEgNi41ODU3OUMyMS4wMzkgNi4yMTA3MSAyMC41MzAzIDYgMTkuOTk5OSA2SDEyLjA2OTlDMTEuNzQwNSA1Ljk5ODMgMTEuNDE2NiA1LjkxNTI1IDExLjEyNyA1Ljc1ODI0QzEwLjgzNzQgNS42MDEyMyAxMC41OTExIDUuMzc1MTIgMTAuNDA5OSA1LjFMOS41ODk4OCAzLjlDOS40MDg3IDMuNjI0ODggOS4xNjIzNyAzLjM5ODc3IDguODcyNzggMy4yNDE3NkM4LjU4MzE5IDMuMDg0NzUgOC4yNTkyOSAzLjAwMTcgNy45Mjk4OCAzSDMuOTk5ODhDMy40Njk0NCAzIDIuOTYwNzQgMy4yMTA3MSAyLjU4NTY2IDMuNTg1NzlDMi4yMTA1OSAzLjk2MDg2IDEuOTk5ODggNC40Njk1NyAxLjk5OTg4IDVWMThDMS45OTk4OCAxOS4xIDIuODk5ODggMjAgMy45OTk4OCAyMFoiIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik01IDEwLjVIMTkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst FilesBucket = createSupabaseIcon(\n  'FilesBucket',\n  [\n    [\n      'path',\n      {\n        d: 'M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z',\n        stroke: 'currentColor',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        key: '1i7att',\n      },\n    ],\n    [\n      'path',\n      {\n        d: 'M5 10.5H19',\n        stroke: 'currentColor',\n        'stroke-linecap': 'round',\n        'stroke-linejoin': 'round',\n        key: 'ys6uda',\n      },\n    ],\n  ],\n  { fill: 'none', strokeWidth: '1.5' },\n);\n\nexport default FilesBucket;\n",
   component: React.lazy(() => import('icons/src/icons/files-bucket')),
   import: "import { FilesBucket } from 'icons'",
-  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M5 10.5H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M5 10.5H19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
   jsx: "import { FilesBucket } from \"icons\"\n  <FilesBucket/>\n  "
 },
 {
diff --git a/packages/icons/src/icons/files-bucket.ts b/packages/icons/src/icons/files-bucket.ts
index dcfc647247f..2d352e4a450 100644
--- a/packages/icons/src/icons/files-bucket.ts
+++ b/packages/icons/src/icons/files-bucket.ts
@@ -4,7 +4,7 @@ import createSupabaseIcon from '../createSupabaseIcon';
  * @component @name FilesBucket
  * @description Supabase SVG icon component, renders SVG Element with children.
  *
- * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMy45OTk4OCAyMEgxOS45OTk5QzIwLjUzMDMgMjAgMjEuMDM5IDE5Ljc4OTMgMjEuNDE0MSAxOS40MTQyQzIxLjc4OTIgMTkuMDM5MSAyMS45OTk5IDE4LjUzMDQgMjEuOTk5OSAxOFY4QzIxLjk5OTkgNy40Njk1NyAyMS43ODkyIDYuOTYwODYgMjEuNDE0MSA2LjU4NTc5QzIxLjAzOSA2LjIxMDcxIDIwLjUzMDMgNiAxOS45OTk5IDZIMTIuMDY5OUMxMS43NDA1IDUuOTk4MyAxMS40MTY2IDUuOTE1MjUgMTEuMTI3IDUuNzU4MjRDMTAuODM3NCA1LjYwMTIzIDEwLjU5MTEgNS4zNzUxMiAxMC40MDk5IDUuMUw5LjU4OTg4IDMuOUM5LjQwODcgMy42MjQ4OCA5LjE2MjM3IDMuMzk4NzcgOC44NzI3OCAzLjI0MTc2QzguNTgzMTkgMy4wODQ3NSA4LjI1OTI5IDMuMDAxNyA3LjkyOTg4IDNIMy45OTk4OEMzLjQ2OTQ0IDMgMi45NjA3NCAzLjIxMDcxIDIuNTg1NjYgMy41ODU3OUMyLjIxMDU5IDMuOTYwODYgMS45OTk4OCA0LjQ2OTU3IDEuOTk5ODggNVYxOEMxLjk5OTg4IDE5LjEgMi44OTk4OCAyMCAzLjk5OTg4IDIwWiIgc3Ryb2tlPSIjMDAwIiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsgYm9yZGVyLXJhZGl1czogMnB4IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik01IDEwLjVIMTkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=)
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMuOTk5ODggMjBIMTkuOTk5OUMyMC41MzAzIDIwIDIxLjAzOSAxOS43ODkzIDIxLjQxNDEgMTkuNDE0MkMyMS43ODkyIDE5LjAzOTEgMjEuOTk5OSAxOC41MzA0IDIxLjk5OTkgMThWOEMyMS45OTk5IDcuNDY5NTcgMjEuNzg5MiA2Ljk2MDg2IDIxLjQxNDEgNi41ODU3OUMyMS4wMzkgNi4yMTA3MSAyMC41MzAzIDYgMTkuOTk5OSA2SDEyLjA2OTlDMTEuNzQwNSA1Ljk5ODMgMTEuNDE2NiA1LjkxNTI1IDExLjEyNyA1Ljc1ODI0QzEwLjgzNzQgNS42MDEyMyAxMC41OTExIDUuMzc1MTIgMTAuNDA5OSA1LjFMOS41ODk4OCAzLjlDOS40MDg3IDMuNjI0ODggOS4xNjIzNyAzLjM5ODc3IDguODcyNzggMy4yNDE3NkM4LjU4MzE5IDMuMDg0NzUgOC4yNTkyOSAzLjAwMTcgNy45Mjk4OCAzSDMuOTk5ODhDMy40Njk0NCAzIDIuOTYwNzQgMy4yMTA3MSAyLjU4NTY2IDMuNTg1NzlDMi4yMTA1OSAzLjk2MDg2IDEuOTk5ODggNC40Njk1NyAxLjk5OTg4IDVWMThDMS45OTk4OCAxOS4xIDIuODk5ODggMjAgMy45OTk4OCAyMFoiIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik01IDEwLjVIMTkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
  *
  * @param {Object} props - Supabase icons props and any valid SVG attribute
  * @returns {JSX.Element} JSX Element
@@ -18,10 +18,9 @@ const FilesBucket = createSupabaseIcon(
       {
         d: 'M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z',
         stroke: 'currentColor',
-        'stroke-width': '1.5',
         'stroke-linecap': 'round',
         'stroke-linejoin': 'round',
-        key: 'o4u44y',
+        key: '1i7att',
       },
     ],
     [
@@ -29,14 +28,13 @@ const FilesBucket = createSupabaseIcon(
       {
         d: 'M5 10.5H19',
         stroke: 'currentColor',
-        'stroke-width': '1.5',
         'stroke-linecap': 'round',
         'stroke-linejoin': 'round',
-        key: 'cf9ou5',
+        key: 'ys6uda',
       },
     ],
   ],
-  { fill: 'none' },
+  { fill: 'none', strokeWidth: '1.5' },
 );
 
 export default FilesBucket;
diff --git a/packages/icons/src/raw-icons/files-bucket.svg b/packages/icons/src/raw-icons/files-bucket.svg
index 2014992f8eb..909f237781f 100644
--- a/packages/icons/src/raw-icons/files-bucket.svg
+++ b/packages/icons/src/raw-icons/files-bucket.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5 10.5H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 10.5H19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>