diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
index 5d6f19b..7b63498 100644
--- a/src/components/Radio.tsx
+++ b/src/components/Radio.tsx
@@ -9,6 +9,7 @@ import {
   ParentProps,
   Show,
 } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
 
 interface RadioProps {
   name?: string;
@@ -17,6 +18,11 @@ interface RadioProps {
   onChange?: (value?: boolean) => void;
 }
 
+const RadioIcon = [
+  () => <Icon icon="hugeicons:circle" class="text-[14px] stroke-1" />,
+  () => <Icon icon="hugeicons:checkmark-circle-03" class="text-[14px] stroke-1 text-primary" />,
+];
+
 const Radio: ParentComponent<RadioProps> = (props) => {
   const mProps = mergeProps<ParentProps<RadioProps>[]>(
     {
@@ -44,11 +50,7 @@ const Radio: ParentComponent<RadioProps> = (props) => {
 
   return (
     <div class="flex flex-row items-center gap-2 cursor-pointer" onClick={handleClick}>
-      <Icon
-        icon={internalChecked() ? 'hugeicons:checkmark-circle-03' : 'hugeicons:circle'}
-        class="text-[14px] stroke-1"
-        classList={{ 'text-primary': internalChecked() }}
-      />
+      <Dynamic component={RadioIcon[internalChecked() ? 1 : 0]} />
       <div>{mProps.children}</div>
       <Show when={isNotNil(mProps.name)}>
         <input type="hidden" name={mProps.name} value={internalChecked()} />