diff --git a/packages/components/access-right-select/README.md b/packages/components/access-right-select/README.md
index a193b796fa..753171fc6c 100644
--- a/packages/components/access-right-select/README.md
+++ b/packages/components/access-right-select/README.md
@@ -14,7 +14,7 @@ import AccessRightSelect from "@docspace/components/AccessRightSelect";
     key: "key1",
     title: "Room administrator",
     description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
-    icon: CrownIcon,
+    icon: CrownIconUrl,
     quota: "free",
     color: "#20D21F",
   }}
@@ -37,7 +37,7 @@ import AccessRightSelect from "@docspace/components/AccessRightSelect";
     key: "key1",
     title: "Room administrator",
     description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
-    icon: CrownIcon,
+    icon: CrownIconUrl,
     quota: "free",
     color: "#20D21F",
   }
diff --git a/packages/components/access-right-select/access-right-select.stories.mdx b/packages/components/access-right-select/access-right-select.stories.mdx
index 4cdfcf4168..6ceb2aa285 100644
--- a/packages/components/access-right-select/access-right-select.stories.mdx
+++ b/packages/components/access-right-select/access-right-select.stories.mdx
@@ -48,7 +48,7 @@ import AccessRightSelect from "@docspace/components/access-right-secelt";
     key: "key1",
     title: "Room administrator",
     description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
-    icon: CrownIcon,
+    icon: CrownIconUrl,
     quota: "free",
     color: "#20D21F",
   }
diff --git a/packages/components/access-right-select/data.js b/packages/components/access-right-select/data.js
index aee47d1111..5c0117eafc 100644
--- a/packages/components/access-right-select/data.js
+++ b/packages/components/access-right-select/data.js
@@ -1,17 +1,17 @@
-import AccessNoneIcon from "../../../public/images/access.none.react.svg?url";
-import CheckRoundIcon from "../../../public/images/check.react.svg?url";
-import CommentIcon from "../../../public/images/access.comment.react.svg?url";
-import CrownIcon from "../../../public/images/access.edit.react.svg?url";
-import EyeIcon from "../../../public/images/eye.react.svg?url";
-import PencilIcon from "../../../public/images/access.edit.react.svg?url";
-import ReviewIcon from "../../../public/images/access.review.react.svg?url";
+import AccessNoneIconUrl from "../../../public/images/access.none.react.svg?url";
+import CheckRoundIconUrl from "../../../public/images/check.react.svg?url";
+import CommentIconUrl from "../../../public/images/access.comment.react.svg?url";
+import CrownIconUrl from "../../../public/images/access.edit.react.svg?url";
+import EyeIconUrl from "../../../public/images/eye.react.svg?url";
+import PencilIconUrl from "../../../public/images/access.edit.react.svg?url";
+import ReviewIconUrl from "../../../public/images/access.review.react.svg?url";
 
 export const data = [
   {
     key: "key1",
     label: "Room administrator",
     description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
-    icon: CrownIcon,
+    icon: CrownIconUrl,
     quota: "free",
     color: "#20D21F",
   },
@@ -19,7 +19,7 @@ export const data = [
     key: "key2",
     label: "Full access",
     description: `Edit, upload, create, view, download, delete files and folders.`,
-    icon: CheckRoundIcon,
+    icon: CheckRoundIconUrl,
     quota: "paid",
     color: "#EDC409",
   },
@@ -29,30 +29,30 @@ export const data = [
     key: "key4",
     label: "Editing",
     description: `Editing, viewing, downloading files and folders, filling out forms.`,
-    icon: PencilIcon,
+    icon: PencilIconUrl,
   },
   {
     key: "key5",
     label: "Review",
     description: `Reviewing, viewing, downloading files and folders, filling out forms.`,
-    icon: ReviewIcon,
+    icon: ReviewIconUrl,
   },
   {
     key: "key6",
     label: "Comment",
     description: `Commenting on files, viewing, downloading files and folders, filling out forms.`,
-    icon: CommentIcon,
+    icon: CommentIconUrl,
   },
   {
     key: "key7",
     label: "Read only",
     description: `Viewing, downloading files and folders, filling out forms.`,
-    icon: EyeIcon,
+    icon: EyeIconUrl,
   },
   {
     key: "key8",
     label: "Deny access",
     description: "",
-    icon: AccessNoneIcon,
+    icon: AccessNoneIconUrl,
   },
 ];
diff --git a/packages/components/all/all.stories.js b/packages/components/all/all.stories.js
index fe0558c7ae..e912081327 100644
--- a/packages/components/all/all.stories.js
+++ b/packages/components/all/all.stories.js
@@ -29,6 +29,10 @@ import ToggleContent from "../toggle-content";
 import Tooltip from "../tooltip";
 import SettingsIcon from "../../../public/images/settings.react.svg";
 import CatalogFolderIcon from "../../../public/images/catalog.folder.react.svg";
+import CatalogEmployeeUrl from "../../../public/images/catalog.employee.react.svg?url";
+import ItemActiveUrl from "../../../public/images/item.active.react.svg?url";
+import SearchUrl from "../../../public/images/search.react.svg?url";
+
 const array_items = [
   {
     key: "0",
@@ -50,28 +54,28 @@ const array_items = [
 const options = [
   {
     key: 0,
-    icon: "static/images/catalog.employee.react.svg", // optional item
+    icon: CatalogEmployeeUrl, // optional item
     label: "Option 1",
     disabled: false, // optional item
     onClick: () => {}, // optional item
   },
   {
     key: 1,
-    icon: "static/images/catalog.employee.react.svg", // optional item
+    icon: CatalogEmployeeUrl, // optional item
     label: "Option 2",
     disabled: false, // optional item
     onClick: () => {}, // optional item
   },
   {
     key: 2,
-    icon: "static/images/catalog.employee.react.svg", // optional item
+    icon: CatalogEmployeeUrl, // optional item
     label: "Option 3",
     disabled: true, // optional item
     onClick: () => {}, // optional item
   },
   {
     key: 3,
-    icon: "static/images/catalog.employee.react.svg", // optional item
+    icon: CatalogEmployeeUrl, // optional item
     label: "Option 4",
     disabled: false, // optional item
     onClick: () => {}, // optional item
@@ -101,13 +105,13 @@ const elementIcon = <CatalogFolderIcon size="big" />;
 const elementComboBox = (
   <ComboBox
     options={[
-      { key: 1, icon: "static/images/item.active.react.svg", label: "Open" },
+      { key: 1, icon: ItemActiveUrl, label: "Open" },
       { key: 2, icon: "CheckIcon", label: "Closed" },
     ]}
     onSelect={(option) => console.log(option)}
     selectedOption={{
       key: 0,
-      icon: "static/images/item.active.react.svg",
+      icon: ItemActiveUrl,
       label: "",
     }}
     scaled={false}
@@ -330,7 +334,7 @@ const Template = (args) => (
             {({ value, set }) => (
               <InputBlock
                 placeholder="Add input text"
-                iconName={"static/images/search.react.svg"}
+                iconName={SearchUrl}
                 onIconClick={() => {}}
                 onChange={(e) => set(e.target.value)}
                 value={value}