diff --git a/resources/js/components/dashboard/account-type-icon.tsx b/resources/js/components/dashboard/account-type-icon.tsx
index 304217c0..41e9d9d1 100644
--- a/resources/js/components/dashboard/account-type-icon.tsx
+++ b/resources/js/components/dashboard/account-type-icon.tsx
@@ -1,16 +1,5 @@
 import { cn } from '@/lib/utils';
-import { AccountType } from '@/types/account';
-import {
-    BadgeQuestionMarkIcon,
-    Building2,
-    CreditCard,
-    FolderKanban,
-    Landmark,
-    LucideIcon,
-    PiggyBank,
-    TrendingUp,
-    Umbrella,
-} from 'lucide-react';
+import { AccountType, accountIconByType } from '@/types/account';
 
 export function AccountTypeIcon({
     type,
@@ -19,17 +8,7 @@ export function AccountTypeIcon({
     type: AccountType;
     className?: string;
 }) {
-    const typeMap: Record<AccountType, LucideIcon> = {
-        checking: Building2, // 🏦 - bank / institution
-        credit_card: CreditCard, // 💳 - card
-        investment: TrendingUp, // 📈 - growth / investment
-        loan: Landmark, // 🏠 - "institution/loan", or use Home if it's a mortgage
-        retirement: Umbrella, // 🏖️ - retirement / pension
-        savings: PiggyBank, // 💰 - savings
-        others: FolderKanban, // 📁 - miscellaneous/other
-    };
-
-    const Icon = typeMap[type] || BadgeQuestionMarkIcon;
+    const Icon = accountIconByType(type);
 
     return (
         <Icon className={cn(['h-5 w-5 text-muted-foreground', className])} />
diff --git a/resources/js/components/onboarding/step-account-types.tsx b/resources/js/components/onboarding/step-account-types.tsx
index 6bd90e69..c3bf84e6 100644
--- a/resources/js/components/onboarding/step-account-types.tsx
+++ b/resources/js/components/onboarding/step-account-types.tsx
@@ -1,15 +1,8 @@
 import { StepButton } from '@/components/onboarding/step-button';
 import { StepHeader } from '@/components/onboarding/step-header';
+import { accountIconByType } from '@/types/account';
 import { __ } from '@/utils/i18n';
-import {
-    Banknote,
-    Building2,
-    CreditCard,
-    LineChart,
-    PiggyBank,
-    TrendingUp,
-    Wallet,
-} from 'lucide-react';
+import { Banknote } from 'lucide-react';
 
 interface StepAccountTypesProps {
     onContinue: () => void;
@@ -17,44 +10,38 @@ interface StepAccountTypesProps {
 
 const accountTypes = [
     {
-        type: 'checking',
+        type: 'checking' as const,
         nameKey: 'Checking',
-        icon: Wallet,
         descriptionKey: 'Daily spending and transactions',
         hasTransactions: true,
     },
     {
-        type: 'savings',
+        type: 'savings' as const,
         nameKey: 'Savings',
-        icon: PiggyBank,
         descriptionKey: 'Save money for goals',
         hasTransactions: true,
     },
     {
-        type: 'credit_card',
+        type: 'credit_card' as const,
         nameKey: 'Credit Card',
-        icon: CreditCard,
         descriptionKey: 'Track credit card spending',
         hasTransactions: true,
     },
     {
-        type: 'investment',
+        type: 'investment' as const,
         nameKey: 'Investment',
-        icon: LineChart,
         descriptionKey: 'Stocks, ETFs, and portfolios',
         hasTransactions: false,
     },
     {
-        type: 'retirement',
+        type: 'retirement' as const,
         nameKey: 'Retirement',
-        icon: TrendingUp,
         descriptionKey: '401k, IRA, pension funds',
         hasTransactions: false,
     },
     {
-        type: 'loan',
+        type: 'loan' as const,
         nameKey: 'Loan',
-        icon: Building2,
         descriptionKey: 'Mortgages and loans',
         hasTransactions: false,
     },
@@ -73,41 +60,45 @@ export function StepAccountTypes({ onContinue }: StepAccountTypesProps) {
             />
 
             <div className="grid w-full max-w-2xl gap-3 sm:grid-cols-2">
-                {accountTypes.map((account) => (
-                    <div
-                        key={account.type}
-                        className="group relative flex flex-row items-center gap-2 overflow-hidden rounded-xl border bg-card p-3 transition-all hover:shadow-md sm:items-start sm:p-4"
-                    >
-                        <div className="flex w-full flex-col items-start gap-1 sm:gap-2">
-                            <div className="flex w-full flex-row items-center justify-between gap-2 sm:items-start">
-                                <div className="flex items-center gap-2">
-                                    <account.icon
-                                        className={`size-4 stroke-muted-foreground`}
-                                    />
+                {accountTypes.map((account) => {
+                    const Icon = accountIconByType(account.type);
 
-                                    <h3 className="font-semibold">
-                                        {__(account.nameKey)}
-                                    </h3>
+                    return (
+                        <div
+                            key={account.type}
+                            className="group relative flex flex-row items-center gap-2 overflow-hidden rounded-xl border bg-card p-3 transition-all hover:shadow-md sm:items-start sm:p-4"
+                        >
+                            <div className="flex w-full flex-col items-start gap-1 sm:gap-2">
+                                <div className="flex w-full flex-row items-center justify-between gap-2 sm:items-start">
+                                    <div className="flex items-center gap-2">
+                                        <Icon
+                                            className={`size-4 stroke-muted-foreground`}
+                                        />
+
+                                        <h3 className="font-semibold">
+                                            {__(account.nameKey)}
+                                        </h3>
+                                    </div>
+
+                                    <span
+                                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                                            account.hasTransactions
+                                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+                                                : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
+                                        }`}
+                                    >
+                                        {account.hasTransactions
+                                            ? __('Transactions + Balance')
+                                            : __('Balance')}
+                                    </span>
                                 </div>
-
-                                <span
-                                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
-                                        account.hasTransactions
-                                            ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
-                                            : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
-                                    }`}
-                                >
-                                    {account.hasTransactions
-                                        ? __('Transactions + Balance')
-                                        : __('Balance')}
-                                </span>
+                                <p className="text-sm text-muted-foreground">
+                                    {__(account.descriptionKey)}
+                                </p>
                             </div>
-                            <p className="text-sm text-muted-foreground">
-                                {__(account.descriptionKey)}
-                            </p>
                         </div>
-                    </div>
-                ))}
+                    );
+                })}
             </div>
 
             <div className="mt-8 w-full sm:w-auto">
diff --git a/resources/js/types/account.ts b/resources/js/types/account.ts
index b16c727b..afbb6d81 100644
--- a/resources/js/types/account.ts
+++ b/resources/js/types/account.ts
@@ -1,4 +1,15 @@
 import { __ } from '@/utils/i18n';
+import {
+    BadgeQuestionMarkIcon,
+    Building2,
+    CreditCard,
+    FolderKanban,
+    LineChart,
+    LucideIcon,
+    PiggyBank,
+    TrendingUp,
+    Wallet,
+} from 'lucide-react';
 import { UUID } from './uuid';
 
 export const ACCOUNT_TYPES = [
@@ -92,6 +103,20 @@ export function supportsInvestedAmount(
     return INVESTED_AMOUNT_ACCOUNT_TYPES.includes(account.type);
 }
 
+export function accountIconByType(type: AccountType): LucideIcon {
+    const typeMap: Record<AccountType, LucideIcon> = {
+        checking: Wallet,
+        credit_card: CreditCard,
+        investment: LineChart,
+        loan: Building2,
+        retirement: TrendingUp,
+        savings: PiggyBank,
+        others: FolderKanban,
+    };
+
+    return typeMap[type] ?? BadgeQuestionMarkIcon;
+}
+
 export function filterTransactionalAccounts<T extends { type: AccountType }>(
     accounts: T[],
 ): T[] {