update

lib/widgets/common/custom_icon.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+class CustomIcon extends StatelessWidget {
+  final String iconPath;
+  final double? size;
+  final Color? iconColor;
+  final double opacity;
+
+  const CustomIcon({
+    super.key,
+    required this.iconPath,
+    this.size = 64,
+    this.iconColor,
+    this.opacity = 1.0,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Opacity(
+      opacity: opacity,
+      child: SizedBox(
+        width: size ?? 64,
+        height: size ?? 64,
+        child: Stack(
+          alignment: Alignment.center,
+          children: [
+            // Background Border (Always 000 for Battle/Default)
+            SizedBox.expand(
+              child: Image.asset(
+                'assets/images/icons/borders/border_000.png',
+                fit: BoxFit.contain,
+                filterQuality: FilterQuality.high,
+              ),
+            ),
+            // Inner Icon
+            FractionallySizedBox(
+              widthFactor: 0.6,
+              heightFactor: 0.6,
+              child: Image.asset(
+                iconPath,
+                fit: BoxFit.contain,
+                filterQuality: FilterQuality.high,
+                color: iconColor,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/common/custom_icon_button.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+import 'custom_icon.dart'; // Import CustomIcon
+
+class CustomIconButton extends StatelessWidget {
+  final String iconPath;
+  final VoidCallback? onTap;
+  final double? size;
+  final bool isEnabled;
+  final Color? iconColor;
+
+  const CustomIconButton({
+    super.key,
+    required this.iconPath,
+    this.onTap,
+    this.size = 64.0,
+    this.isEnabled = true,
+    this.iconColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: isEnabled ? onTap : null,
+      behavior: HitTestBehavior.opaque,
+      child: CustomIcon(
+        iconPath: iconPath,
+        size: size,
+        iconColor: iconColor,
+        opacity: isEnabled ? 1.0 : 0.5,
+      ),
+    );
+  }
+}