diff --git a/packages/admin/resources/views/components/global-search/input.blade.php b/packages/admin/resources/views/components/global-search/input.blade.php
index 2c6f1554af..8fae7ca2c1 100644
--- a/packages/admin/resources/views/components/global-search/input.blade.php
+++ b/packages/admin/resources/views/components/global-search/input.blade.php
@@ -8,7 +8,14 @@
             'absolute inset-y-0 left-0 flex items-center justify-center w-10 h-10 text-gray-500 pointer-events-none group-focus-within:text-primary-500',
             'dark:text-gray-400' => config('filament.dark_mode'),
         ])>
-            <x-heroicon-m-magnifying-glass class="w-5 h-5" wire:loading.remove.delay wire:target="search" />
+            @svg(
+                'heroicon-m-magnifying-glass',
+                'h-5 w-5',
+                [
+                    'wire:loading.remove.delay',
+                    'wire:target' => 'search',
+                ],
+            )
 
             <x-filament-support::loading-indicator class="w-5 h-5" wire:loading.delay wire:target="search" />
         </span>
diff --git a/packages/admin/resources/views/components/layouts/app/sidebar/group.blade.php b/packages/admin/resources/views/components/layouts/app/sidebar/group.blade.php
index 96c0665b5a..abb9758551 100644
--- a/packages/admin/resources/views/components/layouts/app/sidebar/group.blade.php
+++ b/packages/admin/resources/views/components/layouts/app/sidebar/group.blade.php
@@ -20,7 +20,7 @@
                 'dark:text-gray-300' => config('filament.dark_mode'),
             ])>
                 @if ($icon)
-                    <x-dynamic-component :component="$icon" class="ml-1 w-3 h-3 flex-shrink-0" />
+                    @svg($icon, 'ml-1 w-3 h-3 flex-shrink-0')
                 @endif
 
                 <p class="flex-1 font-bold uppercase text-xs tracking-wider">
@@ -29,10 +29,17 @@
             </div>
 
             @if ($collapsible)
-                <x-heroicon-m-chevron-down :class="\Illuminate\Support\Arr::toCssClasses([
-                    'w-3 h-3 text-gray-600 transition',
-                    'dark:text-gray-300' => config('filament.dark_mode'),
-                ])" x-bind:class="$store.sidebar.groupIsCollapsed(label) || '-rotate-180'" x-cloak />
+                @svg(
+                    'heroicon-m-chevron-down',
+                    \Illuminate\Support\Arr::toCssClasses([
+                        'h-3 w-3 text-gray-600 transition',
+                        'dark:text-gray-300' => config('filament.dark_mode'),
+                    ]),
+                    [
+                        'x-bind:class' => '$store.sidebar.groupIsCollapsed(label) || "-rotate-180"',
+                        'x-cloak',
+                    ],
+                )
             @endif
         </button>
     @endif
diff --git a/packages/admin/resources/views/components/layouts/app/sidebar/index.blade.php b/packages/admin/resources/views/components/layouts/app/sidebar/index.blade.php
index bf93577b4a..cdbf1252c0 100644
--- a/packages/admin/resources/views/components/layouts/app/sidebar/index.blade.php
+++ b/packages/admin/resources/views/components/layouts/app/sidebar/index.blade.php
@@ -34,7 +34,7 @@
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                 >
-                    <x-heroicon-o-chevron-left class="h-6 w-6" />
+                    @svg('heroicon-o-chevron-left', 'h-6 w-6')
                 </button>
             @endif
 
@@ -60,7 +60,7 @@
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
             >
-                <x-heroicon-o-bars-3 class="h-6 w-6" />
+                @svg('heroicon-o-bars-3', 'h-6 w-6')
             </button>
         @endif
     </header>
diff --git a/packages/admin/resources/views/components/layouts/app/sidebar/item.blade.php b/packages/admin/resources/views/components/layouts/app/sidebar/item.blade.php
index f2ca318e23..f5f2e10dc5 100644
--- a/packages/admin/resources/views/components/layouts/app/sidebar/item.blade.php
+++ b/packages/admin/resources/views/components/layouts/app/sidebar/item.blade.php
@@ -36,7 +36,7 @@
             'bg-primary-500 text-white' => $active,
         ])
     >
-        <x-dynamic-component :component="$icon" class="h-5 w-5 shrink-0" />
+        @svg($icon, 'h-5 w-5 shrink-0')
 
         <div class="flex flex-1"
             @if (config('filament.layout.sidebar.is_collapsible_on_desktop'))
diff --git a/packages/admin/resources/views/components/stats/card.blade.php b/packages/admin/resources/views/components/stats/card.blade.php
index 243abe6624..b5730dce49 100644
--- a/packages/admin/resources/views/components/stats/card.blade.php
+++ b/packages/admin/resources/views/components/stats/card.blade.php
@@ -27,7 +27,7 @@
             'dark:text-gray-200' => config('filament.dark_mode'),
         ])>
             @if ($icon)
-                <x-dynamic-component :component="$icon" class="w-4 h-4" />
+                @svg($icon, 'h-4 w-4')
             @endif
 
             <span>{{ $label }}</span>
@@ -51,7 +51,7 @@
                 <span>{{ $description }}</span>
 
                 @if ($descriptionIcon)
-                    <x-dynamic-component :component="$descriptionIcon" class="w-4 h-4" />
+                    @svg($descriptionIcon, 'h-4 w-4')
                 @endif
             </div>
         @endif
diff --git a/packages/admin/resources/views/components/topbar.blade.php b/packages/admin/resources/views/components/topbar.blade.php
index 91aade2fa0..f45db5b5d0 100644
--- a/packages/admin/resources/views/components/topbar.blade.php
+++ b/packages/admin/resources/views/components/topbar.blade.php
@@ -17,7 +17,7 @@
                 'lg:hidden' => ! (config('filament.layout.sidebar.is_collapsible_on_desktop') && (config('filament.layout.sidebar.collapsed_width') === 0)),
             ])
         >
-            <x-heroicon-o-bars-3 class="w-6 h-6" />
+            @svg('heroicon-o-bars-3', 'h-6 w-6')
         </button>
 
         <div class="flex items-center justify-between flex-1">
diff --git a/packages/forms/resources/views/components/builder.blade.php b/packages/forms/resources/views/components/builder.blade.php
index fab3aafca0..959ac2f837 100644
--- a/packages/forms/resources/views/components/builder.blade.php
+++ b/packages/forms/resources/views/components/builder.blade.php
@@ -114,7 +114,7 @@
                                             {{ __('forms::components.builder.buttons.move_item.label') }}
                                         </span>
 
-                                        <x-heroicon-m-arrows-up-down class="w-4 h-4"/>
+                                        @svg('heroicon-m-arrows-up-down', 'h-4 w-4')
                                     </button>
                                 @endunless
 
@@ -162,7 +162,7 @@
                                                     {{ __('forms::components.builder.buttons.clone_item.label') }}
                                                 </span>
 
-                                                <x-heroicon-m-square-2-stack class="w-4 h-4"/>
+                                                @svg('heroicon-m-square-2-stack', 'h-4 w-4')
                                             </button>
                                         </li>
                                     @endif
@@ -182,7 +182,7 @@
                                                     {{ __('forms::components.builder.buttons.delete_item.label') }}
                                                 </span>
 
-                                                <x-heroicon-m-trash class="w-4 h-4"/>
+                                                @svg('heroicon-m-trash', 'h-4 w-4')
                                             </button>
                                         </li>
                                     @endunless
@@ -195,13 +195,24 @@
                                                 type="button"
                                                 class="flex items-center justify-center flex-none w-10 h-10 text-gray-400 transition hover:text-gray-500"
                                             >
-                                                <x-heroicon-m-minus class="w-4 h-4" x-show="! isCollapsed"/>
+                                                @svg(
+                                                    'heroicon-m-minus',
+                                                    'h-4 w-4',
+                                                    ['x-show' => '! isCollapsed'],
+                                                )
 
                                                 <span class="sr-only" x-show="! isCollapsed">
                                                     {{ __('forms::components.builder.buttons.collapse_item.label') }}
                                                 </span>
 
-                                                <x-heroicon-m-plus class="w-4 h-4" x-show="isCollapsed" x-cloak/>
+                                                @svg(
+                                                    'heroicon-m-plus',
+                                                    'h-4 w-4',
+                                                    [
+                                                        'x-show' => 'isCollapsed',
+                                                        'x-cloak',
+                                                    ],
+                                                )
 
                                                 <span class="sr-only" x-show="isCollapsed" x-cloak>
                                                     {{ __('forms::components.builder.buttons.expand_item.label') }}
diff --git a/packages/forms/resources/views/components/color-picker.blade.php b/packages/forms/resources/views/components/color-picker.blade.php
index d656498697..7e1b6fee9d 100644
--- a/packages/forms/resources/views/components/color-picker.blade.php
+++ b/packages/forms/resources/views/components/color-picker.blade.php
@@ -25,7 +25,7 @@
         @endif
 
         @if ($icon = $getPrefixIcon())
-            <x-dynamic-component :component="$icon" class="w-5 h-5" />
+            @svg($icon, 'h-5 w-5')
         @endif
 
         @if ($label = $getPrefixLabel())
@@ -103,7 +103,7 @@
         @endif
 
         @if ($icon = $getSuffixIcon())
-            <x-dynamic-component :component="$icon" class="w-5 h-5" />
+            @svg($icon, 'h-5 w-5')
         @endif
 
         @if (($suffixAction = $getSuffixAction()) && (! $suffixAction->isHidden()))
diff --git a/packages/forms/resources/views/components/date-time-picker.blade.php b/packages/forms/resources/views/components/date-time-picker.blade.php
index fe6573ad2d..58dc220bc2 100644
--- a/packages/forms/resources/views/components/date-time-picker.blade.php
+++ b/packages/forms/resources/views/components/date-time-picker.blade.php
@@ -67,10 +67,13 @@
             />
 
             <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none rtl:right-auto rtl:left-0 rtl:pl-2">
-                <x-heroicon-m-calendar @class([
-                    'w-5 h-5 text-gray-400',
-                    'dark:text-gray-400' => config('forms.dark_mode'),
-                ]) />
+                @svg(
+                    'heroicon-m-calendar',
+                    \Illuminate\Support\Arr::toCssClasses([
+                        'h-5 w-5 text-gray-400',
+                        'dark:text-gray-400' => config('forms.dark_mode'),
+                    ]),
+                )
             </span>
         </button>
 
diff --git a/packages/forms/resources/views/components/field-wrapper/hint.blade.php b/packages/forms/resources/views/components/field-wrapper/hint.blade.php
index 5e1e2d6e65..4c89d73236 100644
--- a/packages/forms/resources/views/components/field-wrapper/hint.blade.php
+++ b/packages/forms/resources/views/components/field-wrapper/hint.blade.php
@@ -36,7 +36,7 @@
     @endif
 
     @if ($icon)
-        <x-dynamic-component :component="$icon" class="h-4 w-4" />
+        @svg($icon, 'h-4 w-4')
     @endif
 
     @if ($action && (! $action->isHidden()))
diff --git a/packages/forms/resources/views/components/key-value.blade.php b/packages/forms/resources/views/components/key-value.blade.php
index 54cf9f9760..4cb577bcd6 100644
--- a/packages/forms/resources/views/components/key-value.blade.php
+++ b/packages/forms/resources/views/components/key-value.blade.php
@@ -113,7 +113,7 @@
                                                 type="button"
                                                 class="text-gray-600 hover:text-gray-700"
                                             >
-                                                <x-heroicon-m-arrows-up-down class="w-4 h-4" />
+                                                @svg('heroicon-m-arrows-up-down', 'h-4 w-4')
 
                                                 <span class="sr-only">
                                                     {{ $getDeleteButtonLabel() }}
@@ -127,7 +127,7 @@
                                                 type="button"
                                                 class="text-danger-600 hover:text-danger-700"
                                             >
-                                                <x-heroicon-m-trash class="w-4 h-4" />
+                                                @svg('heroicon-m-trash', 'h-4 w-4')
 
                                                 <span class="sr-only">
                                                     {{ $getDeleteButtonLabel() }}
@@ -151,7 +151,7 @@
                         'dark:text-white dark:bg-gray-800/60 dark:hover:bg-gray-800/30' => config('forms.dark_mode'),
                     ])
                 >
-                    <x-heroicon-m-plus class="w-4 h-4" />
+                    @svg('heroicon-m-plus', 'h-4 w-4')
 
                     <span>
                         {{ $getAddButtonLabel() }}
diff --git a/packages/forms/resources/views/components/repeater.blade.php b/packages/forms/resources/views/components/repeater.blade.php
index 9b329b13ad..4829cbd0e4 100644
--- a/packages/forms/resources/views/components/repeater.blade.php
+++ b/packages/forms/resources/views/components/repeater.blade.php
@@ -117,7 +117,7 @@
                                                 {{ __('forms::components.repeater.buttons.move_item.label') }}
                                             </span>
 
-                                            <x-heroicon-m-arrows-up-down class="w-4 h-4"/>
+                                            @svg('heroicon-m-arrows-up-down', 'h-4 w-4')
                                         </button>
                                     @endunless
 
@@ -149,7 +149,7 @@
                                                         {{ __('forms::components.repeater.buttons.clone_item.label') }}
                                                     </span>
 
-                                                    <x-heroicon-m-square-2-stack class="w-4 h-4"/>
+                                                    @svg('heroicon-m-square-2-stack', 'h-4 w-4')
                                                 </button>
                                             </li>
                                         @endunless
@@ -169,7 +169,7 @@
                                                         {{ __('forms::components.repeater.buttons.delete_item.label') }}
                                                     </span>
 
-                                                    <x-heroicon-m-trash class="w-4 h-4"/>
+                                                    @svg('heroicon-m-trash', 'h-4 w-4')
                                                 </button>
                                             </li>
                                         @endunless
@@ -182,13 +182,24 @@
                                                     type="button"
                                                     class="flex items-center justify-center flex-none w-10 h-10 text-gray-400 transition hover:text-gray-500"
                                                 >
-                                                    <x-heroicon-m-minus class="w-4 h-4" x-show="! isCollapsed"/>
+                                                    @svg(
+                                                        'heroicon-m-minus',
+                                                        'h-4 w-4',
+                                                        ['x-show' => '! isCollapsed'],
+                                                    )
 
                                                     <span class="sr-only" x-show="! isCollapsed">
                                                         {{ __('forms::components.repeater.buttons.collapse_item.label') }}
                                                     </span>
 
-                                                    <x-heroicon-m-plus class="w-4 h-4" x-show="isCollapsed" x-cloak/>
+                                                    @svg(
+                                                        'heroicon-m-plus',
+                                                        'h-4 w-4',
+                                                        [
+                                                            'x-show' => 'isCollapsed',
+                                                            'x-cloak',
+                                                        ],
+                                                    )
 
                                                     <span class="sr-only" x-show="isCollapsed" x-cloak>
                                                         {{ __('forms::components.repeater.buttons.expand_item.label') }}
diff --git a/packages/forms/resources/views/components/section.blade.php b/packages/forms/resources/views/components/section.blade.php
index 8343d00fac..e3b5f18fa4 100644
--- a/packages/forms/resources/views/components/section.blade.php
+++ b/packages/forms/resources/views/components/section.blade.php
@@ -71,7 +71,7 @@
                     '-rotate-180' => ! $isCollapsed(),
                 ])
             >
-                <x-heroicon-m-chevron-down class="h-5 w-5" />
+                @svg('heroicon-m-chevron-down', 'h-5 w-5')
             </button>
         @endif
     </div>
diff --git a/packages/forms/resources/views/components/select.blade.php b/packages/forms/resources/views/components/select.blade.php
index b60672ee5d..cef523f521 100644
--- a/packages/forms/resources/views/components/select.blade.php
+++ b/packages/forms/resources/views/components/select.blade.php
@@ -25,7 +25,7 @@
         @endif
 
         @if ($icon = $getPrefixIcon())
-            <x-dynamic-component :component="$icon" class="w-5 h-5" />
+            @svg($icon, 'h-5 w-5')
         @endif
 
         @if ($label = $getPrefixLabel())
@@ -123,7 +123,7 @@
         @endif
 
         @if ($icon = $getSuffixIcon())
-            <x-dynamic-component :component="$icon" class="w-5 h-5" />
+            @svg($icon, 'h-5 w-5')
         @endif
 
         @if (($suffixAction = $getSuffixAction()) && (! $suffixAction->isHidden()))
diff --git a/packages/forms/resources/views/components/tabs.blade.php b/packages/forms/resources/views/components/tabs.blade.php
index 9133d2dfb6..d314bb621c 100644
--- a/packages/forms/resources/views/components/tabs.blade.php
+++ b/packages/forms/resources/views/components/tabs.blade.php
@@ -55,10 +55,7 @@
                 }"
             >
                 @if ($icon = $tab->getIcon())
-                    <x-dynamic-component
-                        :component="$icon"
-                        class="h-5 w-5"
-                    />
+                    @svg($icon, 'h-5 w-5')
                 @endif
 
                 <span>{{ $tab->getLabel() }}</span>
diff --git a/packages/forms/resources/views/components/tags-input.blade.php b/packages/forms/resources/views/components/tags-input.blade.php
index 6eb3526a3e..453a093a04 100644
--- a/packages/forms/resources/views/components/tags-input.blade.php
+++ b/packages/forms/resources/views/components/tags-input.blade.php
@@ -90,7 +90,7 @@
                             <span class="text-left" x-text="tag"></span>
 
                             @unless ($isDisabled())
-                                <x-heroicon-m-x-mark class="w-3 h-3 shrink-0" />
+                                @svg('heroicon-m-x-mark', 'h-3 w-3 shrink-0')
                             @endunless
                         </button>
                     </template>
diff --git a/packages/forms/resources/views/components/text-input.blade.php b/packages/forms/resources/views/components/text-input.blade.php
index e22e96d178..05c106576e 100644
--- a/packages/forms/resources/views/components/text-input.blade.php
+++ b/packages/forms/resources/views/components/text-input.blade.php
@@ -27,7 +27,7 @@
         @endif
 
         @if ($icon = $getPrefixIcon())
-            <x-dynamic-component :component="$icon" class="w-5 h-5" />
+            @svg($icon, 'h-5 w-5')
         @endif
 
         @if ($label = $getPrefixLabel())
@@ -89,7 +89,7 @@
         @endif
 
         @if ($icon = $getSuffixIcon())
-            <x-dynamic-component :component="$icon" class="w-5 h-5" />
+            @svg($icon, 'h-5 w-5')
         @endif
 
         @if (($suffixAction = $getSuffixAction()) && (! $suffixAction->isHidden()))
diff --git a/packages/forms/resources/views/components/toggle.blade.php b/packages/forms/resources/views/components/toggle.blade.php
index 8ba6434784..df25bb6f54 100644
--- a/packages/forms/resources/views/components/toggle.blade.php
+++ b/packages/forms/resources/views/components/toggle.blade.php
@@ -63,9 +63,9 @@
                         }"
                     >
                         @if ($hasOffIcon())
-                            <x-dynamic-component
-                                :component="$getOffIcon()"
-                                :class="\Illuminate\Support\Arr::toCssClasses([
+                            @svg(
+                                $getOffIcon(),
+                                \Illuminate\Support\Arr::toCssClasses([
                                     'h-3 w-3',
                                     match ($getOffColor()) {
                                         'danger' => 'text-danger-500',
@@ -74,8 +74,8 @@
                                         'warning' => 'text-warning-500',
                                         default => 'text-gray-400',
                                     },
-                                ])"
-                            />
+                                ]),
+                            )
                         @endif
                     </span>
 
@@ -88,10 +88,9 @@
                         }"
                     >
                         @if ($hasOnIcon())
-                            <x-dynamic-component
-                                :component="$getOnIcon()"
-                                x-cloak
-                                :class="\Illuminate\Support\Arr::toCssClasses([
+                            @svg(
+                                $getOnIcon(),
+                                \Illuminate\Support\Arr::toCssClasses([
                                     'h-3 w-3',
                                     match ($getOnColor()) {
                                         'danger' => 'text-danger-500',
@@ -100,8 +99,9 @@
                                         'warning' => 'text-warning-500',
                                         default => 'text-primary-500',
                                     },
-                                ])"
-                            />
+                                ]),
+                                ['x-cloak'],
+                            )
                         @endif
                     </span>
                 </span>
diff --git a/packages/forms/resources/views/components/wizard.blade.php b/packages/forms/resources/views/components/wizard.blade.php
index ae6211d310..6533073b62 100644
--- a/packages/forms/resources/views/components/wizard.blade.php
+++ b/packages/forms/resources/views/components/wizard.blade.php
@@ -126,23 +126,35 @@
                                 }"
                                 class="w-10 h-10 flex items-center justify-center rounded-full"
                             >
-                                <x-heroicon-m-check
-                                    x-show="getStepIndex(step) > {{ $loop->index }}"
-                                    x-cloak
-                                    class="w-5 h-5 text-white"
-                                />
+                                @svg(
+                                    'heroicon-m-check',
+                                    'h-5 w-5 text-white',
+                                    [
+                                        'x-show' => "getStepIndex(step) > {$loop->index}",
+                                        'x-cloak',
+                                    ],
+                                )
 
-                                @if ($step->getIcon())
-                                    <x-dynamic-component
-                                        :component="$step->getIcon()"
-                                        x-show="getStepIndex(step) <= {{ $loop->index }}"
-                                        x-cloak
-                                        x-bind:class="{
-                                            'text-gray-500 @if (config('forms.dark_mode')) dark:text-gray-400 @endif': getStepIndex(step) !== {{ $loop->index }},
-                                            'text-primary-500': getStepIndex(step) === {{ $loop->index }},
-                                        }"
-                                        class="w-5 h-5"
-                                    />
+                                @if ($icon = $step->getIcon())
+                                    @php
+                                        $inactiveIconClasses = \Illuminate\Support\Arr::toCssClasses([
+                                            'text-gray-500',
+                                            'dark:text-gray-400' => config('forms.dark_mode'),
+                                        ]);
+                                    @endphp
+
+                                    @svg(
+                                        $icon,
+                                        'h-5 w-5',
+                                        [
+                                            'x-show' => "getStepIndex(step) <= {$loop->index}",
+                                            'x-cloak',
+                                            'x-bind:class' => "{
+                                                '{$inactiveIconClasses}': getStepIndex(step) !== {$loop->index},
+                                                'text-primary-500': getStepIndex(step) === {$loop->index},
+                                            }",
+                                        ],
+                                    )
                                 @else
                                     <span
                                         x-show="getStepIndex(step) <= {{ $loop->index }}"
diff --git a/packages/notifications/resources/views/components/close-button.blade.php b/packages/notifications/resources/views/components/close-button.blade.php
index 23b56ec4b2..8c4600138c 100644
--- a/packages/notifications/resources/views/components/close-button.blade.php
+++ b/packages/notifications/resources/views/components/close-button.blade.php
@@ -1,4 +1,5 @@
-<x-heroicon-m-x-mark
-    class="filament-notifications-close-button h-4 w-4 cursor-pointer text-gray-400"
-    x-on:click="close"
-/>
+@svg(
+    'heroicon-m-x-mark',
+    'filament-notifications-close-button h-4 w-4 cursor-pointer text-gray-400',
+    ['x-on:click' => 'close']
+)
diff --git a/packages/notifications/resources/views/components/database/modal/empty-state.blade.php b/packages/notifications/resources/views/components/database/modal/empty-state.blade.php
index 903aefcc13..527ec97f43 100644
--- a/packages/notifications/resources/views/components/database/modal/empty-state.blade.php
+++ b/packages/notifications/resources/views/components/database/modal/empty-state.blade.php
@@ -6,7 +6,7 @@
         'flex items-center justify-center w-12 h-12 text-primary-500 rounded-full bg-primary-50',
         'dark:bg-gray-700' => config('notifications.dark_mode'),
     ])>
-        <x-heroicon-o-bell class="w-5 h-5" />
+        @svg('heroicon-o-bell', 'h-5 w-5')
     </div>
 
     <div class="max-w-md space-y-1">
diff --git a/packages/notifications/resources/views/components/icon.blade.php b/packages/notifications/resources/views/components/icon.blade.php
index a73a7acc19..25113141d1 100644
--- a/packages/notifications/resources/views/components/icon.blade.php
+++ b/packages/notifications/resources/views/components/icon.blade.php
@@ -3,9 +3,9 @@
     'color',
 ])
 
-<x-dynamic-component
-    :component="$icon"
-    :class="\Illuminate\Support\Arr::toCssClasses([
+@svg(
+    $icon,
+    \Illuminate\Support\Arr::toCssClasses([
         'filament-notifications-icon h-6 w-6',
         match ($color) {
             'success' => 'text-success-400',
@@ -14,5 +14,5 @@
             'primary' => 'text-primary-400',
             'secondary' => 'text-gray-400',
         },
-    ])"
-/>
+    ]),
+)
diff --git a/packages/support/resources/views/components/button.blade.php b/packages/support/resources/views/components/button.blade.php
index 8972448345..9abe77fcc1 100644
--- a/packages/support/resources/views/components/button.blade.php
+++ b/packages/support/resources/views/components/button.blade.php
@@ -103,12 +103,14 @@
     >
         @if ($iconPosition === 'before')
             @if ($icon)
-                <x-dynamic-component
-                    :component="$icon"
-                    :wire:loading.remove.delay="$hasLoadingIndicator"
-                    :wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
-                    :class="$iconClasses"
-                />
+                @svg(
+                    $icon,
+                    $iconClasses,
+                    [
+                        'wire:loading.remove.delay' => $hasLoadingIndicator,
+                        'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
+                    ],
+                )
             @endif
 
             @if ($hasLoadingIndicator)
@@ -149,12 +151,14 @@
 
         @if ($iconPosition === 'after')
             @if ($icon)
-                <x-dynamic-component
-                    :component="$icon"
-                    :wire:loading.remove.delay="$hasLoadingIndicator"
-                    :wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
-                    :class="$iconClasses"
-                />
+                @svg(
+                    $icon,
+                    $iconClasses,
+                    [
+                        'wire:loading.remove.delay' => $hasLoadingIndicator,
+                        'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
+                    ],
+                )
             @endif
 
             @if ($hasLoadingIndicator)
@@ -181,7 +185,7 @@
         {{ $attributes->class($buttonClasses) }}
     >
         @if ($icon && $iconPosition === 'before')
-            <x-dynamic-component :component="$icon" :class="$iconClasses" />
+            @svg($icon, $iconClasses)
         @endif
 
         <span @class([
@@ -191,7 +195,7 @@
         </span>
 
         @if ($icon && $iconPosition === 'after')
-            <x-dynamic-component :component="$icon" :class="$iconClasses" />
+            @svg($icon, $iconClasses)
         @endif
     </a>
 @endif
diff --git a/packages/support/resources/views/components/dropdown/header.blade.php b/packages/support/resources/views/components/dropdown/header.blade.php
index 1b037bcb7d..d77f079f3a 100644
--- a/packages/support/resources/views/components/dropdown/header.blade.php
+++ b/packages/support/resources/views/components/dropdown/header.blade.php
@@ -23,7 +23,7 @@
 @if ($tag === 'div')
     <div {{ $attributes->class([$headerClasses]) }}>
         @if ($icon)
-            <x-dynamic-component :component="$icon" :class="$iconClasses" />
+            @svg($icon, $iconClasses)
         @endif
 
         <span class="{{ $labelClasses }}">
@@ -33,7 +33,7 @@
 @elseif ($tag === 'a')
     <a {{ $attributes->class([$headerClasses]) }}>
         @if ($icon)
-            <x-dynamic-component :component="$icon" :class="$iconClasses" />
+            @svg($icon, $iconClasses)
         @endif
 
         <span class="{{ $labelClasses }}">
diff --git a/packages/support/resources/views/components/dropdown/list/item.blade.php b/packages/support/resources/views/components/dropdown/list/item.blade.php
index 95bd39e3f6..f1a1a8f998 100644
--- a/packages/support/resources/views/components/dropdown/list/item.blade.php
+++ b/packages/support/resources/views/components/dropdown/list/item.blade.php
@@ -56,12 +56,14 @@
         {{ $attributes->class([$buttonClasses]) }}
     >
         @if ($icon)
-            <x-dynamic-component
-                :component="$icon"
-                :wire:loading.remove.delay="$hasLoadingIndicator"
-                :wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
-                :class="$iconClasses"
-            />
+            @svg(
+                $icon,
+                $iconClasses,
+                [
+                    'wire:loading.remove.delay' => $hasLoadingIndicator,
+                    'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
+                ],
+            )
         @endif
 
         @if ($hasLoadingIndicator)
@@ -86,7 +88,7 @@
 @elseif ($tag === 'a')
     <a {{ $attributes->class([$buttonClasses]) }}>
         @if ($icon)
-            <x-dynamic-component :component="$icon" :class="$iconClasses" />
+            @svg($icon, $iconClasses)
         @endif
 
         <span class="{{ $labelClasses }}">
@@ -108,7 +110,7 @@
             {{ $attributes->except(['action', 'class', 'method', 'wire:submit.prevent'])->class([$buttonClasses]) }}
         >
             @if ($icon)
-                <x-dynamic-component :component="$icon" :class="$iconClasses" />
+                @svg($icon, $iconClasses)
             @endif
 
             <span class="{{ $labelClasses }}">
diff --git a/packages/support/resources/views/components/icon-button.blade.php b/packages/support/resources/views/components/icon-button.blade.php
index 2cc0658a32..a0e369d853 100644
--- a/packages/support/resources/views/components/icon-button.blade.php
+++ b/packages/support/resources/views/components/icon-button.blade.php
@@ -77,12 +77,14 @@
             </span>
         @endif
 
-        <x-dynamic-component
-            :component="$icon"
-            :wire:loading.remove.delay="$hasLoadingIndicator"
-            :wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
-            :class="$iconClasses"
-        />
+        @svg(
+            $icon,
+            $iconClasses,
+            [
+                'wire:loading.remove.delay' => $hasLoadingIndicator,
+                'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
+            ],
+        )
 
         @if ($hasLoadingIndicator)
             <x-filament-support::loading-indicator
@@ -121,7 +123,7 @@
             </span>
         @endif
 
-        <x-dynamic-component :component="$icon" :class="$iconClasses" />
+        @svg($icon, $iconClasses)
 
         @if ($indicator)
             <span class="{{ $indicatorClasses }}">
diff --git a/packages/support/resources/views/components/link.blade.php b/packages/support/resources/views/components/link.blade.php
index 46130ec028..04dc8984de 100644
--- a/packages/support/resources/views/components/link.blade.php
+++ b/packages/support/resources/views/components/link.blade.php
@@ -60,13 +60,13 @@
         {{ $attributes->class($linkClasses) }}
     >
         @if ($icon && $iconPosition === 'before')
-            <x-dynamic-component :component="$icon" :class="$iconClasses"/>
+            @svg($icon, $iconClasses)
         @endif
 
         {{ $slot }}
 
         @if ($icon && $iconPosition === 'after')
-            <x-dynamic-component :component="$icon" :class="$iconClasses" />
+            @svg($icon, $iconClasses)
         @endif
     </a>
 @elseif ($tag === 'button')
@@ -86,12 +86,14 @@
     >
         @if ($iconPosition === 'before')
             @if ($icon)
-                <x-dynamic-component
-                    :component="$icon"
-                    :wire:loading.remove.delay="$hasLoadingIndicator"
-                    :wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
-                    :class="$iconClasses"
-                />
+                @svg(
+                    $icon,
+                    $iconClasses,
+                    [
+                        'wire:loading.remove.delay' => $hasLoadingIndicator,
+                        'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
+                    ],
+                )
             @endif
 
             @if ($hasLoadingIndicator)
@@ -108,12 +110,14 @@
 
         @if ($iconPosition === 'after')
             @if ($icon)
-                <x-dynamic-component
-                    :component="$icon"
-                    :wire:loading.remove.delay="$hasLoadingIndicator"
-                    :wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
-                    :class="$iconClasses"
-                />
+                @svg(
+                    $icon,
+                    $iconClasses,
+                    [
+                        'wire:loading.remove.delay' => $hasLoadingIndicator,
+                        'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
+                    ],
+                )
             @endif
 
             @if ($hasLoadingIndicator)
diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php
index 925879bbb2..636e56c6f1 100644
--- a/packages/support/resources/views/components/modal/index.blade.php
+++ b/packages/support/resources/views/components/modal/index.blade.php
@@ -121,12 +121,15 @@
                         type="button"
                         class="absolute top-2 right-2 rtl:right-auto rtl:left-2"
                     >
-                        <x-heroicon-m-x-mark
-                            class="filament-modal-close-button h-4 w-4 cursor-pointer text-gray-400"
-                            title="__('filament-support::components/modal.actions.close.label')"
-                            x-on:click="isOpen = false"
-                            tabindex="-1"
-                        />
+                        @svg(
+                            'heroicon-m-x-mark',
+                            'filament-modal-close-button h-4 w-4 cursor-pointer text-gray-400',
+                            [
+                                'title' => __('filament-support::components/modal.actions.close.label'),
+                                'x-on:click' => 'isOpen = false',
+                                'tabindex' => -1,
+                            ],
+                        )
 
                         <span class="sr-only">
                             {{ __('filament-support::components/modal.actions.close.label') }}
diff --git a/packages/tables/resources/views/columns/badge-column.blade.php b/packages/tables/resources/views/columns/badge-column.blade.php
index 107ee9e67d..27bf4298da 100644
--- a/packages/tables/resources/views/columns/badge-column.blade.php
+++ b/packages/tables/resources/views/columns/badge-column.blade.php
@@ -32,7 +32,7 @@
             $colorClasses,
         ])>
             @if ($icon && $iconPosition === 'before')
-                <x-dynamic-component :component="$icon" :class="$iconClasses" />
+                @svg($icon, $iconClasses)
             @endif
 
             <span>
@@ -40,7 +40,7 @@
             </span>
 
             @if ($icon && $iconPosition === 'after')
-                <x-dynamic-component :component="$icon" :class="$iconClasses" />
+                @svg($icon, $iconClasses)
             @endif
         </div>
     @endif
diff --git a/packages/tables/resources/views/columns/icon-column.blade.php b/packages/tables/resources/views/columns/icon-column.blade.php
index df4363961c..6fcfbd339d 100644
--- a/packages/tables/resources/views/columns/icon-column.blade.php
+++ b/packages/tables/resources/views/columns/icon-column.blade.php
@@ -15,9 +15,9 @@
     }}
 >
     @if ($icon)
-        <x-dynamic-component
-            :component="$icon"
-            :class="\Illuminate\Support\Arr::toCssClasses([
+        @svg(
+            $icon,
+            \Illuminate\Support\Arr::toCssClasses([
                 match ($color) {
                     'danger' => 'text-danger-500',
                     'primary' => 'text-primary-500',
@@ -34,7 +34,7 @@
                     'xl' => 'h-7 w-7',
                     default => $size,
                 },
-            ])"
-        />
+            ]),
+        )
     @endif
 </div>
diff --git a/packages/tables/resources/views/columns/text-column.blade.php b/packages/tables/resources/views/columns/text-column.blade.php
index e2da43aa35..5b2e3bb631 100644
--- a/packages/tables/resources/views/columns/text-column.blade.php
+++ b/packages/tables/resources/views/columns/text-column.blade.php
@@ -51,7 +51,7 @@
 
     <div class="inline-flex items-center space-x-1 rtl:space-x-reverse">
         @if ($icon && $iconPosition === 'before')
-            <x-dynamic-component :component="$icon" :class="$iconClasses" />
+            @svg($icon, $iconClasses)
         @endif
 
         <span>
@@ -59,7 +59,7 @@
         </span>
 
         @if ($icon && $iconPosition === 'after')
-            <x-dynamic-component :component="$icon" :class="$iconClasses" />
+            @svg($icon, $iconClasses)
         @endif
     </div>
 
diff --git a/packages/tables/resources/views/columns/toggle-column.blade.php b/packages/tables/resources/views/columns/toggle-column.blade.php
index 84c040d68a..27e7e408d2 100644
--- a/packages/tables/resources/views/columns/toggle-column.blade.php
+++ b/packages/tables/resources/views/columns/toggle-column.blade.php
@@ -54,9 +54,9 @@
                 }"
             >
                 @if ($hasOffIcon())
-                    <x-dynamic-component
-                        :component="$getOffIcon()"
-                        :class="\Illuminate\Support\Arr::toCssClasses([
+                    @svg(
+                        $getOffIcon(),
+                        \Illuminate\Support\Arr::toCssClasses([
                             'h-3 w-3',
                             match ($getOffColor()) {
                                 'danger' => 'text-danger-500',
@@ -65,8 +65,8 @@
                                 'warning' => 'text-warning-500',
                                 default => 'text-gray-400',
                             },
-                        ])"
-                    />
+                        ]),
+                    )
                 @endif
             </span>
 
@@ -79,10 +79,9 @@
                 }"
             >
                 @if ($hasOnIcon())
-                    <x-dynamic-component
-                        :component="$getOnIcon()"
-                        x-cloak
-                        :class="\Illuminate\Support\Arr::toCssClasses([
+                    @svg(
+                        $getOnIcon(),
+                        \Illuminate\Support\Arr::toCssClasses([
                             'h-3 w-3',
                             match ($getOnColor()) {
                                 'danger' => 'text-danger-500',
@@ -91,8 +90,9 @@
                                 'warning' => 'text-warning-500',
                                 default => 'text-primary-500',
                             },
-                        ])"
-                    />
+                        ]),
+                        ['x-cloak'],
+                    )
                 @endif
             </span>
         </span>
diff --git a/packages/tables/resources/views/components/empty-state/index.blade.php b/packages/tables/resources/views/components/empty-state/index.blade.php
index 27f1bfb07e..c1bfd37f0d 100644
--- a/packages/tables/resources/views/components/empty-state/index.blade.php
+++ b/packages/tables/resources/views/components/empty-state/index.blade.php
@@ -13,12 +13,14 @@
         'flex items-center justify-center w-16 h-16 text-primary-500 rounded-full bg-primary-50',
         'dark:bg-gray-700' => config('tables.dark_mode'),
     ])>
-        <x-dynamic-component
-            :component="$icon"
-            class="w-6 h-6"
-            wire:loading.remove.delay
-            wire:target="{{ implode(',', \Filament\Tables\Table::LOADING_TARGETS) }}"
-        />
+        @svg(
+            $icon,
+            'h-6 w-6',
+            [
+                'wire:loading.remove.delay',
+                'wire:target' => implode(',', \Filament\Tables\Table::LOADING_TARGETS),
+            ],
+        )
 
         <x-filament-support::loading-indicator
             class="w-6 h-6"
diff --git a/packages/tables/resources/views/components/filters/indicators.blade.php b/packages/tables/resources/views/components/filters/indicators.blade.php
index 005695318a..f926c9e1f3 100644
--- a/packages/tables/resources/views/components/filters/indicators.blade.php
+++ b/packages/tables/resources/views/components/filters/indicators.blade.php
@@ -29,7 +29,7 @@
                             type="button"
                             class="ml-1 -mr-2 rtl:mr-1 rtl:-ml-2 p-1 -my-1 hover:bg-gray-500/10 rounded-full"
                         >
-                            <x-heroicon-m-x-mark class="w-3 h-3" />
+                            @svg('heroicon-m-x-mark', 'h-3 w-3')
 
                             <span class="sr-only">
                                 {{ __('tables::table.filters.buttons.remove.label') }}
@@ -50,12 +50,15 @@
                 ])
             >
                 <div class="w-5 h-5 flex items-center justify-center">
-                    <x-heroicon-m-x-mark
-                        :x-tooltip.raw="__('tables::table.filters.buttons.remove_all.tooltip')"
-                        wire:loading.remove.delay
-                        wire:target="removeTableFilters,removeTableFilter"
-                        class="w-5 h-5"
-                    />
+                    @svg(
+                        'heroicon-m-x-mark',
+                        'h-5 w-5',
+                        [
+                            'x-tooltip.raw' => __('tables::table.filters.buttons.remove_all.tooltip'),
+                            'wire:loading.remove.delay',
+                            'wire:target' => 'removeTableFilters,removeTableFilter',
+                        ],
+                    )
 
                     <x-filament-support::loading-indicator
                         wire:loading.delay
diff --git a/packages/tables/resources/views/components/header-cell.blade.php b/packages/tables/resources/views/components/header-cell.blade.php
index 2085c4e135..c7ff380562 100644
--- a/packages/tables/resources/views/components/header-cell.blade.php
+++ b/packages/tables/resources/views/components/header-cell.blade.php
@@ -30,14 +30,14 @@
         </span>
 
         @if ($sortable)
-            <x-dynamic-component
-                :component="$isSortColumn && $sortDirection === 'asc' ? 'heroicon-m-chevron-up' : 'heroicon-m-chevron-down'"
-                :class="\Illuminate\Support\Arr::toCssClasses([
+            @svg(
+                $isSortColumn && $sortDirection === 'asc' ? 'heroicon-m-chevron-up' : 'heroicon-m-chevron-down',
+                \Illuminate\Support\Arr::toCssClasses([
                     'filament-tables-header-cell-sort-icon h-3 w-3',
                     'dark:text-gray-300' => config('tables.dark_mode'),
                     'opacity-25' => ! $isSortColumn,
-                ])"
-            />
+                ]),
+            )
         @endif
     </button>
 </th>
diff --git a/packages/tables/resources/views/components/pagination/item.blade.php b/packages/tables/resources/views/components/pagination/item.blade.php
index 1722e204cf..f4edafbc1b 100644
--- a/packages/tables/resources/views/components/pagination/item.blade.php
+++ b/packages/tables/resources/views/components/pagination/item.blade.php
@@ -23,7 +23,7 @@
         ]) }}
     >
         @if ($icon)
-            <x-dynamic-component :component="$icon" class="w-5 h-5 rtl:scale-x-[-1]" />
+            @svg($icon, 'h-5 w-5 rtl:-scale-x-100')
         @endif
 
         <span>{{ $label ?? ($separator ? '...' : '') }}</span>
diff --git a/packages/tables/resources/views/components/reorder/handle.blade.php b/packages/tables/resources/views/components/reorder/handle.blade.php
index 34f2916300..8e9bb3804d 100644
--- a/packages/tables/resources/views/components/reorder/handle.blade.php
+++ b/packages/tables/resources/views/components/reorder/handle.blade.php
@@ -5,5 +5,5 @@
         'dark:text-gray-400 dark:group-hover:text-primary-400' => config('tables.dark_mode'),
     ]) }}
 >
-    <x-heroicon-o-bars-3 class="block h-4 w-4" />
+    @svg('heroicon-o-bars-3', 'block h-4 w-4')
 </button>
diff --git a/packages/tables/resources/views/components/search-input.blade.php b/packages/tables/resources/views/components/search-input.blade.php
index 685ea45747..4d373750a9 100644
--- a/packages/tables/resources/views/components/search-input.blade.php
+++ b/packages/tables/resources/views/components/search-input.blade.php
@@ -9,7 +9,7 @@
 
     <div class="relative group">
         <span class="absolute inset-y-0 left-0 flex items-center justify-center w-9 h-9 text-gray-400 pointer-events-none group-focus-within:text-primary-500">
-            <x-heroicon-m-magnifying-glass class="w-5 h-5" />
+            @svg('heroicon-m-magnifying-glass', 'h-5 w-5')
         </span>
 
         <input