From ced503dbf5ae992a29884387d5a3ce97919424cc Mon Sep 17 00:00:00 2001
From: Brian Siao Tick Chong <bsiaotickchong@gmail.com>
Date: Wed, 16 Oct 2024 11:40:00 -0700
Subject: [PATCH] [ui] add path props to most icons (#12933)

- adds path props to most icons
- didn't change icons that either were not affected by the stroke props
(I checked them all manually)
- fixes default colors for some icons
- some stroke widths were large decimals so I rounded some of them if
the effect was negligible

GitOrigin-RevId: 72e8c42aa41667c2aff80a5d118dd2aafcf14389
---
 packages/ui/src/components/Icon/Icon.tsx      |  4 +--
 packages/ui/src/icons/AI.tsx                  | 14 ++------
 packages/ui/src/icons/AnchorLink.tsx          | 14 +++++---
 packages/ui/src/icons/ArrowCircle.tsx         | 13 ++++---
 .../ui/src/icons/ArrowCornerDownRight.tsx     | 14 +++++---
 packages/ui/src/icons/ArrowDown.tsx           | 14 +++++---
 packages/ui/src/icons/ArrowLeft.tsx           | 14 +++++---
 packages/ui/src/icons/ArrowRight.tsx          | 14 +++++---
 packages/ui/src/icons/ArrowUp.tsx             | 14 +++++---
 packages/ui/src/icons/ArrowUpRight.tsx        | 14 +++++---
 packages/ui/src/icons/ArrowsDown.tsx          | 14 +++++---
 packages/ui/src/icons/ArrowsHorizontal.tsx    | 20 +++++++----
 packages/ui/src/icons/ArrowsUp.tsx            | 14 +++++---
 packages/ui/src/icons/Bank.tsx                | 14 +++++---
 packages/ui/src/icons/BitcoinB.tsx            | 14 +++++---
 packages/ui/src/icons/CaretRight.tsx          | 14 +++++---
 .../ui/src/icons/CentralArrowShareRight.tsx   | 13 +++++--
 packages/ui/src/icons/Checkmark.tsx           | 13 +++++--
 packages/ui/src/icons/CheckmarkCircle.tsx     | 15 ++++++--
 packages/ui/src/icons/Chevron.tsx             | 14 +++++---
 packages/ui/src/icons/ChevronLeft.tsx         | 14 +++++---
 packages/ui/src/icons/CircleCheck.tsx         | 15 ++++++--
 packages/ui/src/icons/CircleCheckOutline.tsx  | 12 +++++--
 packages/ui/src/icons/CirclePlus.tsx          | 15 ++++++--
 packages/ui/src/icons/Clock.tsx               | 14 +++++---
 packages/ui/src/icons/Close.tsx               | 13 +++++--
 packages/ui/src/icons/Code.tsx                | 14 +++++---
 packages/ui/src/icons/CreditCard.tsx          | 12 +++++--
 packages/ui/src/icons/DeleteIcon.tsx          | 19 +++++++----
 packages/ui/src/icons/Dollar.tsx              | 14 +++++---
 packages/ui/src/icons/DollarManrope.tsx       | 14 +++++---
 packages/ui/src/icons/DollarManropeSmall.tsx  | 14 +++++---
 packages/ui/src/icons/Download.tsx            | 14 +++++++-
 packages/ui/src/icons/Envelope.tsx            | 14 +++++---
 packages/ui/src/icons/ExclamationPoint.tsx    | 25 +++++++++-----
 packages/ui/src/icons/Eye.tsx                 | 16 +++++++--
 packages/ui/src/icons/FramedLetterI.tsx       | 17 +++++++---
 packages/ui/src/icons/Gear.tsx                | 14 +++++++-
 packages/ui/src/icons/HeartOutline.tsx        | 11 ++++--
 packages/ui/src/icons/Home.tsx                | 11 ++++--
 packages/ui/src/icons/Info.tsx                | 26 ++++++++------
 packages/ui/src/icons/Lock.tsx                |  8 +++--
 packages/ui/src/icons/MagicWand.tsx           | 26 ++++++++------
 packages/ui/src/icons/Minus.tsx               | 11 ++++--
 packages/ui/src/icons/Monitor.tsx             | 20 +++++++----
 packages/ui/src/icons/NodeAdd.tsx             | 10 ++++--
 packages/ui/src/icons/Notebook.tsx            | 14 +++++---
 packages/ui/src/icons/PaperPlane.tsx          | 13 +++++--
 packages/ui/src/icons/Pencil.tsx              | 13 +++++--
 packages/ui/src/icons/Person.tsx              | 15 +++++---
 packages/ui/src/icons/PiggyBank.tsx           | 16 ++++++---
 packages/ui/src/icons/Plus.tsx                | 23 ++++++++-----
 packages/ui/src/icons/QuestionCircle.tsx      | 14 +++++---
 .../ui/src/icons/QuestionCircleStrong.tsx     | 14 +++++---
 packages/ui/src/icons/ReceiptBill.tsx         | 14 +++++---
 packages/ui/src/icons/Recycling.tsx           | 14 +++++---
 packages/ui/src/icons/Remove.tsx              | 11 ++++--
 packages/ui/src/icons/Restart.tsx             | 13 +++++--
 packages/ui/src/icons/Roadmap.tsx             | 15 +++++---
 packages/ui/src/icons/Satoshi.tsx             | 34 +++++++++++++++----
 packages/ui/src/icons/SatoshiRounded.tsx      | 27 +++++++++------
 packages/ui/src/icons/Search.tsx              | 14 +++++---
 packages/ui/src/icons/SecurityKey.tsx         |  8 +++--
 packages/ui/src/icons/Selector.tsx            | 20 +++++++----
 packages/ui/src/icons/Share.tsx               |  6 ++--
 packages/ui/src/icons/Sidebar.tsx             | 14 +++++---
 packages/ui/src/icons/Sort.tsx                | 11 ++++--
 packages/ui/src/icons/StackedLines.tsx        | 11 ++++--
 packages/ui/src/icons/TapSingle.tsx           |  2 +-
 packages/ui/src/icons/Team.tsx                | 14 +++++---
 packages/ui/src/icons/Terminal.tsx            | 14 +++++---
 packages/ui/src/icons/Trash.tsx               | 27 ++++++++++++---
 packages/ui/src/icons/UmaBridgeLoading.tsx    | 21 +++++++++---
 .../src/icons/UmaBridgeLoadingTransparent.tsx | 13 ++++---
 packages/ui/src/icons/WarningSign.tsx         | 27 +++++++--------
 packages/ui/src/icons/types.tsx               |  6 ++++
 76 files changed, 798 insertions(+), 327 deletions(-)

diff --git a/packages/ui/src/components/Icon/Icon.tsx b/packages/ui/src/components/Icon/Icon.tsx
index 2d846a1d1..dd86f894c 100644
--- a/packages/ui/src/components/Icon/Icon.tsx
+++ b/packages/ui/src/components/Icon/Icon.tsx
@@ -113,10 +113,10 @@ export const IconContainer = styled.span<IconContainerProps>`
       */
 
       .${invertFillColor} {
-        fill: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+        fill: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
       }
       .${invertStrokeColor} {
-        stroke: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+        stroke: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
       }
     }
   `;
diff --git a/packages/ui/src/icons/AI.tsx b/packages/ui/src/icons/AI.tsx
index 98ebae0d2..7bcb83eb2 100644
--- a/packages/ui/src/icons/AI.tsx
+++ b/packages/ui/src/icons/AI.tsx
@@ -1,22 +1,12 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-import {
-  type PathLinecap,
-  type PathLinejoin,
-  type PathStrokeWidth,
-} from "./types.js";
-
-type AIProps = {
-  strokeWidth?: PathStrokeWidth;
-  strokeLinecap?: PathLinecap;
-  strokeLinejoin?: PathLinejoin;
-};
+import { type PathProps } from "./types.js";
 
 export function AI({
   strokeWidth = "2",
   strokeLinecap = "round",
   strokeLinejoin = "round",
-}: AIProps) {
+}: PathProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/ui/src/icons/AnchorLink.tsx b/packages/ui/src/icons/AnchorLink.tsx
index 6727f235a..b05581f83 100644
--- a/packages/ui/src/icons/AnchorLink.tsx
+++ b/packages/ui/src/icons/AnchorLink.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-export function AnchorLink() {
+import { type PathProps } from "./types.js";
+
+export function AnchorLink({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -11,9 +17,9 @@ export function AnchorLink() {
       <path
         d="M7.49989 12.5L12.4998 7.50004M6.24989 8.75003L4.99989 10.0001C3.61923 11.3808 3.61925 13.6193 4.99992 15V15C6.38064 16.3807 8.61924 16.3807 9.99993 14.9999L11.2498 13.7499M13.7498 11.25L14.9999 9.99994C16.3805 8.61924 16.3805 6.3807 14.9998 5.00001V5.00001C13.6191 3.6193 11.3805 3.61931 9.99984 5.00004L8.74987 6.25005"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowCircle.tsx b/packages/ui/src/icons/ArrowCircle.tsx
index c7a771f11..dd219ac1d 100644
--- a/packages/ui/src/icons/ArrowCircle.tsx
+++ b/packages/ui/src/icons/ArrowCircle.tsx
@@ -1,8 +1,13 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
 import { invertStrokeColor } from "./constants.js";
+import { type PathProps } from "./types.js";
 
-export function ArrowCircle() {
+export function ArrowCircle({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -14,9 +19,9 @@ export function ArrowCircle() {
       <path
         className={invertStrokeColor}
         d="M21 18V9M21 9H12M21 9L9.5 20.5"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowCornerDownRight.tsx b/packages/ui/src/icons/ArrowCornerDownRight.tsx
index f5fd9c13b..bb64dc6f7 100644
--- a/packages/ui/src/icons/ArrowCornerDownRight.tsx
+++ b/packages/ui/src/icons/ArrowCornerDownRight.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowCornerDownRight() {
+import { type PathProps } from "./types.js";
+
+export function ArrowCornerDownRight({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function ArrowCornerDownRight() {
       <path
         d="M2.66699 3.3335V10.0002H13.3337M13.3337 10.0002L10.667 7.3335M13.3337 10.0002L10.667 12.6668"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowDown.tsx b/packages/ui/src/icons/ArrowDown.tsx
index 5182f255a..8401d53a5 100644
--- a/packages/ui/src/icons/ArrowDown.tsx
+++ b/packages/ui/src/icons/ArrowDown.tsx
@@ -1,4 +1,10 @@
-export function ArrowDown() {
+import { type PathProps } from "./types.js";
+
+export function ArrowDown({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ArrowDown() {
       <path
         d="M1 9.52123L3.88111 12.4023M3.88111 12.4023L6.76222 9.52123M3.88111 12.4023L3.88111 0.8779M9.73778 9.52123"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowLeft.tsx b/packages/ui/src/icons/ArrowLeft.tsx
index e63dc23c9..b38dc86f8 100644
--- a/packages/ui/src/icons/ArrowLeft.tsx
+++ b/packages/ui/src/icons/ArrowLeft.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowLeft() {
+import { type PathProps } from "./types.js";
+
+export function ArrowLeft({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function ArrowLeft() {
       <path
         d="M16.4744 8.00005L1.52344 8.00005M1.52344 8.00005L7.52344 14.2858M1.52344 8.00005L7.52344 1.71434"
         stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowRight.tsx b/packages/ui/src/icons/ArrowRight.tsx
index 20b4b0ec7..ecb1d8567 100644
--- a/packages/ui/src/icons/ArrowRight.tsx
+++ b/packages/ui/src/icons/ArrowRight.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowRight() {
+import { type PathProps } from "./types.js";
+
+export function ArrowRight({
+  strokeWidth = "1.33333",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function ArrowRight() {
       <path
         d="M1.01704 4.99993L10.9844 4.99993M10.9844 4.99993L6.98438 0.809448M10.9844 4.99993L6.98437 9.1904"
         stroke="currentColor"
-        strokeWidth="1.33333"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowUp.tsx b/packages/ui/src/icons/ArrowUp.tsx
index 8340dccb6..db5f3f092 100644
--- a/packages/ui/src/icons/ArrowUp.tsx
+++ b/packages/ui/src/icons/ArrowUp.tsx
@@ -1,4 +1,10 @@
-export function ArrowUp() {
+import { type PathProps } from "./types.js";
+
+export function ArrowUp({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ArrowUp() {
       <path
         d="M1 3.75904L3.88111 0.87793M3.88111 0.87793L6.76222 3.75904M3.88111 0.87793L3.88111 12.4024"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowUpRight.tsx b/packages/ui/src/icons/ArrowUpRight.tsx
index 866375c3c..dfcd3ed8b 100644
--- a/packages/ui/src/icons/ArrowUpRight.tsx
+++ b/packages/ui/src/icons/ArrowUpRight.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowUpRight() {
+import { type PathProps } from "./types.js";
+
+export function ArrowUpRight({
+  strokeWidth = "2.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function ArrowUpRight() {
       <path
         d="M22.4167 17.4167V1.58333M22.4167 1.58333H6.58333M22.4167 1.58333L2 22"
         stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowsDown.tsx b/packages/ui/src/icons/ArrowsDown.tsx
index e04cd5b0a..250ee4107 100644
--- a/packages/ui/src/icons/ArrowsDown.tsx
+++ b/packages/ui/src/icons/ArrowsDown.tsx
@@ -1,4 +1,10 @@
-export function ArrowsDown() {
+import { type PathProps } from "./types.js";
+
+export function ArrowsDown({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ArrowsDown() {
       <path
         d="M1 9.52123L3.88111 12.4023M3.88111 12.4023L6.76222 9.52123M3.88111 12.4023L3.88111 0.8779M9.73778 9.52123L12.6189 12.4023M12.6189 12.4023L15.5 9.52123M12.6189 12.4023L12.6189 0.8779"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowsHorizontal.tsx b/packages/ui/src/icons/ArrowsHorizontal.tsx
index c03d2f671..10b5ae6b0 100644
--- a/packages/ui/src/icons/ArrowsHorizontal.tsx
+++ b/packages/ui/src/icons/ArrowsHorizontal.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowsHorizontal() {
+import { type PathProps } from "./types.js";
+
+export function ArrowsHorizontal({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,16 +17,16 @@ export function ArrowsHorizontal() {
       <path
         d="M16.3846 1L21.0009 5.61631M21.0009 5.61631L16.3846 10.2326M21.0009 5.61631H2.53564"
         stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M5.6164 23.0041L1.00009 18.3878M1.00009 18.3878L5.6164 13.7715M1.00009 18.3878L19.4653 18.3878"
         stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ArrowsUp.tsx b/packages/ui/src/icons/ArrowsUp.tsx
index c40508aeb..327de743e 100644
--- a/packages/ui/src/icons/ArrowsUp.tsx
+++ b/packages/ui/src/icons/ArrowsUp.tsx
@@ -1,4 +1,10 @@
-export function ArrowsUp() {
+import { type PathProps } from "./types.js";
+
+export function ArrowsUp({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ArrowsUp() {
       <path
         d="M1 3.75904L3.88111 0.87793M3.88111 0.87793L6.76222 3.75904M3.88111 0.87793L3.88111 12.4024M9.73778 3.75904L12.6189 0.87793M12.6189 0.87793L15.5 3.75904M12.6189 0.87793L12.6189 12.4024"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Bank.tsx b/packages/ui/src/icons/Bank.tsx
index 865b30d05..00853999d 100644
--- a/packages/ui/src/icons/Bank.tsx
+++ b/packages/ui/src/icons/Bank.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Bank() {
+import { type PathProps } from "./types.js";
+
+export function Bank({
+  strokeWidth = "1.5",
+  strokeLinecap = "square",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Bank() {
       <path
         d="M20.2297 8.83298V17.6817M15.6892 17.6817V8.83298M3.77027 8.83298V17.6817M8.31081 17.6817V8.83298M20.5467 17.6817H3.4533C2.9647 17.6817 2.53092 17.9863 2.37642 18.4381L1.99803 19.5442C1.75302 20.2604 2.30012 21 3.07492 21H20.9251C21.6998 21 22.247 20.2604 22.002 19.5442L21.6236 18.4381C21.4691 17.9863 21.0353 17.6817 20.5467 17.6817ZM21.3649 8.83298H2.63514C2.00822 8.83298 1.5 8.33776 1.5 7.72689V7.21615C1.5 6.79885 1.74102 6.41707 2.12328 6.22889L11.4882 1.61883C11.81 1.46039 12.19 1.46039 12.5118 1.61883L21.8767 6.22889C22.259 6.41707 22.5 6.79885 22.5 7.21615V7.72689C22.5 8.33776 21.9918 8.83298 21.3649 8.83298Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="square"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/BitcoinB.tsx b/packages/ui/src/icons/BitcoinB.tsx
index bc43fef83..42a140621 100644
--- a/packages/ui/src/icons/BitcoinB.tsx
+++ b/packages/ui/src/icons/BitcoinB.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function BitcoinB() {
+import { type PathProps } from "./types.js";
+
+export function BitcoinB({
+  strokeWidth = "1.125",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function BitcoinB() {
       <path
         d="M2.52899 2.51568H1M2.52899 2.51568V6.30488M2.52899 2.51568H3.12195M2.52899 6.30488H6.25472M2.52899 6.30488V10.0941M6.25472 6.30488C7.61193 6.30488 8.42683 7.15312 8.42683 8.19948C8.42683 9.24584 7.61193 10.0941 6.25472 10.0941M6.25472 6.30488C7.61193 6.30488 8.42683 5.45664 8.42683 4.41028C8.42683 3.36392 7.61193 2.51568 6.25472 2.51568M6.25472 10.0941V11.875M6.25472 10.0941H3.12195M2.52899 10.0941H1M2.52899 10.0941H3.12195M6.25472 2.51568V1M6.25472 2.51568H3.12195M3.12195 1V2.51568M3.12195 10.0941V11.875"
         stroke="currentColor"
-        strokeWidth="1.125"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/CaretRight.tsx b/packages/ui/src/icons/CaretRight.tsx
index 7b65aa8c2..7995296f8 100644
--- a/packages/ui/src/icons/CaretRight.tsx
+++ b/packages/ui/src/icons/CaretRight.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function CaretRight() {
+import { type PathProps } from "./types.js";
+
+export function CaretRight({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function CaretRight() {
       <path
         d="M7.5 3.33301L13.5774 9.41042C13.9028 9.73584 13.9028 10.2635 13.5774 10.5889L7.5 16.6663"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/CentralArrowShareRight.tsx b/packages/ui/src/icons/CentralArrowShareRight.tsx
index 33d2c6365..53c6b16d3 100644
--- a/packages/ui/src/icons/CentralArrowShareRight.tsx
+++ b/packages/ui/src/icons/CentralArrowShareRight.tsx
@@ -1,4 +1,10 @@
-export function CentralArrowShareRight() {
+import { type PathProps } from "./types.js";
+
+export function CentralArrowShareRight({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps = {}) {
   return (
     <svg
       width="22"
@@ -10,8 +16,9 @@ export function CentralArrowShareRight() {
       <path
         d="M21 9L11.5 0.75V5.5C3 5.5 0.75 8.75 0.75 17.25C2.25 14.25 3 12.5 11.5 12.5V17.25L21 9Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Checkmark.tsx b/packages/ui/src/icons/Checkmark.tsx
index f2f8aa9bd..dddd6420a 100644
--- a/packages/ui/src/icons/Checkmark.tsx
+++ b/packages/ui/src/icons/Checkmark.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Checkmark() {
+import { type PathProps } from "./types.js";
+
+export function Checkmark({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,8 +17,9 @@ export function Checkmark() {
       <path
         d="M10.5004 1.84998L5.79662 6.63103C4.99697 7.44383 4.59714 7.85023 4.1003 7.85023C3.60346 7.85023 3.20363 7.44383 2.40398 6.63103L1.5 5.7122"
         stroke="currentColor"
-        strokeWidth="1.90917"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/CheckmarkCircle.tsx b/packages/ui/src/icons/CheckmarkCircle.tsx
index eb5cdc376..7df7c2415 100644
--- a/packages/ui/src/icons/CheckmarkCircle.tsx
+++ b/packages/ui/src/icons/CheckmarkCircle.tsx
@@ -1,6 +1,13 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function CheckmarkCircle() {
+import { invertStrokeColor } from "./constants.js";
+import { type PathProps } from "./types.js";
+
+export function CheckmarkCircle({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,8 +18,10 @@ export function CheckmarkCircle() {
       <rect y="0.5" width="32" height="32" rx="16" fill="currentColor" />
       <path
         d="M8 16.4995L13 21.4995L24 10.4995"
-        stroke="white"
-        strokeWidth="2.00003"
+        className={invertStrokeColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Chevron.tsx b/packages/ui/src/icons/Chevron.tsx
index a4eb44d45..94ff2bff3 100644
--- a/packages/ui/src/icons/Chevron.tsx
+++ b/packages/ui/src/icons/Chevron.tsx
@@ -1,4 +1,10 @@
-export function Chevron() {
+import { type PathProps } from "./types.js";
+
+export function Chevron({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,9 +15,9 @@ export function Chevron() {
       <path
         d="M3.3335 5.33337L8.00016 10L12.6668 5.33337"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ChevronLeft.tsx b/packages/ui/src/icons/ChevronLeft.tsx
index 9aa1423e7..852ec513a 100644
--- a/packages/ui/src/icons/ChevronLeft.tsx
+++ b/packages/ui/src/icons/ChevronLeft.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2024, Lightspark Group, Inc. - All Rights Reserved
 
-export const ChevronLeft = () => (
+import { type PathProps } from "./types.js";
+
+export const ChevronLeft = ({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) => (
   <svg
     width="100%"
     height="100%"
@@ -11,9 +17,9 @@ export const ChevronLeft = () => (
     <path
       d="M15 20L7 12L15 4"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      strokeLinecap={strokeLinecap}
+      strokeLinejoin={strokeLinejoin}
     />
   </svg>
 );
diff --git a/packages/ui/src/icons/CircleCheck.tsx b/packages/ui/src/icons/CircleCheck.tsx
index a647962f2..150749785 100644
--- a/packages/ui/src/icons/CircleCheck.tsx
+++ b/packages/ui/src/icons/CircleCheck.tsx
@@ -1,4 +1,11 @@
-export function CircleCheck() {
+import { invertStrokeColor } from "./constants.js";
+import { type PathProps } from "./types.js";
+
+export function CircleCheck({
+  strokeWidth = "1.14286",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,8 +16,10 @@ export function CircleCheck() {
       <circle cx="8" cy="8" r="8" fill="currentColor" />
       <path
         d="M4.57153 7.98591L6.65379 10.0682C6.65379 10.0682 9.08556 7.6364 11.0076 5.71436"
-        stroke="black"
-        strokeWidth="1.14286"
+        className={invertStrokeColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/CircleCheckOutline.tsx b/packages/ui/src/icons/CircleCheckOutline.tsx
index 95879dccc..5d46c832a 100644
--- a/packages/ui/src/icons/CircleCheckOutline.tsx
+++ b/packages/ui/src/icons/CircleCheckOutline.tsx
@@ -1,4 +1,10 @@
-export function CircleCheckOutline() {
+import { type PathProps } from "./types.js";
+
+export function CircleCheckOutline({
+  strokeWidth = "2",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,7 +15,9 @@ export function CircleCheckOutline() {
       <path
         d="M6 10L8.5 12.5L13.5 7.5M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
         stroke="currentColor"
-        strokeWidth="2"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/CirclePlus.tsx b/packages/ui/src/icons/CirclePlus.tsx
index 61cb19d96..7778577e5 100644
--- a/packages/ui/src/icons/CirclePlus.tsx
+++ b/packages/ui/src/icons/CirclePlus.tsx
@@ -1,11 +1,22 @@
-export function CirclePlus() {
+import { invertStrokeColor } from "./constants.js";
+import { type PathProps } from "./types.js";
+
+export function CirclePlus({
+  strokeWidth = "1.5",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter",
+}: PathProps) {
   return (
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM11.0994 8.10001C11.0994 7.60295 11.5024 7.20001 11.9994 7.20001C12.4965 7.20001 12.8994 7.60296 12.8994 8.10001V11.1001L15.8998 11.1001C16.3969 11.1001 16.7998 11.503 16.7998 12.0001C16.7998 12.4971 16.3969 12.9001 15.8998 12.9001H12.8994V15.9C12.8994 16.3971 12.4965 16.8 11.9994 16.8C11.5024 16.8 11.0994 16.3971 11.0994 15.9V12.9001H8.09982C7.60276 12.9001 7.19982 12.4971 7.19982 12.0001C7.19982 11.503 7.60276 11.1001 8.09982 11.1001H11.0994V8.10001Z"
-        fill="#FFF14E"
+        fill="currentColor"
+        className={invertStrokeColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Clock.tsx b/packages/ui/src/icons/Clock.tsx
index b95c91546..5d73a8be3 100644
--- a/packages/ui/src/icons/Clock.tsx
+++ b/packages/ui/src/icons/Clock.tsx
@@ -1,4 +1,10 @@
-export function Clock() {
+import { type PathProps } from "./types.js";
+
+export function Clock({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function Clock() {
       <path
         d="M10.5005 6.42187V10.5H14.5786M10.5005 20.0156C9.23785 20.0156 8.60652 20.0156 8.07651 19.9458C4.41653 19.464 1.53649 16.584 1.05464 12.924C0.984863 12.394 0.984863 11.7626 0.984863 10.5C0.984863 9.23736 0.984863 8.60604 1.05464 8.07602C1.53649 4.41604 4.41653 1.536 8.07651 1.05415C8.60652 0.984375 9.23785 0.984375 10.5005 0.984375C11.7631 0.984375 12.3945 0.984375 12.9245 1.05415C16.5845 1.536 19.4645 4.41604 19.9463 8.07602C20.0161 8.60604 20.0161 9.23736 20.0161 10.5C20.0161 11.7626 20.0161 12.394 19.9463 12.924C19.4645 16.584 16.5845 19.464 12.9245 19.9458C12.3945 20.0156 11.7631 20.0156 10.5005 20.0156Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Close.tsx b/packages/ui/src/icons/Close.tsx
index 99e168353..09ab89405 100644
--- a/packages/ui/src/icons/Close.tsx
+++ b/packages/ui/src/icons/Close.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Close() {
+import { type PathProps } from "./types.js";
+
+export function Close({
+  strokeWidth = "1",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,8 +17,9 @@ export function Close() {
       <path
         d="M0.5 0.5L7.5 7.5M0.5 7.5L7.5 0.5"
         stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Code.tsx b/packages/ui/src/icons/Code.tsx
index ecfffde1b..192ce0f07 100644
--- a/packages/ui/src/icons/Code.tsx
+++ b/packages/ui/src/icons/Code.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Code() {
+import { type PathProps } from "./types.js";
+
+export function Code({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Code() {
       <path
         d="M3.85714 3.37502L0.75 7.00002L3.85714 10.625M12.1429 3.37502L15.25 7.00002L12.1429 10.625M9.55357 1.30359L6.44643 12.6964"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/CreditCard.tsx b/packages/ui/src/icons/CreditCard.tsx
index aea7048da..522d4c6d3 100644
--- a/packages/ui/src/icons/CreditCard.tsx
+++ b/packages/ui/src/icons/CreditCard.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function CreditCard() {
+import { type PathProps } from "./types.js";
+
+export function CreditCard({
+  strokeWidth = "1.125",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -16,7 +22,9 @@ export function CreditCard() {
         height="7.125"
         rx="1"
         stroke="currentColor"
-        strokeWidth="1.125"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
         mask="url(#path-1-inside-1_865_26901)"
       />
     </svg>
diff --git a/packages/ui/src/icons/DeleteIcon.tsx b/packages/ui/src/icons/DeleteIcon.tsx
index 16009ca01..3af26f19c 100644
--- a/packages/ui/src/icons/DeleteIcon.tsx
+++ b/packages/ui/src/icons/DeleteIcon.tsx
@@ -1,7 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 import { useTheme } from "@emotion/react";
+import { type PathProps } from "./types.js";
 
-export function DeleteIcon() {
+export function DeleteIcon({
+  strokeWidth = "1.33333",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   const theme = useTheme();
   return (
     <svg
@@ -14,16 +19,16 @@ export function DeleteIcon() {
       <path
         d="M5.3335 5.33337L10.6668 10.6667"
         stroke={theme.bg}
-        strokeWidth="1.33333"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M5.3335 10.6666L10.6668 5.33329"
         stroke={theme.bg}
-        strokeWidth="1.33333"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Dollar.tsx b/packages/ui/src/icons/Dollar.tsx
index f8bf585a6..cd53996e5 100644
--- a/packages/ui/src/icons/Dollar.tsx
+++ b/packages/ui/src/icons/Dollar.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Dollar() {
+import { type PathProps } from "./types.js";
+
+export function Dollar({
+  strokeWidth = "1.125",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Dollar() {
       <path
         d="M7.90922 2.61607H5.00156M5.00156 2.61607H3.57422C2.26039 2.61607 1.19531 3.48552 1.19531 4.55804C1.19531 5.63055 2.26039 6.5 3.57422 6.5H5.00156M5.00156 2.61607V1.0625M5.00156 2.61607V6.5M5.00156 6.5H6.42891C7.74274 6.5 8.80781 7.36945 8.80781 8.44196C8.80781 9.51448 7.74274 10.3839 6.42891 10.3839H5.00156M5.00156 6.5V10.3839M5.00156 10.3839H1.61833M5.00156 10.3839V11.9375"
         stroke="currentColor"
-        strokeWidth="1.125"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/DollarManrope.tsx b/packages/ui/src/icons/DollarManrope.tsx
index b5e3524e8..d57bfc01d 100644
--- a/packages/ui/src/icons/DollarManrope.tsx
+++ b/packages/ui/src/icons/DollarManrope.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function DollarManrope() {
+import { type PathProps } from "./types.js";
+
+export function DollarManrope({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function DollarManrope() {
       <path
         d="M5.00003 2.3291V0.84668M5.00003 15.6709V17.1533M8.53134 4.55273C7.82641 3.66654 6.50905 3.07031 5.00003 3.07031H4.54706C2.54571 3.07031 0.92334 4.25023 0.92334 5.70572V5.81886C0.92334 6.85997 1.73211 7.81163 3.01249 8.27722L6.98757 9.72275C8.26797 10.1883 9.07666 11.14 9.07666 12.1811C9.07666 13.699 7.3847 14.9296 5.29736 14.9296H5.00003C3.49101 14.9296 2.17365 14.3334 1.46872 13.4472"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/DollarManropeSmall.tsx b/packages/ui/src/icons/DollarManropeSmall.tsx
index 05a3b4601..862c12649 100644
--- a/packages/ui/src/icons/DollarManropeSmall.tsx
+++ b/packages/ui/src/icons/DollarManropeSmall.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function DollarManropeSmall() {
+import { type PathProps } from "./types.js";
+
+export function DollarManropeSmall({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function DollarManropeSmall() {
       <path
         d="M10.0005 3.3291V1.84668M10.0005 16.6709V18.1533M13.5318 5.55273C12.8269 4.66654 11.5095 4.07031 10.0005 4.07031H9.54754C7.5462 4.07031 5.92383 5.25023 5.92383 6.70572V6.81886C5.92383 7.85997 6.7326 8.81163 8.01298 9.27722L11.9881 10.7227C13.2685 11.1883 14.0771 12.14 14.0771 13.1811C14.0771 14.699 12.3852 15.9296 10.2978 15.9296H10.0005C8.4915 15.9296 7.17414 15.3334 6.46921 14.4472"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Download.tsx b/packages/ui/src/icons/Download.tsx
index 9bb2cb66a..0a790bf33 100644
--- a/packages/ui/src/icons/Download.tsx
+++ b/packages/ui/src/icons/Download.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Download() {
+import { type PathProps } from "./types.js";
+
+export function Download({
+  strokeWidth = "1",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -13,12 +19,18 @@ export function Download() {
         clipRule="evenodd"
         d="M3.75 14C4.16421 14 4.5 14.3358 4.5 14.75V19.5H19.5V14.75C19.5 14.3358 19.8358 14 20.25 14C20.6642 14 21 14.3358 21 14.75V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25V14.75C3 14.3358 3.33579 14 3.75 14Z"
         fill="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12 15.75C12.1989 15.75 12.3897 15.671 12.5303 15.5303L16.0303 12.0303C16.3232 11.7374 16.3232 11.2626 16.0303 10.9697C15.7374 10.6768 15.2626 10.6768 14.9697 10.9697L12.75 13.1893V3.75C12.75 3.33579 12.4142 3 12 3C11.5858 3 11.25 3.33579 11.25 3.75V13.1893L9.03033 10.9697C8.73744 10.6768 8.26256 10.6768 7.96967 10.9697C7.67678 11.2626 7.67678 11.7374 7.96967 12.0303L11.4697 15.5303C11.6103 15.671 11.8011 15.75 12 15.75Z"
         fill="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Envelope.tsx b/packages/ui/src/icons/Envelope.tsx
index dd7c9b4ac..911a9820c 100644
--- a/packages/ui/src/icons/Envelope.tsx
+++ b/packages/ui/src/icons/Envelope.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Envelope() {
+import { type PathProps } from "./types.js";
+
+export function Envelope({
+  strokeWidth = "3",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Envelope() {
       <path
         d="M35.0027 15.417C30.8238 18.5565 25.6293 20.417 20.0002 20.417C14.371 20.417 9.17645 18.5565 4.99773 15.417M4.5835 7.91699H35.4168V32.0837H4.5835V7.91699Z"
         stroke="currentColor"
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ExclamationPoint.tsx b/packages/ui/src/icons/ExclamationPoint.tsx
index 9f4e2110d..0140f7f7a 100644
--- a/packages/ui/src/icons/ExclamationPoint.tsx
+++ b/packages/ui/src/icons/ExclamationPoint.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ExclamationPoint() {
+import { type PathProps } from "./types.js";
+
+export function ExclamationPoint({
+  strokeWidth = "1.25",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,22 +17,23 @@ export function ExclamationPoint() {
       <path
         d="M1.48828 6.5C1.48828 3.46243 3.95072 0.999999 6.98828 1C10.0258 1 12.4883 3.46243 12.4883 6.5C12.4883 9.53757 10.0258 12 6.98828 12C3.95072 12 1.48828 9.53757 1.48828 6.5Z"
         stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M6.98828 4.14286L6.98828 6.5M6.98828 8.85707L6.98828 8.87549"
         stroke="currentColor"
-        strokeWidth="1.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M6.98828 8.85707L6.98828 8.87549"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Eye.tsx b/packages/ui/src/icons/Eye.tsx
index e1e8e1d44..949ff859a 100644
--- a/packages/ui/src/icons/Eye.tsx
+++ b/packages/ui/src/icons/Eye.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Eye() {
+import { type PathProps } from "./types.js";
+
+export function Eye({
+  strokeWidth = "1.5",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,12 +17,16 @@ export function Eye() {
       <path
         d="M10.0714 8.17857C10.0714 9.32259 9.14402 10.25 8 10.25C6.85598 10.25 5.92857 9.32259 5.92857 8.17857C5.92857 7.03455 6.85598 6.10714 8 6.10714C9.14402 6.10714 10.0714 7.03455 10.0714 8.17857Z"
         stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M8 3C4.375 3 0.75 5.82468 0.75 8.17857C0.75 10.5325 4.375 13.3571 8 13.3571C11.625 13.3571 15.25 10.5325 15.25 8.17857C15.25 5.82468 11.625 3 8 3Z"
         stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/FramedLetterI.tsx b/packages/ui/src/icons/FramedLetterI.tsx
index eae6c0b00..aee5b77c7 100644
--- a/packages/ui/src/icons/FramedLetterI.tsx
+++ b/packages/ui/src/icons/FramedLetterI.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function FramedLetterI() {
+import { type PathProps } from "./types.js";
+
+export function FramedLetterI({
+  strokeWidth = "1",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,13 +17,16 @@ export function FramedLetterI() {
       <path
         d="M9.8999 1.5H2.8999C2.34762 1.5 1.8999 1.94772 1.8999 2.5V9.5C1.8999 10.0523 2.34762 10.5 2.8999 10.5H9.8999C10.4522 10.5 10.8999 10.0523 10.8999 9.5V2.5C10.8999 1.94772 10.4522 1.5 9.8999 1.5Z"
         stroke="currentColor"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M6.3999 4V8"
         stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Gear.tsx b/packages/ui/src/icons/Gear.tsx
index 06c8c5d32..944e1d5f5 100644
--- a/packages/ui/src/icons/Gear.tsx
+++ b/packages/ui/src/icons/Gear.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Gear() {
+import { type PathProps } from "./types.js";
+
+export function Gear({
+  strokeWidth = "1",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,10 +17,16 @@ export function Gear() {
       <path
         d="M7.57136 6C7.57136 6.86788 6.86781 7.57143 5.99993 7.57143C5.13205 7.57143 4.4285 6.86788 4.4285 6C4.4285 5.13212 5.13205 4.42857 5.99993 4.42857C6.86781 4.42857 7.57136 5.13212 7.57136 6Z"
         stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M4.66071 1.54383C5.06493 0.152055 6.93494 0.152055 7.33915 1.54383C7.55431 2.28466 8.27658 2.72402 8.99308 2.54993C10.3392 2.22287 11.2742 3.92918 10.3323 4.9939C9.83095 5.56064 9.83095 6.43936 10.3323 7.0061C11.2742 8.07082 10.3392 9.77713 8.99308 9.45007C8.27658 9.27598 7.55431 9.71534 7.33915 10.4562C6.93494 11.8479 5.06493 11.8479 4.66071 10.4562C4.44556 9.71534 3.72328 9.27598 3.00679 9.45007C1.6607 9.77713 0.725699 8.07082 1.66757 7.0061C2.16891 6.43936 2.16891 5.56064 1.66757 4.9939C0.725699 3.92918 1.6607 2.22287 3.00679 2.54993C3.72328 2.72402 4.44556 2.28466 4.66071 1.54383Z"
         stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/HeartOutline.tsx b/packages/ui/src/icons/HeartOutline.tsx
index 37a741ca2..fee45eadc 100644
--- a/packages/ui/src/icons/HeartOutline.tsx
+++ b/packages/ui/src/icons/HeartOutline.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function HeartOutline() {
+import { type PathProps } from "./types.js";
+
+export function HeartOutline({
+  strokeWidth = "1.5",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -12,8 +17,8 @@ export function HeartOutline() {
       <path
         d="M14.1041 2.9055C12.6568 1.46965 10.3103 1.46965 8.86307 2.9055L7.98955 3.88576L7.11603 2.90552C5.66876 1.46967 3.32227 1.46967 1.875 2.90552C0.427734 4.34137 0.427732 6.66934 1.875 8.10519L7.98953 14.1715L14.1041 8.10517C15.5514 6.66932 15.5514 4.34135 14.1041 2.9055Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Home.tsx b/packages/ui/src/icons/Home.tsx
index 1f48896f1..794bc2a23 100644
--- a/packages/ui/src/icons/Home.tsx
+++ b/packages/ui/src/icons/Home.tsx
@@ -1,4 +1,9 @@
-export function Home() {
+import { type PathProps } from "./types.js";
+
+export function Home({
+  strokeWidth = "1.5",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,8 +14,8 @@ export function Home() {
       <path
         d="M3.75 9.2582C3.75 8.97962 3.75 8.84033 3.78504 8.71146C3.81609 8.59729 3.86716 8.48953 3.93586 8.39321C4.0134 8.28448 4.12121 8.19628 4.33682 8.01987L10.9868 2.57896C11.3478 2.28362 11.5283 2.13596 11.7291 2.07944C11.9063 2.02959 12.0937 2.02959 12.2709 2.07944C12.4717 2.13596 12.6522 2.28362 13.0132 2.57896L19.6632 8.01987C19.8788 8.19628 19.9866 8.28448 20.0641 8.39321C20.1328 8.48953 20.1839 8.59729 20.215 8.71146C20.25 8.84033 20.25 8.97962 20.25 9.2582V18.65C20.25 19.21 20.25 19.4901 20.141 19.704C20.0451 19.8921 19.8922 20.0451 19.704 20.141C19.4901 20.25 19.2101 20.25 18.65 20.25H5.35C4.78995 20.25 4.50992 20.25 4.29601 20.141C4.10785 20.0451 3.95487 19.8921 3.85899 19.704C3.75 19.4901 3.75 19.21 3.75 18.65V9.2582Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Info.tsx b/packages/ui/src/icons/Info.tsx
index c1cc477ca..97342ae08 100644
--- a/packages/ui/src/icons/Info.tsx
+++ b/packages/ui/src/icons/Info.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Info() {
+import { type PathProps } from "./types.js";
+
+export function Info({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,23 +17,23 @@ export function Info() {
       <path
         d="M15.351 8.00008C15.351 12.0502 12.0677 15.3334 8.01766 15.3334C3.96757 15.3334 0.684326 12.0502 0.684326 8.00008C0.684326 3.94999 3.96757 0.666748 8.01766 0.666748C12.0677 0.666748 15.351 3.94999 15.351 8.00008Z"
         stroke="currentColor"
-        strokeWidth="1.33333"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M8.01758 11.1429V8.00008M8.01758 4.85732V4.83276"
         stroke="currentColor"
-        strokeWidth="1.66667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M8.01758 4.85732V4.83276"
         stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Lock.tsx b/packages/ui/src/icons/Lock.tsx
index d4c6c986e..b94be8a06 100644
--- a/packages/ui/src/icons/Lock.tsx
+++ b/packages/ui/src/icons/Lock.tsx
@@ -1,6 +1,8 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Lock() {
+import { type PathProps } from "./types.js";
+
+export function Lock({ strokeWidth = "2" }: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,12 +13,12 @@ export function Lock() {
       <path
         d="M1 14.1429C1 12.5427 1 11.7426 1.34469 11.1315C1.64789 10.5938 2.13169 10.1568 2.72675 9.88284C3.40324 9.57143 4.28882 9.57143 6.05998 9.57143H14.9149C16.6861 9.57143 17.5717 9.57143 18.2482 9.88284C18.8432 10.1568 19.327 10.5938 19.6302 11.1315C19.9749 11.7426 19.9749 12.5427 19.9749 14.1429V16.4286C19.9749 18.0287 19.9749 18.8288 19.6302 19.44C19.327 19.9776 18.8432 20.4147 18.2482 20.6886C17.5717 21 16.6861 21 14.9149 21H6.05998C4.28882 21 3.40324 21 2.72675 20.6886C2.13169 20.4147 1.64789 19.9776 1.34469 19.44C1 18.8288 1 18.0287 1 16.4286V14.1429Z"
         stroke="currentColor"
-        strokeWidth="2"
+        strokeWidth={strokeWidth}
       />
       <path
         d="M4.5821 9.57143L4.5821 5.28572C4.5821 3.95445 4.5821 3.28882 4.82283 2.76376C5.1438 2.06368 5.75945 1.50747 6.53435 1.21749C7.11552 1 9.01392 1 10.4875 1C11.961 1 13.4884 1 14.0696 1.21749C14.8445 1.50747 15.4601 2.06368 15.7811 2.76376C16.0218 3.28882 16.0218 3.95445 16.0218 5.28571V9.57143H4.5821Z"
         stroke="currentColor"
-        strokeWidth="2"
+        strokeWidth={strokeWidth}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/MagicWand.tsx b/packages/ui/src/icons/MagicWand.tsx
index 506aa1930..5a3571fe4 100644
--- a/packages/ui/src/icons/MagicWand.tsx
+++ b/packages/ui/src/icons/MagicWand.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function MagicWand() {
+import { type PathProps } from "./types.js";
+
+export function MagicWand({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,27 +17,27 @@ export function MagicWand() {
       <path
         d="M9 9.99954L1 17.9995L2.5 19.4995L4 20.9995L12 12.9995M9 9.99954L11.2929 7.70665C11.6834 7.31612 12.3166 7.31612 12.7071 7.70665L14.2929 9.29243C14.6834 9.68296 14.6834 10.3161 14.2929 10.7067L12 12.9995M9 9.99954L12 12.9995"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M9 2.99951C10.3668 4.36635 10.5 4.49951 10.5 4.49951M10.5 2.99951L9 4.49951"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
       <path
         d="M18 8.99969C20.7337 11.7334 21 11.9997 21 11.9997M21 8.99969L18 11.9997"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
       <path
         d="M17.5977 0.999512C16.5971 4.73377 16.4996 5.09759 16.4996 5.09759M19.0977 3.59759L14.9996 2.49951"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Minus.tsx b/packages/ui/src/icons/Minus.tsx
index 419f33ea5..55fdfc285 100644
--- a/packages/ui/src/icons/Minus.tsx
+++ b/packages/ui/src/icons/Minus.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Minus() {
+import { type PathProps } from "./types.js";
+
+export function Minus({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,8 +16,8 @@ export function Minus() {
       <path
         d="M6.75 12H17.25"
         stroke="currentColor"
-        strokeWidth="1.40621"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Monitor.tsx b/packages/ui/src/icons/Monitor.tsx
index 9f6cd54ed..037b63b6c 100644
--- a/packages/ui/src/icons/Monitor.tsx
+++ b/packages/ui/src/icons/Monitor.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Monitor() {
+import { type PathProps } from "./types.js";
+
+export function Monitor({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,15 +17,15 @@ export function Monitor() {
       <path
         d="M4.89258 16.2514H7.99972M11.1069 16.2514H7.99972M7.99972 13.959V16.2514"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
       <path
         d="M3.5 8H5L7 10L9 5L11 7H12.5"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <rect
         x="0.75"
@@ -28,7 +34,7 @@ export function Monitor() {
         height="11.193"
         rx="2"
         stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth={strokeWidth}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/NodeAdd.tsx b/packages/ui/src/icons/NodeAdd.tsx
index 7298c71d3..d0d2674d9 100644
--- a/packages/ui/src/icons/NodeAdd.tsx
+++ b/packages/ui/src/icons/NodeAdd.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function NodeAdd() {
+import { type PathProps } from "./types.js";
+
+export function NodeAdd({
+  strokeWidth = "1",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,7 +16,8 @@ export function NodeAdd() {
       <path
         d="M6 3.25V8.75M3.25 6H8.75M11.5 6C11.5 9.03757 9.03757 11.5 6 11.5C2.96243 11.5 0.5 9.03757 0.5 6C0.5 2.96243 2.96243 0.5 6 0.5C9.03757 0.5 11.5 2.96243 11.5 6Z"
         stroke="currentColor"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Notebook.tsx b/packages/ui/src/icons/Notebook.tsx
index 7ad0723c5..3cbac5848 100644
--- a/packages/ui/src/icons/Notebook.tsx
+++ b/packages/ui/src/icons/Notebook.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2024 Lightspark Group, Inc. - All Rights Reserved
 
-export function Notebook() {
+import { type PathProps } from "./types.js";
+
+export function Notebook({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Notebook() {
       <path
         d="M5.3998 1H2.5998C2.15798 1 1.7998 1.35818 1.7998 1.8V14.2C1.7998 14.6418 2.15798 15 2.5998 15H5.3998M5.3998 1H13.3998C13.8416 1 14.1998 1.35818 14.1998 1.8V14.2C14.1998 14.6418 13.8416 15 13.3998 15H5.3998M5.3998 1V15M8.5998 4.6H10.9998M8.5998 7.8H10.9998"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/PaperPlane.tsx b/packages/ui/src/icons/PaperPlane.tsx
index b85fbed34..3f826ac67 100644
--- a/packages/ui/src/icons/PaperPlane.tsx
+++ b/packages/ui/src/icons/PaperPlane.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function PaperPlane() {
+import { type PathProps } from "./types.js";
+
+export function PaperPlane({
+  strokeWidth = "1",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,8 +17,9 @@ export function PaperPlane() {
       <path
         d="M5.10092 6.89819L6.93999 5.06257M11.5 0.5L0.5 4.16667L5.08333 6.91667L7.83333 11.5L11.5 0.5Z"
         stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Pencil.tsx b/packages/ui/src/icons/Pencil.tsx
index 7acaf7559..ec851b0eb 100644
--- a/packages/ui/src/icons/Pencil.tsx
+++ b/packages/ui/src/icons/Pencil.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Pencil() {
+import { type PathProps } from "./types.js";
+
+export function Pencil({
+  strokeWidth = "1",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,8 +17,9 @@ export function Pencil() {
       <path
         d="M6.88851 2.9033L1 8.79181V11H3.20819L9.0967 5.11149M6.88851 2.9033L8.57623 1.21559C8.86367 0.928136 9.32974 0.928136 9.61717 1.21559L10.7844 2.38283C11.0719 2.67028 11.0719 3.13633 10.7844 3.42378L9.0967 5.11149M6.88851 2.9033L9.0967 5.11149"
         stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Person.tsx b/packages/ui/src/icons/Person.tsx
index 362795bbc..77ffdb194 100644
--- a/packages/ui/src/icons/Person.tsx
+++ b/packages/ui/src/icons/Person.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Person() {
+import { type PathProps } from "./types.js";
+
+export function Person({
+  strokeWidth = "1.5",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,14 +16,14 @@ export function Person() {
       <path
         d="M15.7485 6.5C15.7485 8.57107 14.0696 10.25 11.9985 10.25C9.92747 10.25 8.24854 8.57107 8.24854 6.5C8.24854 4.42893 9.92747 2.75 11.9985 2.75C14.0696 2.75 15.7485 4.42893 15.7485 6.5Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M11.9985 13.25C8.20293 13.25 5.43245 15.7735 4.67009 19.1657C4.54089 19.7406 5.0077 20.25 5.59696 20.25H18.4001C18.9894 20.25 19.4562 19.7406 19.327 19.1657C18.5646 15.7735 15.7941 13.25 11.9985 13.25Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/PiggyBank.tsx b/packages/ui/src/icons/PiggyBank.tsx
index 9d4da2a92..7274e4b51 100644
--- a/packages/ui/src/icons/PiggyBank.tsx
+++ b/packages/ui/src/icons/PiggyBank.tsx
@@ -1,4 +1,10 @@
-export function PiggyBank() {
+import { type PathProps } from "./types.js";
+
+export function PiggyBank({
+  strokeWidth = "1.5",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,13 +15,15 @@ export function PiggyBank() {
       <path
         d="M4.2852 2.80323L4.28378 2.81174C4.16768 3.50397 4.04904 4.21137 3.96368 4.82785C3.3302 5.5199 2.84097 6.34727 2.54459 7.26219H1.75H1.09375V7.91844V10.8244V11.4626L1.7317 11.4804L2.59376 11.5045C2.97833 12.6034 3.64313 13.5696 4.50179 14.318L3.94048 15.3554L3.63587 15.9184L4.19114 16.237L5.64215 17.0693L6.19546 17.3867L6.52843 16.8426L7.20243 15.7413C7.73371 15.8781 8.29024 15.9508 8.86295 15.9508H10.733C11.2494 15.9508 11.7526 15.8917 12.2361 15.7798L12.7333 16.6734L13.0537 17.2493L13.6282 16.9265L15.0524 16.1264L15.6282 15.8028L15.301 15.2291L14.8823 14.495C16.1356 13.4907 17.0179 12.0401 17.2872 10.3828H18.3359C19.2032 10.3828 19.9063 9.67973 19.9063 8.81242C19.9063 7.9451 19.2032 7.242 18.3359 7.242H17.0447C16.1753 4.58759 13.6788 2.66994 10.733 2.66994H8.86295C8.17571 2.66994 7.51184 2.77455 6.88698 2.96907C6.72823 2.86308 6.56121 2.75214 6.39011 2.63848L6.38912 2.63782C6.057 2.4172 5.70863 2.18579 5.36863 1.95616L4.52263 1.3848L4.3541 2.39166L4.28524 2.80302L4.2852 2.80323Z"
         stroke="currentColor"
-        strokeWidth="1.3125"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M8.87903 5.07309H11.1462"
         stroke="currentColor"
-        strokeWidth="1.3125"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
       <ellipse
         cx="5.45801"
diff --git a/packages/ui/src/icons/Plus.tsx b/packages/ui/src/icons/Plus.tsx
index 5de4f91f3..881907797 100644
--- a/packages/ui/src/icons/Plus.tsx
+++ b/packages/ui/src/icons/Plus.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Plus() {
+import { type PathProps } from "./types.js";
+
+export function Plus({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,26 +16,26 @@ export function Plus() {
       <path
         d="M1.875 7.17828H7.1783V1.87498"
         stroke="currentColor"
-        strokeWidth="1.40621"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
       <path
         d="M7.33203 1.875V7.1783H12.6353"
         stroke="currentColor"
-        strokeWidth="1.40621"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
       <path
         d="M12.6367 7.33859H7.33342V12.6419"
         stroke="currentColor"
-        strokeWidth="1.40621"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
       <path
         d="M7.17969 12.643L7.17969 7.33969L1.87639 7.33969"
         stroke="currentColor"
-        strokeWidth="1.40621"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/QuestionCircle.tsx b/packages/ui/src/icons/QuestionCircle.tsx
index 93508adb0..af2aaa951 100644
--- a/packages/ui/src/icons/QuestionCircle.tsx
+++ b/packages/ui/src/icons/QuestionCircle.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function QuestionCircle() {
+import { type PathProps } from "./types.js";
+
+export function QuestionCircle({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function QuestionCircle() {
       <path
         d="M7.75 7.25C8.5 5 12.25 5.19156 12.25 7.54132C12.25 9.2008 10 9.4614 10 11.25M10 14V13.99M19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10ZM10.25 14C10.25 14.1381 10.1381 14.25 10 14.25C9.8619 14.25 9.75 14.1381 9.75 14C9.75 13.8619 9.8619 13.75 10 13.75C10.1381 13.75 10.25 13.8619 10.25 14Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/QuestionCircleStrong.tsx b/packages/ui/src/icons/QuestionCircleStrong.tsx
index 8574bb81f..0a84f0742 100644
--- a/packages/ui/src/icons/QuestionCircleStrong.tsx
+++ b/packages/ui/src/icons/QuestionCircleStrong.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function QuestionCircleStrong() {
+import { type PathProps } from "./types.js";
+
+export function QuestionCircleStrong({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function QuestionCircleStrong() {
       <path
         d="M5.50065 5.16634C6.00065 3.66634 8.50065 3.79405 8.50065 5.36055C8.50065 6.46687 7.00065 6.64061 7.00065 7.83301M7.00065 9.66634V9.65967M13.1673 6.99967C13.1673 10.4054 10.4064 13.1663 7.00065 13.1663C3.5949 13.1663 0.833984 10.4054 0.833984 6.99967C0.833984 3.59392 3.5949 0.833008 7.00065 0.833008C10.4064 0.833008 13.1673 3.59392 13.1673 6.99967ZM7.16732 9.66634C7.16732 9.75841 7.09272 9.83301 7.00065 9.83301C6.90858 9.83301 6.83398 9.75841 6.83398 9.66634C6.83398 9.57427 6.90858 9.49967 7.00065 9.49967C7.09272 9.49967 7.16732 9.57427 7.16732 9.66634Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/ReceiptBill.tsx b/packages/ui/src/icons/ReceiptBill.tsx
index 7d799542d..0dd63133d 100644
--- a/packages/ui/src/icons/ReceiptBill.tsx
+++ b/packages/ui/src/icons/ReceiptBill.tsx
@@ -1,4 +1,10 @@
-export function ReceiptBill() {
+import { type PathProps } from "./types.js";
+
+export function ReceiptBill({
+  strokeWidth = "2.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ReceiptBill() {
       <path
         d="M14.5827 12.9163H25.416M14.5827 19.583H18.7493M32.0827 35.4163V6.24967C32.0827 5.32921 31.3365 4.58301 30.416 4.58301H9.58268C8.66222 4.58301 7.91602 5.32921 7.91602 6.24967V35.4163L12.2216 31.6663L16.1105 35.4163L19.9993 31.6663L23.8882 35.4163L27.7772 31.6663L32.0827 35.4163Z"
         stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Recycling.tsx b/packages/ui/src/icons/Recycling.tsx
index 76a942008..584013bf3 100644
--- a/packages/ui/src/icons/Recycling.tsx
+++ b/packages/ui/src/icons/Recycling.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Recycling() {
+import { type PathProps } from "./types.js";
+
+export function Recycling({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Recycling() {
       <path
         d="M12 9.9987V4.66536C12 3.92898 11.4031 3.33203 10.6667 3.33203H7M12 9.9987L10 7.9987M12 9.9987L14 7.9987M4 5.9987V11.332C4 12.0684 4.59695 12.6654 5.33333 12.6654H9M4 5.9987L6 7.9987M4 5.9987L2 7.9987"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Remove.tsx b/packages/ui/src/icons/Remove.tsx
index 90dfedba9..52d7bcc7c 100644
--- a/packages/ui/src/icons/Remove.tsx
+++ b/packages/ui/src/icons/Remove.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Remove() {
+import { type PathProps } from "./types.js";
+
+export function Remove({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,8 +16,8 @@ export function Remove() {
       <path
         d="M11.0203 5.72973L6.47973 10.2703M11.0203 10.2703L6.47973 5.72973M15.75 8C15.75 11.866 12.616 15 8.75 15C4.88401 15 1.75 11.866 1.75 8C1.75 4.13401 4.88401 1 8.75 1C12.616 1 15.75 4.13401 15.75 8Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Restart.tsx b/packages/ui/src/icons/Restart.tsx
index 12021b8b6..4f09444e9 100644
--- a/packages/ui/src/icons/Restart.tsx
+++ b/packages/ui/src/icons/Restart.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Restart() {
+import { type PathProps } from "./types.js";
+
+export function Restart({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,8 +17,9 @@ export function Restart() {
       <path
         d="M0.5 7.96429C1.28571 9.53571 2.85714 11.5 6 11.5C9.14286 11.5 10.7143 9.53571 11.5 7.96429M11.5 7.96429H8.75M11.5 7.96429V11.1071M11.5 4.03571C10.7143 2.46429 9.14286 0.5 6 0.5C2.85714 0.5 1.28571 2.46429 0.5 4.03571M0.5 4.03571H3.25M0.5 4.03571V0.892857"
         stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Roadmap.tsx b/packages/ui/src/icons/Roadmap.tsx
index 7fdbea949..2f5f7d2f5 100644
--- a/packages/ui/src/icons/Roadmap.tsx
+++ b/packages/ui/src/icons/Roadmap.tsx
@@ -1,4 +1,10 @@
-export function Roadmap() {
+import { type PathProps } from "./types.js";
+
+export function Roadmap({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="16"
@@ -9,9 +15,10 @@ export function Roadmap() {
     >
       <path
         d="M4.66667 7.99996H11.3333M7.33333 11.3333H14M2 4.66663H8.66667"
-        stroke="black"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Satoshi.tsx b/packages/ui/src/icons/Satoshi.tsx
index a41ad8407..4af568e5c 100644
--- a/packages/ui/src/icons/Satoshi.tsx
+++ b/packages/ui/src/icons/Satoshi.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Satoshi() {
+import { type PathProps } from "./types.js";
+
+export function Satoshi({
+  strokeWidth = "3.71429",
+  strokeLinecap = "butt",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -8,19 +13,36 @@ export function Satoshi() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M0 11.2142H26" stroke="currentColor" strokeWidth="3.71429" />
+      <path
+        d="M0 11.2142H26"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+      />
       <path
         d="M13 5.64284V0.0714111"
         stroke="currentColor"
-        strokeWidth="3.71429"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
       <path
         d="M13 40.9286V35.3572"
         stroke="currentColor"
-        strokeWidth="3.71429"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+      />
+      <path
+        d="M0 20.5H26"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+      />
+      <path
+        d="M0 29.7858H26"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
-      <path d="M0 20.5H26" stroke="currentColor" strokeWidth="3.71429" />
-      <path d="M0 29.7858H26" stroke="currentColor" strokeWidth="3.71429" />
     </svg>
   );
 }
diff --git a/packages/ui/src/icons/SatoshiRounded.tsx b/packages/ui/src/icons/SatoshiRounded.tsx
index a708b7ca4..295c2a3f2 100644
--- a/packages/ui/src/icons/SatoshiRounded.tsx
+++ b/packages/ui/src/icons/SatoshiRounded.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function SatoshiRounded() {
+import { type PathProps } from "./types.js";
+
+export function SatoshiRounded({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       viewBox="0 0 12 16"
@@ -10,32 +15,32 @@ export function SatoshiRounded() {
     >
       <path
         d="M10.4 4.77783H1.09985"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
         stroke="currentColor"
       />
       <path
         d="M10.4 8H1.09985"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
         stroke="currentColor"
       />
       <path
         d="M10.4 11.2222H1.09985"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
         stroke="currentColor"
       />
       <path
         d="M5.95215 15.2498L5.95215 13.6387"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
         stroke="currentColor"
       />
       <path
         d="M5.95215 2.36111L5.95215 0.75"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
         stroke="currentColor"
       />
     </svg>
diff --git a/packages/ui/src/icons/Search.tsx b/packages/ui/src/icons/Search.tsx
index f2fcc8409..91ac2767e 100644
--- a/packages/ui/src/icons/Search.tsx
+++ b/packages/ui/src/icons/Search.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Search() {
+import { type PathProps } from "./types.js";
+
+export function Search({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="16"
@@ -12,9 +18,9 @@ export function Search() {
       <path
         d="M10.9972 10.9512C9.78136 12.1281 8.12781 12.6667 6.83333 12.6667C4.5 12.6667 1 10.9167 1 6.83333C1 2.75 4.5 1 6.83333 1C9.16667 1 12.6667 2.75 12.6667 6.83333C12.6667 8.65133 11.9729 10.0068 10.9972 10.9512ZM10.9972 10.9512L15 15"
         stroke="#404040"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/SecurityKey.tsx b/packages/ui/src/icons/SecurityKey.tsx
index 5d1c5a618..f93539bad 100644
--- a/packages/ui/src/icons/SecurityKey.tsx
+++ b/packages/ui/src/icons/SecurityKey.tsx
@@ -1,6 +1,8 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function SecurityKey() {
+import { type PathProps } from "./types.js";
+
+export function SecurityKey({ strokeWidth = "1.125" }: PathProps) {
   return (
     <svg
       width="100%"
@@ -15,12 +17,12 @@ export function SecurityKey() {
         height="6.375"
         rx="0.9375"
         stroke="currentColor"
-        strokeWidth="1.125"
+        strokeWidth={strokeWidth}
       />
       <path
         d="M8.8125 4.8125H10.5C11.0178 4.8125 11.4375 5.23223 11.4375 5.75V7.25C11.4375 7.76777 11.0178 8.1875 10.5 8.1875H8.8125V4.8125Z"
         stroke="currentColor"
-        strokeWidth="1.125"
+        strokeWidth={strokeWidth}
       />
       <rect
         x="3.75"
diff --git a/packages/ui/src/icons/Selector.tsx b/packages/ui/src/icons/Selector.tsx
index 29019d7be..c7d746f06 100644
--- a/packages/ui/src/icons/Selector.tsx
+++ b/packages/ui/src/icons/Selector.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-export function Selector() {
+import { type PathProps } from "./types.js";
+
+export function Selector({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -12,16 +18,16 @@ export function Selector() {
       <path
         d="M4 5.33331L8 1.33331L12 5.33331"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M4 10.6667L8 14.6667L12 10.6667"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Share.tsx b/packages/ui/src/icons/Share.tsx
index 03c76d2d0..9417cc88b 100644
--- a/packages/ui/src/icons/Share.tsx
+++ b/packages/ui/src/icons/Share.tsx
@@ -1,6 +1,8 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Share() {
+import { type PathProps } from "./types.js";
+
+export function Share({ strokeWidth = "1.5" }: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,7 +13,7 @@ export function Share() {
       <path
         d="M6.74994 6.95207L10.0833 5.04728M6.74994 9.04727L10.0833 10.9521M14.2499 3.99967C14.2499 5.19629 13.2799 6.16634 12.0833 6.16634C10.8867 6.16634 9.91659 5.19629 9.91659 3.99967C9.91659 2.80305 10.8867 1.83301 12.0833 1.83301C13.2799 1.83301 14.2499 2.80305 14.2499 3.99967ZM14.2499 11.9997C14.2499 13.1963 13.2799 14.1663 12.0833 14.1663C10.8867 14.1663 9.91659 13.1963 9.91659 11.9997C9.91659 10.8031 10.8867 9.83301 12.0833 9.83301C13.2799 9.83301 14.2499 10.8031 14.2499 11.9997ZM6.91659 7.99967C6.91659 9.19627 5.94654 10.1663 4.74992 10.1663C3.5533 10.1663 2.58325 9.19627 2.58325 7.99967C2.58325 6.80307 3.5533 5.83301 4.74992 5.83301C5.94654 5.83301 6.91659 6.80307 6.91659 7.99967Z"
         stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth={strokeWidth}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Sidebar.tsx b/packages/ui/src/icons/Sidebar.tsx
index f60de18be..2ff4d5f58 100644
--- a/packages/ui/src/icons/Sidebar.tsx
+++ b/packages/ui/src/icons/Sidebar.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Sidebar() {
+import { type PathProps } from "./types.js";
+
+export function Sidebar({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Sidebar() {
       <path
         d="M5 1H13C14.1046 1 15 1.89543 15 3V8M5 1H3.1875H3C1.89543 1 1 1.89543 1 3V13C1 14.1046 1.89543 15 3 15H5M5 1V5V8M5 15H13C14.1046 15 15 14.1046 15 13V8M5 15V8M5 8H15"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Sort.tsx b/packages/ui/src/icons/Sort.tsx
index feaf25649..8f28414fc 100644
--- a/packages/ui/src/icons/Sort.tsx
+++ b/packages/ui/src/icons/Sort.tsx
@@ -1,6 +1,11 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-export function Sort() {
+import { type PathProps } from "./types.js";
+
+export function Sort({
+  strokeWidth = "1.5",
+  strokeLinecap = "square",
+}: PathProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -12,8 +17,8 @@ export function Sort() {
       <path
         d="M1.5 2.5H10.5M4.5 9.5H7.5M3 6H9"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="square"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/StackedLines.tsx b/packages/ui/src/icons/StackedLines.tsx
index 4f6146676..092e31a94 100644
--- a/packages/ui/src/icons/StackedLines.tsx
+++ b/packages/ui/src/icons/StackedLines.tsx
@@ -1,4 +1,9 @@
-export function StackedLines() {
+import { type PathProps } from "./types.js";
+
+export function StackedLines({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       viewBox="0 0 20 16"
@@ -9,8 +14,8 @@ export function StackedLines() {
       <path
         d="M18.5466 1.55566H1.1864M18.5466 8.00009H1.1864M18.5466 14.4445H1.1864"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/TapSingle.tsx b/packages/ui/src/icons/TapSingle.tsx
index cd43e68c1..ebff526fd 100644
--- a/packages/ui/src/icons/TapSingle.tsx
+++ b/packages/ui/src/icons/TapSingle.tsx
@@ -11,7 +11,7 @@ export function TapSingle() {
     >
       <path
         d="M11.3704 14H10.3704C10.3704 14.5523 10.8181 15 11.3704 15V14ZM7.22223 16.0556L6.77821 16.9516C7.08819 17.1052 7.45547 17.0876 7.74947 16.9052C8.04347 16.723 8.22227 16.4015 8.22227 16.0556H7.22223ZM3.07408 18.1111L2.14676 17.7368C2.02255 18.0446 2.05911 18.3939 2.24433 18.6692L3.07408 18.1111ZM16.4919 8.68545C16.5841 9.22998 17.1003 9.59669 17.6448 9.50451C18.1893 9.41233 18.556 8.89617 18.4639 8.35163L16.4919 8.68545ZM0.128733 11.4262C0.22092 11.9707 0.73708 12.3375 1.28161 12.2452C1.82615 12.1531 2.19287 11.637 2.10068 11.0924L0.128733 11.4262ZM12.3704 14V9.88891H10.3704V14H12.3704ZM6.22223 9.88891V16.0556H8.22227V9.88891H6.22223ZM7.66627 15.1596L7.58893 15.1212L6.70095 16.9134L6.77821 16.9516L7.66627 15.1596ZM2.41327 17.0766L2.14676 17.7368L4.0014 18.4854L4.26791 17.8251L2.41327 17.0766ZM2.24433 18.6692L6.13327 24.4506L7.7928 23.3343L3.90381 17.553L2.24433 18.6692ZM11.5649 27.3334H12.7531V25.3334H11.5649V27.3334ZM20.6667 19.4815V18.1111H18.6667V19.4815H20.6667ZM15.5185 13H11.3704V15H15.5185V13ZM20.6667 18.1111C20.6667 15.2799 18.3533 13 15.5185 13V15C17.2657 15 18.6667 16.4014 18.6667 18.1111H20.6667ZM7.58893 15.1212C5.62571 14.1484 3.23445 15.0419 2.41327 17.0766L4.26791 17.8251C4.64845 16.8822 5.77005 16.452 6.70095 16.9134L7.58893 15.1212ZM12.7531 27.3334C17.1152 27.3334 20.6667 23.8264 20.6667 19.4815H18.6667C18.6667 22.705 16.0276 25.3334 12.7531 25.3334V27.3334ZM9.29627 6.83335C7.60707 6.83335 6.22223 8.19294 6.22223 9.88891H8.22227C8.22227 9.31438 8.69467 8.83335 9.29627 8.83335V6.83335ZM6.13327 24.4506C7.34627 26.2538 9.38533 27.3334 11.5649 27.3334V25.3334C10.0461 25.3334 8.63133 24.581 7.7928 23.3343L6.13327 24.4506ZM12.3704 9.88891C12.3704 8.19294 10.9856 6.83335 9.29627 6.83335V8.83335C9.898 8.83335 10.3704 9.31438 10.3704 9.88891H12.3704ZM2 9.88891C2 5.90862 5.25819 2.66669 9.29627 2.66669V0.666687C4.17057 0.666687 0 4.78718 0 9.88891H2ZM9.29627 2.66669C12.9176 2.66669 15.9148 5.27615 16.4919 8.68545L18.4639 8.35163C17.7244 3.98349 13.8967 0.666687 9.29627 0.666687V2.66669ZM2.10068 11.0924C2.03453 10.7016 2 10.2996 2 9.88891H0C0 10.412 0.044 10.9256 0.128733 11.4262L2.10068 11.0924Z"
-        fill="black"
+        fill="currentColor"
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Team.tsx b/packages/ui/src/icons/Team.tsx
index aba96f404..f4ab98845 100644
--- a/packages/ui/src/icons/Team.tsx
+++ b/packages/ui/src/icons/Team.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Team() {
+import { type PathProps } from "./types.js";
+
+export function Team({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Team() {
       <path
         d="M17.7498 19.25H21.4228C22.0042 19.25 22.468 18.754 22.3704 18.1808C21.8389 15.0624 20.0189 12.75 16.9998 12.75C16.5537 12.75 16.1338 12.8005 15.7404 12.8966M11.2497 7C11.2497 8.79493 9.79461 10.25 7.99969 10.25C6.20476 10.25 4.74969 8.79493 4.74969 7C4.74969 5.20507 6.20476 3.75 7.99969 3.75C9.79461 3.75 11.2497 5.20507 11.2497 7ZM19.7497 7.5C19.7497 9.01878 18.5185 10.25 16.9997 10.25C15.4809 10.25 14.2497 9.01878 14.2497 7.5C14.2497 5.98122 15.4809 4.75 16.9997 4.75C18.5185 4.75 19.7497 5.98122 19.7497 7.5ZM1.87029 19.1808C2.4382 15.4997 4.51686 12.75 7.99969 12.75C11.4825 12.75 13.5612 15.4997 14.1291 19.1808C14.2177 19.755 13.7549 20.25 13.1739 20.25H2.82547C2.24447 20.25 1.7817 19.755 1.87029 19.1808Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Terminal.tsx b/packages/ui/src/icons/Terminal.tsx
index 7886a6362..db2d203b7 100644
--- a/packages/ui/src/icons/Terminal.tsx
+++ b/packages/ui/src/icons/Terminal.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-export function Terminal() {
+import { type PathProps } from "./types.js";
+
+export function Terminal({
+  strokeWidth = "2.28571",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -12,9 +18,9 @@ export function Terminal() {
       <path
         d="M7.33337 23.3333L14.6667 16L7.33337 8.66663M16.6667 26H26"
         stroke="currentColor"
-        strokeWidth="2.28571"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/Trash.tsx b/packages/ui/src/icons/Trash.tsx
index c28d6e4a4..54000dd8c 100644
--- a/packages/ui/src/icons/Trash.tsx
+++ b/packages/ui/src/icons/Trash.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Trash() {
+import { type PathProps } from "./types.js";
+
+export function Trash({
+  strokeWidth = "1",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,11 +17,22 @@ export function Trash() {
       <path
         d="M0.5 2.85714H11.5M4.07143 11.5H7.92857C8.79647 11.5 9.5 10.7965 9.5 9.92857L9.92857 2.07143C9.92857 1.20355 9.22504 0.5 8.35714 0.5H3.64286C2.77498 0.5 2.07143 1.20355 2.07143 2.07143L2.5 9.92857C2.5 10.7965 3.20355 11.5 4.07143 11.5Z"
         stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
+      />
+      <path
+        d="M5 5V9"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+      />
+      <path
+        d="M7 5V9"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
-      <path d="M5 5V9" stroke="currentColor" strokeLinecap="round" />
-      <path d="M7 5V9" stroke="currentColor" strokeLinecap="round" />
     </svg>
   );
 }
diff --git a/packages/ui/src/icons/UmaBridgeLoading.tsx b/packages/ui/src/icons/UmaBridgeLoading.tsx
index e9583044d..479adaa3f 100644
--- a/packages/ui/src/icons/UmaBridgeLoading.tsx
+++ b/packages/ui/src/icons/UmaBridgeLoading.tsx
@@ -1,4 +1,9 @@
-export function UmaBridgeLoading() {
+import { type PathProps } from "./types.js";
+
+export function UmaBridgeLoading({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -6,12 +11,18 @@ export function UmaBridgeLoading() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="11" cy="11" r="9" stroke="#EBEEF2" strokeWidth="2.5" />
+      <circle
+        cx="11"
+        cy="11"
+        r="9"
+        stroke="#EBEEF2"
+        strokeWidth={strokeWidth}
+      />
       <path
         d="M19.9999 11C19.9999 9.57971 19.6638 8.17958 19.019 6.91409C18.3742 5.6486 17.439 4.55368 16.29 3.71885C15.1409 2.88402 13.8106 2.33299 12.4078 2.11081C11.005 1.88862 9.56953 2.0016 8.21875 2.44049"
-        stroke="black"
-        strokeWidth="2.5"
-        strokeLinecap="round"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/UmaBridgeLoadingTransparent.tsx b/packages/ui/src/icons/UmaBridgeLoadingTransparent.tsx
index 2be0ac15d..4ad4f5a27 100644
--- a/packages/ui/src/icons/UmaBridgeLoadingTransparent.tsx
+++ b/packages/ui/src/icons/UmaBridgeLoadingTransparent.tsx
@@ -1,4 +1,9 @@
-export function UmaBridgeLoadingTransparent() {
+import { type PathProps } from "./types.js";
+
+export function UmaBridgeLoadingTransparent({
+  strokeWidth = "2.09994",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -13,13 +18,13 @@ export function UmaBridgeLoadingTransparent() {
         rx="8.74961"
         ry="8.74986"
         stroke="#F9F9F9"
-        strokeWidth="2.09994"
+        strokeWidth={strokeWidth}
       />
       <path
         d="M19.2503 9.99998C19.2503 8.61916 18.9235 7.25795 18.2966 6.02763C17.6697 4.79731 16.7606 3.73282 15.6435 2.9212C14.5265 2.10957 13.2332 1.57386 11.8694 1.35785C10.5056 1.14184 9.11007 1.25168 7.79688 1.67837"
         stroke="#F9F9F9"
-        strokeWidth="2.09994"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
       />
     </svg>
   );
diff --git a/packages/ui/src/icons/WarningSign.tsx b/packages/ui/src/icons/WarningSign.tsx
index ec8bbc433..f17a21bf6 100644
--- a/packages/ui/src/icons/WarningSign.tsx
+++ b/packages/ui/src/icons/WarningSign.tsx
@@ -1,30 +1,27 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function WarningSign() {
+import { type PathProps } from "./types.js";
+
+export function WarningSign({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
-      viewBox="0 0 12 12"
+      viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_3679_43594)">
-        <path
-          d="M1.23392 10.8195L1.52049 10.4097L1.23392 10.8195C1.40632 10.94 1.59783 10.9728 1.74858 10.9866C1.89495 11 2.07532 11 2.27188 11L2.29247 11H9.70362L9.72422 11C9.92078 11 10.1011 11 10.2475 10.9866C10.3983 10.9728 10.5898 10.94 10.7622 10.8195L10.4756 10.4097L10.7622 10.8195C10.9876 10.6618 11.1381 10.4183 11.1783 10.1462C11.209 9.93805 11.1527 9.75208 11.0977 9.61107C11.0442 9.47415 10.9635 9.31281 10.8756 9.13699L10.8664 9.11862L7.1608 1.70747L7.16096 1.7074L7.15786 1.7016L7.15094 1.68775C7.04427 1.47437 6.94927 1.28435 6.86007 1.14036C6.77215 0.998424 6.64092 0.816166 6.42657 0.714504C6.15537 0.585877 5.84073 0.585877 5.56952 0.714504C5.35517 0.816167 5.22394 0.998426 5.13602 1.14036C5.04682 1.28436 4.95182 1.47439 4.84514 1.68777L4.83529 1.70748L1.12972 9.11862L1.12051 9.13704C1.03259 9.31284 0.951915 9.47416 0.898437 9.61107C0.843361 9.75208 0.787055 9.93805 0.817803 10.1462C0.858007 10.4183 1.00852 10.6618 1.23392 10.8195Z"
-          stroke="currentColor"
-        />
+      <g id="triangle-exclamation">
         <path
-          d="M6 8.5V8.48633M6 4V6.75"
+          id="Vector"
+          d="M11.9971 10.0156V12.0121M12 15H12.01M11.1354 3.49213L2.88661 17.4956C2.4946 18.1611 2.9751 19 3.74825 19H20.2459C21.019 19 21.4995 18.1611 21.1075 17.4956L12.8587 3.49213C12.4722 2.83596 11.5219 2.83596 11.1354 3.49213ZM12.25 15C12.25 15.1381 12.1381 15.25 12 15.25C11.8619 15.25 11.75 15.1381 11.75 15C11.75 14.8619 11.8619 14.75 12 14.75C12.1381 14.75 12.25 14.8619 12.25 15Z"
           stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          strokeLinecap={strokeLinecap}
         />
       </g>
-      <defs>
-        <clipPath id="clip0_3679_43594">
-          <rect width="12" height="12" fill="white" />
-        </clipPath>
-      </defs>
     </svg>
   );
 }
diff --git a/packages/ui/src/icons/types.tsx b/packages/ui/src/icons/types.tsx
index 5b2fdf124..dd7d11fbe 100644
--- a/packages/ui/src/icons/types.tsx
+++ b/packages/ui/src/icons/types.tsx
@@ -3,3 +3,9 @@ export type PathStrokeWidth = undefined | string;
 export type PathLinecap = undefined | "butt" | "round" | "square";
 /* "miter" is default when undefined https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin */
 export type PathLinejoin = undefined | "miter" | "round";
+
+export type PathProps = {
+  strokeWidth?: PathStrokeWidth;
+  strokeLinecap?: PathLinecap;
+  strokeLinejoin?: PathLinejoin;
+};