diff --git a/src/renderer/components/svgs/icons/compare-icon.component.tsx b/src/renderer/components/svgs/icons/compare-icon.component.tsx
index 465a2e11e..a5fd2d463 100644
--- a/src/renderer/components/svgs/icons/compare-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/compare-icon.component.tsx
@@ -1,10 +1,10 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type";
 
-export function CompareIcon(props: Readonly<{ className?: string; style?: CSSProperties }>) {
+export const CompareIcon = createSvgIcon((props, ref) => {
     return (
         <svg
-            className={props.className}
-            style={props.style}
+            ref={ref}
+            {...props}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 -960 960 960"
             fill="currentColor"
@@ -12,4 +12,5 @@ export function CompareIcon(props: Readonly<{ className?: string; style?: CSSPro
             <path d="M367-320H120q-17 0-28.5-11.5T80-360q0-17 11.5-28.5T120-400h247l-75-75q-11-11-11-27.5t11-28.5q12-12 28.5-12t28.5 12l143 143q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L348-188q-12 12-28 11.5T292-189q-11-12-11.5-28t11.5-28l75-75Zm226-240 75 75q11 11 11 27.5T668-429q-12 12-28.5 12T611-429L468-572q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l144-144q12-12 28-11.5t28 12.5q11 12 11.5 28T668-715l-75 75h247q17 0 28.5 11.5T880-600q0 17-11.5 28.5T840-560H593Z" />
         </svg>
     );
-}
+});
+
diff --git a/src/renderer/components/svgs/icons/down-icon.component.tsx b/src/renderer/components/svgs/icons/down-icon.component.tsx
index 5abec0a5b..486e512bd 100644
--- a/src/renderer/components/svgs/icons/down-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/down-icon.component.tsx
@@ -1,10 +1,10 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type";
 
-export function DownIcon(props: Readonly<{ className?: string; style?: CSSProperties }>) {
+export const DownIcon = createSvgIcon((props, ref) => {
     return (
         <svg
-            className={props.className}
-            style={props.style}
+            ref={ref}
+            {...props}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 -960 960 960"
             fill="currentColor"
@@ -12,4 +12,4 @@ export function DownIcon(props: Readonly<{ className?: string; style?: CSSProper
             <path d="M440-313v-447q0-17 11.5-28.5T480-800q17 0 28.5 11.5T520-760v447l196-196q12-12 28-11.5t28 12.5q11 12 11.5 28T772-452L508-188q-6 6-13 8.5t-15 2.5q-8 0-15-2.5t-13-8.5L188-452q-11-11-11-27.5t11-28.5q12-12 28.5-12t28.5 12l195 195Z" />
         </svg>
     );
-}
+});
diff --git a/src/renderer/components/svgs/icons/equals-icon.component.tsx b/src/renderer/components/svgs/icons/equals-icon.component.tsx
index 69b51d629..a354b286d 100644
--- a/src/renderer/components/svgs/icons/equals-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/equals-icon.component.tsx
@@ -1,8 +1,10 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type";
 
-export function EqualIcon(props: Readonly<{ className?: string; style?: CSSProperties }>) {
+export const EqualIcon = createSvgIcon((props, ref) => {
     return (
         <svg
+            ref={ref}
+            {...props}
             className={props.className}
             style={props.style}
             xmlns="http://www.w3.org/2000/svg"
@@ -12,4 +14,4 @@ export function EqualIcon(props: Readonly<{ className?: string; style?: CSSPrope
             <path d="M220-280q-25 0-42.5-17.5T160-340q0-25 17.5-42.5T220-400h520q25 0 42.5 17.5T800-340q0 25-17.5 42.5T740-280H220Zm0-280q-25 0-42.5-17.5T160-620q0-25 17.5-42.5T220-680h520q25 0 42.5 17.5T800-620q0 25-17.5 42.5T740-560H220Z" />
         </svg>
     );
-}
+});
diff --git a/src/renderer/components/svgs/icons/remove-icon.component.tsx b/src/renderer/components/svgs/icons/remove-icon.component.tsx
index c035ec268..d7ffa9569 100644
--- a/src/renderer/components/svgs/icons/remove-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/remove-icon.component.tsx
@@ -1,10 +1,10 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type"
 
-export function RemoveIcon(props: Readonly<{ className?: string; style?: CSSProperties }>) {
+export const RemoveIcon = createSvgIcon((props, ref) => {
     return (
         <svg
-            className={props.className}
-            style={props.style}
+            ref={ref}
+            {...props}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 -960 960 960"
             fill="currentColor"
@@ -12,4 +12,4 @@ export function RemoveIcon(props: Readonly<{ className?: string; style?: CSSProp
             <path d="M240-440q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h480q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H240Z" />
         </svg>
     )
-}
+});
diff --git a/src/renderer/components/svgs/icons/up-icon.component.tsx b/src/renderer/components/svgs/icons/up-icon.component.tsx
index f8bca33a5..1bcd60ae5 100644
--- a/src/renderer/components/svgs/icons/up-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/up-icon.component.tsx
@@ -1,10 +1,10 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type";
 
-export function UpIcon(props: Readonly<{ className?: string; style?: CSSProperties }>) {
+export const UpIcon = createSvgIcon((props, ref) => {
     return (
         <svg
-            className={props.className}
-            style={props.style}
+            ref={ref}
+            {...props}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 -960 960 960"
             fill="currentColor"
@@ -12,4 +12,4 @@ export function UpIcon(props: Readonly<{ className?: string; style?: CSSProperti
             <path d="M440-647 244-451q-12 12-28 11.5T188-452q-11-12-11.5-28t11.5-28l264-264q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l264 264q11 11 11 27.5T772-452q-12 12-28.5 12T715-452L520-647v447q0 17-11.5 28.5T480-160q-17 0-28.5-11.5T440-200v-447Z" />
         </svg>
     );
-}
+});