diff --git a/webapp/IronCalc/src/icons/index.ts b/webapp/IronCalc/src/icons/index.ts
index 5cab3fd..21e4120 100644
--- a/webapp/IronCalc/src/icons/index.ts
+++ b/webapp/IronCalc/src/icons/index.ts
@@ -18,6 +18,7 @@ import InsertRowAboveIcon from "./insert-row-above.svg?react";
 import InsertRowBelow from "./insert-row-below.svg?react";
 
 import IronCalcIcon from "./ironcalc_icon.svg?react";
+import IronCalcIconWhite from "./ironcalc_icon_white.svg?react";
 import IronCalcLogo from "./orange+black.svg?react";
 
 import Fx from "./fx.svg?react";
@@ -41,6 +42,7 @@ export {
   InsertRowAboveIcon,
   InsertRowBelow,
   IronCalcIcon,
+  IronCalcIconWhite,
   IronCalcLogo,
   Fx,
 };
diff --git a/webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/ironcalc_icon_white.svg b/webapp/IronCalc/src/icons/ironcalc_icon_white.svg
similarity index 100%
rename from webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/ironcalc_icon_white.svg
rename to webapp/IronCalc/src/icons/ironcalc_icon_white.svg
diff --git a/webapp/IronCalc/src/index.ts b/webapp/IronCalc/src/index.ts
index dc17284..d9f9f48 100644
--- a/webapp/IronCalc/src/index.ts
+++ b/webapp/IronCalc/src/index.ts
@@ -1,5 +1,5 @@
 import init, { Model } from "@ironcalc/wasm";
 import IronCalc from "./IronCalc";
-import { IronCalcIcon, IronCalcLogo } from "./icons";
+import { IronCalcIcon, IronCalcIconWhite, IronCalcLogo } from "./icons";
 
-export { init, Model, IronCalc, IronCalcIcon, IronCalcLogo };
+export { init, Model, IronCalc, IronCalcIcon, IronCalcIconWhite, IronCalcLogo };
diff --git a/webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx b/webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx
index 66e3d0e..f09b114 100644
--- a/webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx
+++ b/webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx
@@ -1,8 +1,8 @@
+import { IronCalcIconWhite as IronCalcIcon } from "@ironcalc/workbook";
 import { Dialog, styled } from "@mui/material";
 import { House, Table, TicketsPlane, X } from "lucide-react";
 import { useState } from "react";
 import TemplatesListItem from "./TemplatesListItem";
-import IronCalcIcon from "./ironcalc_icon_white.svg";
 
 function WelcomeDialog(properties: {
   onClose: () => void;
@@ -28,7 +28,7 @@ function WelcomeDialog(properties: {
         <DialogHeader>
           <DialogHeaderTitleWrapper>
             <DialogHeaderLogoWrapper>
-              <DialogHeaderLogo src={IronCalcIcon} />
+              <IronCalcIcon />
             </DialogHeaderLogoWrapper>
             <DialogHeaderTitle>Welcome to IronCalc</DialogHeaderTitle>
             <DialogHeaderTitleSubtitle>
@@ -161,14 +161,11 @@ const DialogHeaderLogoWrapper = styled("div")`
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transform: rotate(-8deg);
   user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-`;
-
-const DialogHeaderLogo = styled("img")`
-  width: 18px;
-  height: auto;
+  
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 `;
 
 const Cross = styled("div")`