diff --git a/.changeset/migrate-sidebar-icons-to-lucide.md b/.changeset/migrate-sidebar-icons-to-lucide.md
new file mode 100644
index 00000000000..e2ec4f93bf2
--- /dev/null
+++ b/.changeset/migrate-sidebar-icons-to-lucide.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Migrated sidebar icons to Lucide React for better consistency. Replaced custom SVG icons (Cloud, Graphql, Gift) with Lucide equivalents and refactored TerminalIcon to match Lucide conventions.
diff --git a/src/components/Sidebar/LucideIconsWrapper.tsx b/src/components/Sidebar/LucideIconsWrapper.tsx
new file mode 100644
index 00000000000..8df1c12e15a
--- /dev/null
+++ b/src/components/Sidebar/LucideIconsWrapper.tsx
@@ -0,0 +1,15 @@
+import { Box } from "@saleor/macaw-ui-next";
+
+// Constants for Lucide icon transform offsets
+const LUCIDE_ICON_TRANSLATE_X = -3.5;
+const LUCIDE_ICON_TRANSLATE_Y = -2;
+
+export const LucideIconsWrapper = ({ children }: { children: React.ReactNode }) => (
+ // Applying slight transform to center lucide icons vertically
+ // TODO: remove when we use lucide icons everywhere in sidebar
+
+ {children}
+
+);
diff --git a/src/components/Sidebar/menu/EnvironmentLink.tsx b/src/components/Sidebar/menu/EnvironmentLink.tsx
index 948b7c69ec0..bcf4ebd8677 100644
--- a/src/components/Sidebar/menu/EnvironmentLink.tsx
+++ b/src/components/Sidebar/menu/EnvironmentLink.tsx
@@ -1,7 +1,8 @@
-import { Cloud } from "@dashboard/icons/Cloud";
import { Box, Text } from "@saleor/macaw-ui-next";
+import { CloudIcon } from "lucide-react";
import { FormattedMessage } from "react-intl";
+import { LucideIconsWrapper } from "../LucideIconsWrapper";
import { useEnvLink } from "./hooks/useEnvLink";
export const EnvironmentLink = () => {
@@ -19,7 +20,9 @@ export const EnvironmentLink = () => {
alignItems="center"
>
-
+
+
+
diff --git a/src/components/Sidebar/shortcuts/useShortcuts.tsx b/src/components/Sidebar/shortcuts/useShortcuts.tsx
index 84d9d672fba..ed34f29613e 100644
--- a/src/components/Sidebar/shortcuts/useShortcuts.tsx
+++ b/src/components/Sidebar/shortcuts/useShortcuts.tsx
@@ -1,16 +1,16 @@
import { useDevModeContext } from "@dashboard/components/DevModePanel/hooks";
import { useNavigatorSearchContext } from "@dashboard/components/NavigatorSearch/useNavigatorSearchContext";
-import { Graphql } from "@dashboard/icons/Graphql";
+import { GraphqlIcon } from "@dashboard/icons/GraphqlIcon";
import { TerminalIcon } from "@dashboard/icons/TerminalIcon";
import { Ripple } from "@dashboard/ripples/components/Ripple";
import { rippleIntroducedRipples } from "@dashboard/ripples/ripples/introducedRipples";
import { useAllRipplesModalState } from "@dashboard/ripples/state";
import { Box } from "@saleor/macaw-ui-next";
-import { Gift } from "lucide-react";
+import { GiftIcon } from "lucide-react";
import { useCallback, useMemo } from "react";
-import * as React from "react";
import { useIntl } from "react-intl";
+import { LucideIconsWrapper } from "../LucideIconsWrapper";
import { shortcutsMessages } from "./messages";
import { getShortcutLeadingKey } from "./utils";
@@ -45,7 +45,7 @@ export const useShortcuts = (): Shortcut[] => {
id: "search",
name: intl.formatMessage(shortcutsMessages.search),
icon: (
-
+
),
@@ -55,7 +55,7 @@ export const useShortcuts = (): Shortcut[] => {
{
id: "playground",
name: intl.formatMessage(shortcutsMessages.playground),
- icon: ,
+ icon: ,
shortcut: `${controlKey} + '`,
action: handleOpenPlayground,
},
@@ -69,7 +69,11 @@ export const useShortcuts = (): Shortcut[] => {
),
- icon: ,
+ icon: (
+
+
+
+ ),
action: () => {
setModalState(true);
},
diff --git a/src/icons/Cloud.tsx b/src/icons/Cloud.tsx
deleted file mode 100644
index 7b4ab51d4ff..00000000000
--- a/src/icons/Cloud.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-export const Cloud = () => (
-
-);
diff --git a/src/icons/Graphql.tsx b/src/icons/Graphql.tsx
deleted file mode 100644
index 4af48120e22..00000000000
--- a/src/icons/Graphql.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-export const Graphql = () => {
- return (
- // Mark component as candidate for macaw-ui
-
- );
-};
diff --git a/src/icons/GraphqlIcon.tsx b/src/icons/GraphqlIcon.tsx
new file mode 100644
index 00000000000..791a433dac0
--- /dev/null
+++ b/src/icons/GraphqlIcon.tsx
@@ -0,0 +1,21 @@
+export const GraphqlIcon = () => (
+
+);
diff --git a/src/icons/TerminalIcon.tsx b/src/icons/TerminalIcon.tsx
index 0425cce726c..e9f913248e4 100644
--- a/src/icons/TerminalIcon.tsx
+++ b/src/icons/TerminalIcon.tsx
@@ -1,16 +1,14 @@
-export const TerminalIcon = () => {
- return (
-
- );
-};
+export const TerminalIcon = () => (
+
+);