diff --git a/resources/views/finance/account-transactions.blade.php b/resources/views/finance/account-transactions.blade.php
index 85b46ded..feabc615 100644
--- a/resources/views/finance/account-transactions.blade.php
+++ b/resources/views/finance/account-transactions.blade.php
@@ -20,18 +20,21 @@
 <script type="text/babel">
 const { useState, useRef, useEffect } = React;
 
-const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
-    const ref = useRef(null);
-    useEffect(() => {
-        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
-        if (ref.current && _def) {
-            ref.current.innerHTML = '';
-            const svg = lucide.createElement(_def);
-            svg.setAttribute('class', className);
-            ref.current.appendChild(svg);
-        }
-    }, [className]);
-    return <span ref={ref} className="inline-flex items-center" {...props} />;
+const createIcon = (name) => {
+    const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck','arrow-up-circle':'CircleArrowUp','arrow-down-circle':'CircleArrowDown'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+    const _c = s => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    return ({ className = "w-5 h-5", ...props }) => {
+        if (!_def) return null;
+        const [, attrs, children = []] = _def;
+        const sp = { className };
+        Object.entries(attrs).forEach(([k, v]) => { sp[_c(k)] = v; });
+        Object.assign(sp, props);
+        return React.createElement("svg", sp, ...children.map(([tag, ca], i) => {
+            const cp = { key: i };
+            if (ca) Object.entries(ca).forEach(([k, v]) => { cp[_c(k)] = v; });
+            return React.createElement(tag, cp);
+        }));
+    };
 };
 
 const ArrowUpDown = createIcon('arrow-up-down');