diff --git a/frontend/app/components/ui/Icons/color_browser_edge.tsx b/frontend/app/components/ui/Icons/color_browser_edge.tsx
index 350919ecc..e44e52938 100644
--- a/frontend/app/components/ui/Icons/color_browser_edge.tsx
+++ b/frontend/app/components/ui/Icons/color_browser_edge.tsx
@@ -31,13 +31,13 @@ function Color_browser_edge(props: Props) {
 </linearGradient>
 <radialGradient id="paint2_radial_449_13031" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.9396 18.9909) rotate(59.2143) scale(9.48152 9.49698)">
 <stop stopColor="#1284D8"/>
-<stop offset="0.813899" stopColor="#1170B2" stop-opacity="0.767762"/>
-<stop offset="1" stopColor="#0E649B" stop-opacity="0.65"/>
+<stop offset="0.813899" stopColor="#1170B2" stopOpacity="0.767762"/>
+<stop offset="1" stopColor="#0E649B" stopOpacity="0.65"/>
 </radialGradient>
 <radialGradient id="paint3_radial_449_13031" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.666 21.6) rotate(77.9982) scale(7.6769 8.28824)">
 <stop stopColor="#104890"/>
-<stop offset="0.69943" stopColor="#12529E" stop-opacity="0.70624"/>
-<stop offset="1" stopColor="#0E4584" stop-opacity="0.58"/>
+<stop offset="0.69943" stopColor="#12529E" stopOpacity="0.70624"/>
+<stop offset="1" stopColor="#0E4584" stopOpacity="0.58"/>
 </radialGradient>
 </defs>
 </svg>
diff --git a/frontend/app/components/ui/Icons/color_browser_firefox.tsx b/frontend/app/components/ui/Icons/color_browser_firefox.tsx
index 41b53363c..73e18e6c5 100644
--- a/frontend/app/components/ui/Icons/color_browser_firefox.tsx
+++ b/frontend/app/components/ui/Icons/color_browser_firefox.tsx
@@ -49,10 +49,10 @@ function Color_browser_firefox(props: Props) {
 </radialGradient>
 <radialGradient id="paint2_radial_449_13012" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.3806 16.1925) scale(29.2246 29.2888)">
 <stop offset="0.3" stopColor="#960E18"/>
-<stop offset="0.35" stopColor="#B11927" stop-opacity="0.74"/>
-<stop offset="0.43" stopColor="#DB293D" stop-opacity="0.34"/>
-<stop offset="0.5" stopColor="#F5334B" stop-opacity="0.09"/>
-<stop offset="0.53" stopColor="#FF3750" stop-opacity="0"/>
+<stop offset="0.35" stopColor="#B11927" stopOpacity="0.74"/>
+<stop offset="0.43" stopColor="#DB293D" stopOpacity="0.34"/>
+<stop offset="0.5" stopColor="#F5334B" stopOpacity="0.09"/>
+<stop offset="0.53" stopColor="#FF3750" stopOpacity="0"/>
 </radialGradient>
 <radialGradient id="paint3_radial_449_13012" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.9045 -2.42803) scale(21.172 21.2184)">
 <stop offset="0.13" stopColor="#FFF44F"/>
@@ -67,10 +67,10 @@ function Color_browser_firefox(props: Props) {
 <stop offset="1" stopColor="#C139E6"/>
 </radialGradient>
 <radialGradient id="paint5_radial_449_13012" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.8004 12.7116) rotate(-13.9265) scale(7.37316 8.67852)">
-<stop offset="0.21" stopColor="#9059FF" stop-opacity="0"/>
-<stop offset="0.28" stopColor="#8C4FF3" stop-opacity="0.06"/>
-<stop offset="0.75" stopColor="#7716A8" stop-opacity="0.45"/>
-<stop offset="0.97" stopColor="#6E008B" stop-opacity="0.6"/>
+<stop offset="0.21" stopColor="#9059FF" stopOpacity="0"/>
+<stop offset="0.28" stopColor="#8C4FF3" stopOpacity="0.06"/>
+<stop offset="0.75" stopColor="#7716A8" stopOpacity="0.45"/>
+<stop offset="0.97" stopColor="#6E008B" stopOpacity="0.6"/>
 </radialGradient>
 <radialGradient id="paint6_radial_449_13012" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.0114 3.02041) scale(10.0108 10.0328)">
 <stop stopColor="#FFE226"/>
@@ -111,10 +111,10 @@ function Color_browser_firefox(props: Props) {
 <stop offset="0.63" stopColor="#FF980E"/>
 </radialGradient>
 <linearGradient id="paint11_linear_449_13012" x1="26.855" y1="5.37218" x2="7.01043" y2="25.1739" gradientUnits="userSpaceOnUse">
-<stop offset="0.17" stopColor="#FFF44F" stop-opacity="0.8"/>
-<stop offset="0.27" stopColor="#FFF44F" stop-opacity="0.63"/>
-<stop offset="0.49" stopColor="#FFF44F" stop-opacity="0.22"/>
-<stop offset="0.6" stopColor="#FFF44F" stop-opacity="0"/>
+<stop offset="0.17" stopColor="#FFF44F" stopOpacity="0.8"/>
+<stop offset="0.27" stopColor="#FFF44F" stopOpacity="0.63"/>
+<stop offset="0.49" stopColor="#FFF44F" stopOpacity="0.22"/>
+<stop offset="0.6" stopColor="#FFF44F" stopOpacity="0"/>
 </linearGradient>
 </defs>
 </svg>
diff --git a/frontend/app/components/ui/Icons/color_browser_safari.tsx b/frontend/app/components/ui/Icons/color_browser_safari.tsx
index 6134ccd85..bcd4db796 100644
--- a/frontend/app/components/ui/Icons/color_browser_safari.tsx
+++ b/frontend/app/components/ui/Icons/color_browser_safari.tsx
@@ -160,7 +160,7 @@ function Color_browser_safari(props: Props) {
 <stop offset="1" stopColor="#3375F8"/>
 </radialGradient>
 <linearGradient id="paint2_linear_449_13003" x1="15.8306" y1="12.2861" x2="9.78632" y2="23.1302" gradientUnits="userSpaceOnUse">
-<stop stop-opacity="0"/>
+<stop stopOpacity="0"/>
 <stop offset="1"/>
 </linearGradient>
 </defs>
diff --git a/frontend/app/components/ui/Icons/color_device_mobile.tsx b/frontend/app/components/ui/Icons/color_device_mobile.tsx
index 689568920..c38068b63 100644
--- a/frontend/app/components/ui/Icons/color_device_mobile.tsx
+++ b/frontend/app/components/ui/Icons/color_device_mobile.tsx
@@ -22,7 +22,7 @@ function Color_device_mobile(props: Props) {
 <linearGradient id="paint0_linear_451_13943" x1="16" y1="0" x2="16" y2="32" gradientUnits="userSpaceOnUse">
 <stop stopColor="#E2E4F6"/>
 <stop offset="0.415" stopColor="#FFF0F8"/>
-<stop offset="1" stopColor="#FDFAC4" stop-opacity="0.8"/>
+<stop offset="1" stopColor="#FDFAC4" stopOpacity="0.8"/>
 </linearGradient>
 <clipPath id="clip0_451_13943">
 <rect width="15" height="22" fill="white" transform="translate(8.5 5)"/>
diff --git a/frontend/app/components/ui/Icons/color_edge.tsx b/frontend/app/components/ui/Icons/color_edge.tsx
index 4b87cda44..ac0f634a8 100644
--- a/frontend/app/components/ui/Icons/color_edge.tsx
+++ b/frontend/app/components/ui/Icons/color_edge.tsx
@@ -31,13 +31,13 @@ function Color_edge(props: Props) {
 </linearGradient>
 <radialGradient id="paint2_radial_716_8450" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.20467 14.2432) rotate(59.2143) scale(7.11114 7.12274)">
 <stop stopColor="#1284D8"/>
-<stop offset="0.813899" stopColor="#1170B2" stop-opacity="0.767762"/>
-<stop offset="1" stopColor="#0E649B" stop-opacity="0.65"/>
+<stop offset="0.813899" stopColor="#1170B2" stopOpacity="0.767762"/>
+<stop offset="1" stopColor="#0E649B" stopOpacity="0.65"/>
 </radialGradient>
 <radialGradient id="paint3_radial_716_8450" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.9995 16.2) rotate(77.9982) scale(5.75767 6.21618)">
 <stop stopColor="#104890"/>
-<stop offset="0.69943" stopColor="#12529E" stop-opacity="0.70624"/>
-<stop offset="1" stopColor="#0E4584" stop-opacity="0.58"/>
+<stop offset="0.69943" stopColor="#12529E" stopOpacity="0.70624"/>
+<stop offset="1" stopColor="#0E4584" stopOpacity="0.58"/>
 </radialGradient>
 </defs>
 </svg>
diff --git a/frontend/app/components/ui/Icons/color_firefox.tsx b/frontend/app/components/ui/Icons/color_firefox.tsx
index 14599d88d..bf0ec2eae 100644
--- a/frontend/app/components/ui/Icons/color_firefox.tsx
+++ b/frontend/app/components/ui/Icons/color_firefox.tsx
@@ -49,10 +49,10 @@ function Color_firefox(props: Props) {
 </radialGradient>
 <radialGradient id="paint2_radial_716_8611" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.5354 12.1443) scale(21.9185 21.9666)">
 <stop offset="0.3" stopColor="#960E18"/>
-<stop offset="0.35" stopColor="#B11927" stop-opacity="0.74"/>
-<stop offset="0.43" stopColor="#DB293D" stop-opacity="0.34"/>
-<stop offset="0.5" stopColor="#F5334B" stop-opacity="0.09"/>
-<stop offset="0.53" stopColor="#FF3750" stop-opacity="0"/>
+<stop offset="0.35" stopColor="#B11927" stopOpacity="0.74"/>
+<stop offset="0.43" stopColor="#DB293D" stopOpacity="0.34"/>
+<stop offset="0.5" stopColor="#F5334B" stopOpacity="0.09"/>
+<stop offset="0.53" stopColor="#FF3750" stopOpacity="0"/>
 </radialGradient>
 <radialGradient id="paint3_radial_716_8611" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.1784 -1.82102) scale(15.879 15.9138)">
 <stop offset="0.13" stopColor="#FFF44F"/>
@@ -67,10 +67,10 @@ function Color_firefox(props: Props) {
 <stop offset="1" stopColor="#C139E6"/>
 </radialGradient>
 <radialGradient id="paint5_radial_716_8611" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.8503 9.53372) rotate(-13.9265) scale(5.52987 6.50889)">
-<stop offset="0.21" stopColor="#9059FF" stop-opacity="0"/>
-<stop offset="0.28" stopColor="#8C4FF3" stop-opacity="0.06"/>
-<stop offset="0.75" stopColor="#7716A8" stop-opacity="0.45"/>
-<stop offset="0.97" stopColor="#6E008B" stop-opacity="0.6"/>
+<stop offset="0.21" stopColor="#9059FF" stopOpacity="0"/>
+<stop offset="0.28" stopColor="#8C4FF3" stopOpacity="0.06"/>
+<stop offset="0.75" stopColor="#7716A8" stopOpacity="0.45"/>
+<stop offset="0.97" stopColor="#6E008B" stopOpacity="0.6"/>
 </radialGradient>
 <radialGradient id="paint6_radial_716_8611" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.2585 2.2653) scale(7.50813 7.52461)">
 <stop stopColor="#FFE226"/>
@@ -111,10 +111,10 @@ function Color_firefox(props: Props) {
 <stop offset="0.63" stopColor="#FF980E"/>
 </radialGradient>
 <linearGradient id="paint11_linear_716_8611" x1="20.1413" y1="4.02914" x2="5.25782" y2="18.8804" gradientUnits="userSpaceOnUse">
-<stop offset="0.17" stopColor="#FFF44F" stop-opacity="0.8"/>
-<stop offset="0.27" stopColor="#FFF44F" stop-opacity="0.63"/>
-<stop offset="0.49" stopColor="#FFF44F" stop-opacity="0.22"/>
-<stop offset="0.6" stopColor="#FFF44F" stop-opacity="0"/>
+<stop offset="0.17" stopColor="#FFF44F" stopOpacity="0.8"/>
+<stop offset="0.27" stopColor="#FFF44F" stopOpacity="0.63"/>
+<stop offset="0.49" stopColor="#FFF44F" stopOpacity="0.22"/>
+<stop offset="0.6" stopColor="#FFF44F" stopOpacity="0"/>
 </linearGradient>
 </defs>
 </svg>
diff --git a/frontend/app/components/ui/Icons/color_os_linux.tsx b/frontend/app/components/ui/Icons/color_os_linux.tsx
index f49bbe0c9..cddd6472e 100644
--- a/frontend/app/components/ui/Icons/color_os_linux.tsx
+++ b/frontend/app/components/ui/Icons/color_os_linux.tsx
@@ -38,8 +38,8 @@ function Color_os_linux(props: Props) {
 <path d="M14.8439 10.7893C14.9749 10.6668 15.3875 10.3333 15.9312 10.6736C16.0491 10.7416 16.167 10.8165 16.3373 10.9186C16.6845 11.1296 16.5142 11.4358 16.0949 11.6264C15.905 11.7081 15.5906 11.885 15.3548 11.8714C15.0928 11.8442 14.9159 11.6672 14.7456 11.5515C14.4246 11.3338 14.4443 11.15 14.5949 11.0071C14.7063 10.8982 14.8308 10.7961 14.8439 10.7893Z" fill="url(#paint15_linear_1_13597)"/>
 <defs>
 <linearGradient id="paint0_linear_1_13597" x1="16.0581" y1="6.30635" x2="15.8367" y2="9.30617" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.8"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.8"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint1_linear_1_13597" x1="12.8966" y1="22.6723" x2="11.2506" y2="17.2717" gradientUnits="userSpaceOnUse">
 <stop stopColor="#FFEED7"/>
@@ -50,28 +50,28 @@ function Color_os_linux(props: Props) {
 <stop offset="1" stopColor="#BDBFC2"/>
 </linearGradient>
 <linearGradient id="paint3_linear_1_13597" x1="16.6683" y1="9.65564" x2="16.575" y2="10.3544" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint4_linear_1_13597" x1="14.4338" y1="9.78294" x2="14.5342" y2="10.3483" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint5_linear_1_13597" x1="15.7615" y1="15.6308" x2="15.7781" y2="19.6274" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.8"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.8"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint6_linear_1_13597" x1="15.85" y1="13.1247" x2="15.8684" y2="14.7138" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint7_linear_1_13597" x1="11.7196" y1="14.1055" x2="11.7196" y2="19.9372" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint8_linear_1_13597" x1="21.0329" y1="13.5359" x2="21.0306" y2="18.8051" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint9_linear_1_13597" x1="11.4281" y1="22.4373" x2="10.535" y2="25.4213" gradientUnits="userSpaceOnUse">
 <stop stopColor="#FFA63F"/>
@@ -82,24 +82,24 @@ function Color_os_linux(props: Props) {
 <stop offset="1" stopColor="#FFFF00"/>
 </linearGradient>
 <linearGradient id="paint11_linear_1_13597" x1="20.5202" y1="18.9332" x2="19.6866" y2="22.8604" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint12_linear_1_13597" x1="11.2461" y1="19.9044" x2="11.4114" y2="24.3241" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint13_linear_1_13597" x1="20.3754" y1="18.8617" x2="20.5687" y2="20.1823" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 <linearGradient id="paint14_linear_1_13597" x1="15.7647" y1="10.7838" x2="15.7809" y2="13.1096" gradientUnits="userSpaceOnUse">
 <stop stopColor="#FFA63F"/>
 <stop offset="1" stopColor="#FFFF00"/>
 </linearGradient>
 <linearGradient id="paint15_linear_1_13597" x1="15.5103" y1="10.5638" x2="15.5059" y2="11.7936" gradientUnits="userSpaceOnUse">
-<stop stopColor="white" stop-opacity="0.65"/>
-<stop offset="1" stopColor="white" stop-opacity="0"/>
+<stop stopColor="white" stopOpacity="0.65"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
 </linearGradient>
 </defs>
 </svg>
diff --git a/frontend/app/components/ui/Icons/color_safari.tsx b/frontend/app/components/ui/Icons/color_safari.tsx
index ab79ee3da..b8480c525 100644
--- a/frontend/app/components/ui/Icons/color_safari.tsx
+++ b/frontend/app/components/ui/Icons/color_safari.tsx
@@ -160,7 +160,7 @@ function Color_safari(props: Props) {
 <stop offset="1" stopColor="#3375F8"/>
 </radialGradient>
 <linearGradient id="paint2_linear_716_8465" x1="11.8729" y1="9.2146" x2="7.33972" y2="17.3477" gradientUnits="userSpaceOnUse">
-<stop stop-opacity="0"/>
+<stop stopOpacity="0"/>
 <stop offset="1"/>
 </linearGradient>
 </defs>
diff --git a/frontend/scripts/icons.js b/frontend/scripts/icons.js
index 3fed263a1..c47845761 100644
--- a/frontend/scripts/icons.js
+++ b/frontend/scripts/icons.js
@@ -125,6 +125,7 @@ function ${titleCase(fileName)}(props: Props) {
         .replaceAll(/stroke-miterlimit/g, 'strokeMiterlimit')
         .replaceAll(/xml:space="preserve"/g, '')
         .replaceAll(/flood-opacity/g, 'floodOpacity')
+        .replaceAll(/stop-opacity/g, 'stopOpacity')
         .replaceAll(
           /color-interpolation-filters/g,
           'colorInterpolationFilters'