diff --git a/src/lib/AcademicCap.svelte b/src/lib/AcademicCap.svelte
index 66080367..21668f44 100644
--- a/src/lib/AcademicCap.svelte
+++ b/src/lib/AcademicCap.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/AdjustmentsHorizontal.svelte b/src/lib/AdjustmentsHorizontal.svelte
index 4880cf20..5c3fc96a 100644
--- a/src/lib/AdjustmentsHorizontal.svelte
+++ b/src/lib/AdjustmentsHorizontal.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -166,7 +163,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/AdjustmentsVertical.svelte b/src/lib/AdjustmentsVertical.svelte
index 4d0d86ce..03dfc605 100644
--- a/src/lib/AdjustmentsVertical.svelte
+++ b/src/lib/AdjustmentsVertical.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -166,7 +163,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArchiveBox.svelte b/src/lib/ArchiveBox.svelte
index 036f4491..9d793698 100644
--- a/src/lib/ArchiveBox.svelte
+++ b/src/lib/ArchiveBox.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArchiveBoxArrowDown.svelte b/src/lib/ArchiveBoxArrowDown.svelte
index 542e76cd..c9d382a8 100644
--- a/src/lib/ArchiveBoxArrowDown.svelte
+++ b/src/lib/ArchiveBoxArrowDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArchiveBoxXMark.svelte b/src/lib/ArchiveBoxXMark.svelte
index aace2b00..52a5088c 100644
--- a/src/lib/ArchiveBoxXMark.svelte
+++ b/src/lib/ArchiveBoxXMark.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowDown.svelte b/src/lib/ArrowDown.svelte
index f980afb0..2b476302 100644
--- a/src/lib/ArrowDown.svelte
+++ b/src/lib/ArrowDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowDownCircle.svelte b/src/lib/ArrowDownCircle.svelte
index b74d8b67..eeac0e32 100644
--- a/src/lib/ArrowDownCircle.svelte
+++ b/src/lib/ArrowDownCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowDownLeft.svelte b/src/lib/ArrowDownLeft.svelte
index 63287aa4..d7cae945 100644
--- a/src/lib/ArrowDownLeft.svelte
+++ b/src/lib/ArrowDownLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowDownOnSquare.svelte b/src/lib/ArrowDownOnSquare.svelte
index 26faa8b0..cc519607 100644
--- a/src/lib/ArrowDownOnSquare.svelte
+++ b/src/lib/ArrowDownOnSquare.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -90,7 +87,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowDownOnSquareStack.svelte b/src/lib/ArrowDownOnSquareStack.svelte
index e45e5af0..8d74c5be 100644
--- a/src/lib/ArrowDownOnSquareStack.svelte
+++ b/src/lib/ArrowDownOnSquareStack.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -98,7 +95,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowDownRight.svelte b/src/lib/ArrowDownRight.svelte
index 7b5ca0b7..3f153832 100644
--- a/src/lib/ArrowDownRight.svelte
+++ b/src/lib/ArrowDownRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowDownTray.svelte b/src/lib/ArrowDownTray.svelte
index 885a1ea3..e14de00c 100644
--- a/src/lib/ArrowDownTray.svelte
+++ b/src/lib/ArrowDownTray.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLeft.svelte b/src/lib/ArrowLeft.svelte
index 6d67a995..7c753fea 100644
--- a/src/lib/ArrowLeft.svelte
+++ b/src/lib/ArrowLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLeftCircle.svelte b/src/lib/ArrowLeftCircle.svelte
index 92fa5dda..328599e3 100644
--- a/src/lib/ArrowLeftCircle.svelte
+++ b/src/lib/ArrowLeftCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -93,7 +90,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLeftEndOnRectangle.svelte b/src/lib/ArrowLeftEndOnRectangle.svelte
index df334a3b..566a7e72 100644
--- a/src/lib/ArrowLeftEndOnRectangle.svelte
+++ b/src/lib/ArrowLeftEndOnRectangle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLeftOnRectangle.svelte b/src/lib/ArrowLeftOnRectangle.svelte
index 28f79dc4..c709a5c9 100644
--- a/src/lib/ArrowLeftOnRectangle.svelte
+++ b/src/lib/ArrowLeftOnRectangle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -89,7 +86,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLeftStartOnRectangle.svelte b/src/lib/ArrowLeftStartOnRectangle.svelte
index f87cbaa9..9aaaa4d3 100644
--- a/src/lib/ArrowLeftStartOnRectangle.svelte
+++ b/src/lib/ArrowLeftStartOnRectangle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLongDown.svelte b/src/lib/ArrowLongDown.svelte
index 1d83c95a..862a8657 100644
--- a/src/lib/ArrowLongDown.svelte
+++ b/src/lib/ArrowLongDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLongLeft.svelte b/src/lib/ArrowLongLeft.svelte
index 51a52525..5c32c127 100644
--- a/src/lib/ArrowLongLeft.svelte
+++ b/src/lib/ArrowLongLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLongRight.svelte b/src/lib/ArrowLongRight.svelte
index 2d422c3b..9347d587 100644
--- a/src/lib/ArrowLongRight.svelte
+++ b/src/lib/ArrowLongRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowLongUp.svelte b/src/lib/ArrowLongUp.svelte
index 9797c290..10a6927d 100644
--- a/src/lib/ArrowLongUp.svelte
+++ b/src/lib/ArrowLongUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowPath.svelte b/src/lib/ArrowPath.svelte
index 34218230..c36401c5 100644
--- a/src/lib/ArrowPath.svelte
+++ b/src/lib/ArrowPath.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowPathRoundedSquare.svelte b/src/lib/ArrowPathRoundedSquare.svelte
index 91c8477e..fabc084a 100644
--- a/src/lib/ArrowPathRoundedSquare.svelte
+++ b/src/lib/ArrowPathRoundedSquare.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowRight.svelte b/src/lib/ArrowRight.svelte
index 6d5bb8c5..7d2db895 100644
--- a/src/lib/ArrowRight.svelte
+++ b/src/lib/ArrowRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowRightCircle.svelte b/src/lib/ArrowRightCircle.svelte
index 7d76d62d..c7bdf439 100644
--- a/src/lib/ArrowRightCircle.svelte
+++ b/src/lib/ArrowRightCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowRightEndOnRectangle.svelte b/src/lib/ArrowRightEndOnRectangle.svelte
index 30a40679..6e92d12f 100644
--- a/src/lib/ArrowRightEndOnRectangle.svelte
+++ b/src/lib/ArrowRightEndOnRectangle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowRightOnRectangle.svelte b/src/lib/ArrowRightOnRectangle.svelte
index b667b6cc..1704b721 100644
--- a/src/lib/ArrowRightOnRectangle.svelte
+++ b/src/lib/ArrowRightOnRectangle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -89,7 +86,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowRightStartOnRectangle.svelte b/src/lib/ArrowRightStartOnRectangle.svelte
index 7a328beb..e3e0140d 100644
--- a/src/lib/ArrowRightStartOnRectangle.svelte
+++ b/src/lib/ArrowRightStartOnRectangle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowSmallDown.svelte b/src/lib/ArrowSmallDown.svelte
index 414fabe8..1a74ccb2 100644
--- a/src/lib/ArrowSmallDown.svelte
+++ b/src/lib/ArrowSmallDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -83,7 +80,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowSmallLeft.svelte b/src/lib/ArrowSmallLeft.svelte
index 03deda90..c601e071 100644
--- a/src/lib/ArrowSmallLeft.svelte
+++ b/src/lib/ArrowSmallLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -83,7 +80,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowSmallRight.svelte b/src/lib/ArrowSmallRight.svelte
index dfd20c6a..e2ce6dd3 100644
--- a/src/lib/ArrowSmallRight.svelte
+++ b/src/lib/ArrowSmallRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -83,7 +80,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowSmallUp.svelte b/src/lib/ArrowSmallUp.svelte
index a284d563..ea151599 100644
--- a/src/lib/ArrowSmallUp.svelte
+++ b/src/lib/ArrowSmallUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -83,7 +80,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTopRightOnSquare.svelte b/src/lib/ArrowTopRightOnSquare.svelte
index c2b16c8a..2696aecb 100644
--- a/src/lib/ArrowTopRightOnSquare.svelte
+++ b/src/lib/ArrowTopRightOnSquare.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTrendingDown.svelte b/src/lib/ArrowTrendingDown.svelte
index ee881503..dc770759 100644
--- a/src/lib/ArrowTrendingDown.svelte
+++ b/src/lib/ArrowTrendingDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTrendingUp.svelte b/src/lib/ArrowTrendingUp.svelte
index 71d28261..4984af93 100644
--- a/src/lib/ArrowTrendingUp.svelte
+++ b/src/lib/ArrowTrendingUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTurnDownLeft.svelte b/src/lib/ArrowTurnDownLeft.svelte
index 5614e86c..3f909050 100644
--- a/src/lib/ArrowTurnDownLeft.svelte
+++ b/src/lib/ArrowTurnDownLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTurnDownRight.svelte b/src/lib/ArrowTurnDownRight.svelte
index 56d46b53..6ff05dc2 100644
--- a/src/lib/ArrowTurnDownRight.svelte
+++ b/src/lib/ArrowTurnDownRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTurnLeftDown.svelte b/src/lib/ArrowTurnLeftDown.svelte
index 3c004234..0246c513 100644
--- a/src/lib/ArrowTurnLeftDown.svelte
+++ b/src/lib/ArrowTurnLeftDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTurnLeftUp.svelte b/src/lib/ArrowTurnLeftUp.svelte
index d9b809bd..77729087 100644
--- a/src/lib/ArrowTurnLeftUp.svelte
+++ b/src/lib/ArrowTurnLeftUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTurnRightDown.svelte b/src/lib/ArrowTurnRightDown.svelte
index 29cc178f..a091d5af 100644
--- a/src/lib/ArrowTurnRightDown.svelte
+++ b/src/lib/ArrowTurnRightDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTurnRightUp.svelte b/src/lib/ArrowTurnRightUp.svelte
index e0765d15..1d538bb5 100644
--- a/src/lib/ArrowTurnRightUp.svelte
+++ b/src/lib/ArrowTurnRightUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTurnUpLeft.svelte b/src/lib/ArrowTurnUpLeft.svelte
index f6b2bff4..6c1928f1 100644
--- a/src/lib/ArrowTurnUpLeft.svelte
+++ b/src/lib/ArrowTurnUpLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowTurnUpRight.svelte b/src/lib/ArrowTurnUpRight.svelte
index 34ba5323..3a42c892 100644
--- a/src/lib/ArrowTurnUpRight.svelte
+++ b/src/lib/ArrowTurnUpRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUp.svelte b/src/lib/ArrowUp.svelte
index dd427dcb..8bb70b9a 100644
--- a/src/lib/ArrowUp.svelte
+++ b/src/lib/ArrowUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUpCircle.svelte b/src/lib/ArrowUpCircle.svelte
index 8bc30285..01570eb8 100644
--- a/src/lib/ArrowUpCircle.svelte
+++ b/src/lib/ArrowUpCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUpLeft.svelte b/src/lib/ArrowUpLeft.svelte
index 57bfcbce..02a2596a 100644
--- a/src/lib/ArrowUpLeft.svelte
+++ b/src/lib/ArrowUpLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUpOnSquare.svelte b/src/lib/ArrowUpOnSquare.svelte
index 2ea521b3..cab3c0b6 100644
--- a/src/lib/ArrowUpOnSquare.svelte
+++ b/src/lib/ArrowUpOnSquare.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUpOnSquareStack.svelte b/src/lib/ArrowUpOnSquareStack.svelte
index 6b0b9c69..45354638 100644
--- a/src/lib/ArrowUpOnSquareStack.svelte
+++ b/src/lib/ArrowUpOnSquareStack.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUpRight.svelte b/src/lib/ArrowUpRight.svelte
index 2e8faba7..f45c1ab7 100644
--- a/src/lib/ArrowUpRight.svelte
+++ b/src/lib/ArrowUpRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUpTray.svelte b/src/lib/ArrowUpTray.svelte
index 91f74b1e..9e861f98 100644
--- a/src/lib/ArrowUpTray.svelte
+++ b/src/lib/ArrowUpTray.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUturnDown.svelte b/src/lib/ArrowUturnDown.svelte
index 76579cc0..fdea79ba 100644
--- a/src/lib/ArrowUturnDown.svelte
+++ b/src/lib/ArrowUturnDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUturnLeft.svelte b/src/lib/ArrowUturnLeft.svelte
index f38bbbc3..a4033a38 100644
--- a/src/lib/ArrowUturnLeft.svelte
+++ b/src/lib/ArrowUturnLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUturnRight.svelte b/src/lib/ArrowUturnRight.svelte
index 6e5a19bb..da8697a4 100644
--- a/src/lib/ArrowUturnRight.svelte
+++ b/src/lib/ArrowUturnRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowUturnUp.svelte b/src/lib/ArrowUturnUp.svelte
index c5fe4da5..6ed5e9dc 100644
--- a/src/lib/ArrowUturnUp.svelte
+++ b/src/lib/ArrowUturnUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowsPointingIn.svelte b/src/lib/ArrowsPointingIn.svelte
index 18198881..e3d498e8 100644
--- a/src/lib/ArrowsPointingIn.svelte
+++ b/src/lib/ArrowsPointingIn.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -98,7 +95,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowsPointingOut.svelte b/src/lib/ArrowsPointingOut.svelte
index 352dc59d..370332ea 100644
--- a/src/lib/ArrowsPointingOut.svelte
+++ b/src/lib/ArrowsPointingOut.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -116,7 +113,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowsRightLeft.svelte b/src/lib/ArrowsRightLeft.svelte
index 19342638..2afc4c5a 100644
--- a/src/lib/ArrowsRightLeft.svelte
+++ b/src/lib/ArrowsRightLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ArrowsUpDown.svelte b/src/lib/ArrowsUpDown.svelte
index d3b9ce7a..bb9b2929 100644
--- a/src/lib/ArrowsUpDown.svelte
+++ b/src/lib/ArrowsUpDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/AtSymbol.svelte b/src/lib/AtSymbol.svelte
index 1da5bc0c..862d4cc8 100644
--- a/src/lib/AtSymbol.svelte
+++ b/src/lib/AtSymbol.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Backspace.svelte b/src/lib/Backspace.svelte
index 7fd82781..9d57a3d5 100644
--- a/src/lib/Backspace.svelte
+++ b/src/lib/Backspace.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Backward.svelte b/src/lib/Backward.svelte
index 6e66a2f9..c70b0a4c 100644
--- a/src/lib/Backward.svelte
+++ b/src/lib/Backward.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -89,7 +86,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Banknotes.svelte b/src/lib/Banknotes.svelte
index 908d6614..849cd3f6 100644
--- a/src/lib/Banknotes.svelte
+++ b/src/lib/Banknotes.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bars2.svelte b/src/lib/Bars2.svelte
index 5fa48500..a92c4255 100644
--- a/src/lib/Bars2.svelte
+++ b/src/lib/Bars2.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bars3.svelte b/src/lib/Bars3.svelte
index 9cdfc32b..63115b13 100644
--- a/src/lib/Bars3.svelte
+++ b/src/lib/Bars3.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bars3BottomLeft.svelte b/src/lib/Bars3BottomLeft.svelte
index 7a469400..ca58416f 100644
--- a/src/lib/Bars3BottomLeft.svelte
+++ b/src/lib/Bars3BottomLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bars3BottomRight.svelte b/src/lib/Bars3BottomRight.svelte
index 32d40659..2e436643 100644
--- a/src/lib/Bars3BottomRight.svelte
+++ b/src/lib/Bars3BottomRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bars3CenterLeft.svelte b/src/lib/Bars3CenterLeft.svelte
index 9a093d70..05acffbe 100644
--- a/src/lib/Bars3CenterLeft.svelte
+++ b/src/lib/Bars3CenterLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bars4.svelte b/src/lib/Bars4.svelte
index 6c75e80f..0335a056 100644
--- a/src/lib/Bars4.svelte
+++ b/src/lib/Bars4.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BarsArrowDown.svelte b/src/lib/BarsArrowDown.svelte
index f131923b..ed32a4b5 100644
--- a/src/lib/BarsArrowDown.svelte
+++ b/src/lib/BarsArrowDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BarsArrowUp.svelte b/src/lib/BarsArrowUp.svelte
index 3be12ab7..15b12690 100644
--- a/src/lib/BarsArrowUp.svelte
+++ b/src/lib/BarsArrowUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Battery0.svelte b/src/lib/Battery0.svelte
index d58cac34..76b19c50 100644
--- a/src/lib/Battery0.svelte
+++ b/src/lib/Battery0.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Battery100.svelte b/src/lib/Battery100.svelte
index 4a5fee28..b32da164 100644
--- a/src/lib/Battery100.svelte
+++ b/src/lib/Battery100.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Battery50.svelte b/src/lib/Battery50.svelte
index 1c35abc3..ddd97594 100644
--- a/src/lib/Battery50.svelte
+++ b/src/lib/Battery50.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Beaker.svelte b/src/lib/Beaker.svelte
index 63d91bff..30330dc8 100644
--- a/src/lib/Beaker.svelte
+++ b/src/lib/Beaker.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bell.svelte b/src/lib/Bell.svelte
index c4ab961c..56804c5e 100644
--- a/src/lib/Bell.svelte
+++ b/src/lib/Bell.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BellAlert.svelte b/src/lib/BellAlert.svelte
index 86944954..4c17991e 100644
--- a/src/lib/BellAlert.svelte
+++ b/src/lib/BellAlert.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -112,7 +109,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BellSlash.svelte b/src/lib/BellSlash.svelte
index 04a809af..c6b61444 100644
--- a/src/lib/BellSlash.svelte
+++ b/src/lib/BellSlash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -110,7 +107,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BellSnooze.svelte b/src/lib/BellSnooze.svelte
index c9fa4bae..481a4670 100644
--- a/src/lib/BellSnooze.svelte
+++ b/src/lib/BellSnooze.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bold.svelte b/src/lib/Bold.svelte
index cf064270..f1bdc6fd 100644
--- a/src/lib/Bold.svelte
+++ b/src/lib/Bold.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -87,7 +84,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bolt.svelte b/src/lib/Bolt.svelte
index 5b4ff633..b903af75 100644
--- a/src/lib/Bolt.svelte
+++ b/src/lib/Bolt.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BoltSlash.svelte b/src/lib/BoltSlash.svelte
index 7ae64b0b..c3decdf2 100644
--- a/src/lib/BoltSlash.svelte
+++ b/src/lib/BoltSlash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -116,7 +113,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BookOpen.svelte b/src/lib/BookOpen.svelte
index 551c8abc..8bd09cdf 100644
--- a/src/lib/BookOpen.svelte
+++ b/src/lib/BookOpen.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Bookmark.svelte b/src/lib/Bookmark.svelte
index ad8bad5c..8480ff82 100644
--- a/src/lib/Bookmark.svelte
+++ b/src/lib/Bookmark.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BookmarkSlash.svelte b/src/lib/BookmarkSlash.svelte
index 8c3f6f38..91218bc7 100644
--- a/src/lib/BookmarkSlash.svelte
+++ b/src/lib/BookmarkSlash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -103,7 +100,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BookmarkSquare.svelte b/src/lib/BookmarkSquare.svelte
index f70974ff..0af50e4a 100644
--- a/src/lib/BookmarkSquare.svelte
+++ b/src/lib/BookmarkSquare.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Briefcase.svelte b/src/lib/Briefcase.svelte
index 263818b0..db8391fe 100644
--- a/src/lib/Briefcase.svelte
+++ b/src/lib/Briefcase.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BugAnt.svelte b/src/lib/BugAnt.svelte
index 7ffe2609..7a1cb880 100644
--- a/src/lib/BugAnt.svelte
+++ b/src/lib/BugAnt.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BuildingLibrary.svelte b/src/lib/BuildingLibrary.svelte
index db799f50..da9c5af9 100644
--- a/src/lib/BuildingLibrary.svelte
+++ b/src/lib/BuildingLibrary.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BuildingOffice.svelte b/src/lib/BuildingOffice.svelte
index ead911a1..09562cfd 100644
--- a/src/lib/BuildingOffice.svelte
+++ b/src/lib/BuildingOffice.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BuildingOffice2.svelte b/src/lib/BuildingOffice2.svelte
index 27924adb..4b3159ef 100644
--- a/src/lib/BuildingOffice2.svelte
+++ b/src/lib/BuildingOffice2.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/BuildingStorefront.svelte b/src/lib/BuildingStorefront.svelte
index f6abeaf9..1e13f130 100644
--- a/src/lib/BuildingStorefront.svelte
+++ b/src/lib/BuildingStorefront.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Cake.svelte b/src/lib/Cake.svelte
index a6083e39..765b2a4e 100644
--- a/src/lib/Cake.svelte
+++ b/src/lib/Cake.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -138,7 +135,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Calculator.svelte b/src/lib/Calculator.svelte
index a1d8acfa..ca49bcf6 100644
--- a/src/lib/Calculator.svelte
+++ b/src/lib/Calculator.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Calendar.svelte b/src/lib/Calendar.svelte
index d885bdd4..bb64ea28 100644
--- a/src/lib/Calendar.svelte
+++ b/src/lib/Calendar.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CalendarDateRange.svelte b/src/lib/CalendarDateRange.svelte
index 143f01f6..2a8587d6 100644
--- a/src/lib/CalendarDateRange.svelte
+++ b/src/lib/CalendarDateRange.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -172,7 +169,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CalendarDays.svelte b/src/lib/CalendarDays.svelte
index 8a893bbc..204a68ee 100644
--- a/src/lib/CalendarDays.svelte
+++ b/src/lib/CalendarDays.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -204,7 +201,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Camera.svelte b/src/lib/Camera.svelte
index e594e749..bc526e8f 100644
--- a/src/lib/Camera.svelte
+++ b/src/lib/Camera.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -110,7 +107,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChartBar.svelte b/src/lib/ChartBar.svelte
index 6ece4a11..1bd8897b 100644
--- a/src/lib/ChartBar.svelte
+++ b/src/lib/ChartBar.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -120,7 +117,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChartBarSquare.svelte b/src/lib/ChartBarSquare.svelte
index 3ace630d..2d4d83da 100644
--- a/src/lib/ChartBarSquare.svelte
+++ b/src/lib/ChartBarSquare.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChartPie.svelte b/src/lib/ChartPie.svelte
index df77dafd..b33049f9 100644
--- a/src/lib/ChartPie.svelte
+++ b/src/lib/ChartPie.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -105,7 +102,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChatBubbleBottomCenter.svelte b/src/lib/ChatBubbleBottomCenter.svelte
index 13308ab8..0d75cd4b 100644
--- a/src/lib/ChatBubbleBottomCenter.svelte
+++ b/src/lib/ChatBubbleBottomCenter.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChatBubbleBottomCenterText.svelte b/src/lib/ChatBubbleBottomCenterText.svelte
index 0edbb903..c1a1a3af 100644
--- a/src/lib/ChatBubbleBottomCenterText.svelte
+++ b/src/lib/ChatBubbleBottomCenterText.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChatBubbleLeft.svelte b/src/lib/ChatBubbleLeft.svelte
index 886cd668..ae3c1b79 100644
--- a/src/lib/ChatBubbleLeft.svelte
+++ b/src/lib/ChatBubbleLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChatBubbleLeftEllipsis.svelte b/src/lib/ChatBubbleLeftEllipsis.svelte
index 13e53bd4..9899227f 100644
--- a/src/lib/ChatBubbleLeftEllipsis.svelte
+++ b/src/lib/ChatBubbleLeftEllipsis.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChatBubbleLeftRight.svelte b/src/lib/ChatBubbleLeftRight.svelte
index 28c194e6..0a1280ad 100644
--- a/src/lib/ChatBubbleLeftRight.svelte
+++ b/src/lib/ChatBubbleLeftRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChatBubbleOvalLeft.svelte b/src/lib/ChatBubbleOvalLeft.svelte
index 6fdc89db..56b47dbd 100644
--- a/src/lib/ChatBubbleOvalLeft.svelte
+++ b/src/lib/ChatBubbleOvalLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChatBubbleOvalLeftEllipsis.svelte b/src/lib/ChatBubbleOvalLeftEllipsis.svelte
index 8137807d..dc99e711 100644
--- a/src/lib/ChatBubbleOvalLeftEllipsis.svelte
+++ b/src/lib/ChatBubbleOvalLeftEllipsis.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Check.svelte b/src/lib/Check.svelte
index c3d12989..4bf3a83e 100644
--- a/src/lib/Check.svelte
+++ b/src/lib/Check.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CheckBadge.svelte b/src/lib/CheckBadge.svelte
index 898a57f4..8a389aa2 100644
--- a/src/lib/CheckBadge.svelte
+++ b/src/lib/CheckBadge.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CheckCircle.svelte b/src/lib/CheckCircle.svelte
index 5a94fee3..53a9e88d 100644
--- a/src/lib/CheckCircle.svelte
+++ b/src/lib/CheckCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronDoubleDown.svelte b/src/lib/ChevronDoubleDown.svelte
index 4a8c7f7a..14c93383 100644
--- a/src/lib/ChevronDoubleDown.svelte
+++ b/src/lib/ChevronDoubleDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronDoubleLeft.svelte b/src/lib/ChevronDoubleLeft.svelte
index 790b4c5c..f90463ba 100644
--- a/src/lib/ChevronDoubleLeft.svelte
+++ b/src/lib/ChevronDoubleLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronDoubleRight.svelte b/src/lib/ChevronDoubleRight.svelte
index 6b530775..9e18ea9e 100644
--- a/src/lib/ChevronDoubleRight.svelte
+++ b/src/lib/ChevronDoubleRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronDoubleUp.svelte b/src/lib/ChevronDoubleUp.svelte
index 44ae6017..4d9fa590 100644
--- a/src/lib/ChevronDoubleUp.svelte
+++ b/src/lib/ChevronDoubleUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -101,7 +98,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronDown.svelte b/src/lib/ChevronDown.svelte
index 76130f5c..eb21cabf 100644
--- a/src/lib/ChevronDown.svelte
+++ b/src/lib/ChevronDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronLeft.svelte b/src/lib/ChevronLeft.svelte
index 24e25926..e12b3e3f 100644
--- a/src/lib/ChevronLeft.svelte
+++ b/src/lib/ChevronLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronRight.svelte b/src/lib/ChevronRight.svelte
index 95502395..c9b99518 100644
--- a/src/lib/ChevronRight.svelte
+++ b/src/lib/ChevronRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronUp.svelte b/src/lib/ChevronUp.svelte
index c63e20dd..13700792 100644
--- a/src/lib/ChevronUp.svelte
+++ b/src/lib/ChevronUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ChevronUpDown.svelte b/src/lib/ChevronUpDown.svelte
index 08f0bd70..2211fc28 100644
--- a/src/lib/ChevronUpDown.svelte
+++ b/src/lib/ChevronUpDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CircleStack.svelte b/src/lib/CircleStack.svelte
index 027d96a5..b6fb3839 100644
--- a/src/lib/CircleStack.svelte
+++ b/src/lib/CircleStack.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -104,7 +101,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Clipboard.svelte b/src/lib/Clipboard.svelte
index 762a9e6f..c07b5925 100644
--- a/src/lib/Clipboard.svelte
+++ b/src/lib/Clipboard.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ClipboardDocument.svelte b/src/lib/ClipboardDocument.svelte
index d1a77bbd..ccca96e9 100644
--- a/src/lib/ClipboardDocument.svelte
+++ b/src/lib/ClipboardDocument.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -104,7 +101,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ClipboardDocumentCheck.svelte b/src/lib/ClipboardDocumentCheck.svelte
index 129cb12a..cc8ff192 100644
--- a/src/lib/ClipboardDocumentCheck.svelte
+++ b/src/lib/ClipboardDocumentCheck.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ClipboardDocumentList.svelte b/src/lib/ClipboardDocumentList.svelte
index c9a4b414..067f07c5 100644
--- a/src/lib/ClipboardDocumentList.svelte
+++ b/src/lib/ClipboardDocumentList.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Clock.svelte b/src/lib/Clock.svelte
index 942d14bd..3a8a97b2 100644
--- a/src/lib/Clock.svelte
+++ b/src/lib/Clock.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Cloud.svelte b/src/lib/Cloud.svelte
index 4182ec1a..729645e8 100644
--- a/src/lib/Cloud.svelte
+++ b/src/lib/Cloud.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -84,7 +81,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CloudArrowDown.svelte b/src/lib/CloudArrowDown.svelte
index 04ff447e..0d2f520f 100644
--- a/src/lib/CloudArrowDown.svelte
+++ b/src/lib/CloudArrowDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CloudArrowUp.svelte b/src/lib/CloudArrowUp.svelte
index 12de545d..ff1f9eed 100644
--- a/src/lib/CloudArrowUp.svelte
+++ b/src/lib/CloudArrowUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CodeBracket.svelte b/src/lib/CodeBracket.svelte
index 538ff7f6..7b9f15e0 100644
--- a/src/lib/CodeBracket.svelte
+++ b/src/lib/CodeBracket.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CodeBracketSquare.svelte b/src/lib/CodeBracketSquare.svelte
index 81d07997..c51da698 100644
--- a/src/lib/CodeBracketSquare.svelte
+++ b/src/lib/CodeBracketSquare.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Cog.svelte b/src/lib/Cog.svelte
index 2f3c9eeb..19bfcb15 100644
--- a/src/lib/Cog.svelte
+++ b/src/lib/Cog.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -112,7 +109,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Cog6Tooth.svelte b/src/lib/Cog6Tooth.svelte
index d9e1cf91..011aa216 100644
--- a/src/lib/Cog6Tooth.svelte
+++ b/src/lib/Cog6Tooth.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -95,7 +92,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Cog8Tooth.svelte b/src/lib/Cog8Tooth.svelte
index a1f61d76..72a3d0a8 100644
--- a/src/lib/Cog8Tooth.svelte
+++ b/src/lib/Cog8Tooth.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -95,7 +92,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CommandLine.svelte b/src/lib/CommandLine.svelte
index 642d034d..de315c19 100644
--- a/src/lib/CommandLine.svelte
+++ b/src/lib/CommandLine.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ComputerDesktop.svelte b/src/lib/ComputerDesktop.svelte
index 16c84921..c7f58fb6 100644
--- a/src/lib/ComputerDesktop.svelte
+++ b/src/lib/ComputerDesktop.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CpuChip.svelte b/src/lib/CpuChip.svelte
index 45301897..8329ee96 100644
--- a/src/lib/CpuChip.svelte
+++ b/src/lib/CpuChip.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -91,7 +88,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CreditCard.svelte b/src/lib/CreditCard.svelte
index 65a76d98..ac91f741 100644
--- a/src/lib/CreditCard.svelte
+++ b/src/lib/CreditCard.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Cube.svelte b/src/lib/Cube.svelte
index 1da4b033..0fd97940 100644
--- a/src/lib/Cube.svelte
+++ b/src/lib/Cube.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CubeTransparent.svelte b/src/lib/CubeTransparent.svelte
index 865f4042..f4c24a2a 100644
--- a/src/lib/CubeTransparent.svelte
+++ b/src/lib/CubeTransparent.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CurrencyBangladeshi.svelte b/src/lib/CurrencyBangladeshi.svelte
index 8ddc12f9..3f208607 100644
--- a/src/lib/CurrencyBangladeshi.svelte
+++ b/src/lib/CurrencyBangladeshi.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CurrencyDollar.svelte b/src/lib/CurrencyDollar.svelte
index c7a9aee2..798997d7 100644
--- a/src/lib/CurrencyDollar.svelte
+++ b/src/lib/CurrencyDollar.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -112,7 +109,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CurrencyEuro.svelte b/src/lib/CurrencyEuro.svelte
index 86795cb0..680c872c 100644
--- a/src/lib/CurrencyEuro.svelte
+++ b/src/lib/CurrencyEuro.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CurrencyPound.svelte b/src/lib/CurrencyPound.svelte
index 45d360a6..b3ca1992 100644
--- a/src/lib/CurrencyPound.svelte
+++ b/src/lib/CurrencyPound.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CurrencyRupee.svelte b/src/lib/CurrencyRupee.svelte
index 036a90b0..89229e5c 100644
--- a/src/lib/CurrencyRupee.svelte
+++ b/src/lib/CurrencyRupee.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CurrencyYen.svelte b/src/lib/CurrencyYen.svelte
index 537f32de..c8714f2f 100644
--- a/src/lib/CurrencyYen.svelte
+++ b/src/lib/CurrencyYen.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CursorArrowRays.svelte b/src/lib/CursorArrowRays.svelte
index 968ce96a..78050131 100644
--- a/src/lib/CursorArrowRays.svelte
+++ b/src/lib/CursorArrowRays.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -132,7 +129,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/CursorArrowRipple.svelte b/src/lib/CursorArrowRipple.svelte
index c731ecbc..92092bec 100644
--- a/src/lib/CursorArrowRipple.svelte
+++ b/src/lib/CursorArrowRipple.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DevicePhoneMobile.svelte b/src/lib/DevicePhoneMobile.svelte
index 50273558..a7f7db6c 100644
--- a/src/lib/DevicePhoneMobile.svelte
+++ b/src/lib/DevicePhoneMobile.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DeviceTablet.svelte b/src/lib/DeviceTablet.svelte
index d3d8d5f9..24e366f2 100644
--- a/src/lib/DeviceTablet.svelte
+++ b/src/lib/DeviceTablet.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Divide.svelte b/src/lib/Divide.svelte
index 15d02bb2..d9eaf45a 100644
--- a/src/lib/Divide.svelte
+++ b/src/lib/Divide.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -102,7 +99,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Document.svelte b/src/lib/Document.svelte
index 068813e7..814ea446 100644
--- a/src/lib/Document.svelte
+++ b/src/lib/Document.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentArrowDown.svelte b/src/lib/DocumentArrowDown.svelte
index 93827e00..61e8cb5b 100644
--- a/src/lib/DocumentArrowDown.svelte
+++ b/src/lib/DocumentArrowDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentArrowUp.svelte b/src/lib/DocumentArrowUp.svelte
index b289a188..ef8c35ec 100644
--- a/src/lib/DocumentArrowUp.svelte
+++ b/src/lib/DocumentArrowUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentChartBar.svelte b/src/lib/DocumentChartBar.svelte
index 076331ca..142c3479 100644
--- a/src/lib/DocumentChartBar.svelte
+++ b/src/lib/DocumentChartBar.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentCheck.svelte b/src/lib/DocumentCheck.svelte
index b2d83f81..b08b5c26 100644
--- a/src/lib/DocumentCheck.svelte
+++ b/src/lib/DocumentCheck.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentCurrencyBangladeshi.svelte b/src/lib/DocumentCurrencyBangladeshi.svelte
index 94d49400..13cba13d 100644
--- a/src/lib/DocumentCurrencyBangladeshi.svelte
+++ b/src/lib/DocumentCurrencyBangladeshi.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentCurrencyDollar.svelte b/src/lib/DocumentCurrencyDollar.svelte
index 11119b1b..65fb9f37 100644
--- a/src/lib/DocumentCurrencyDollar.svelte
+++ b/src/lib/DocumentCurrencyDollar.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentCurrencyEuro.svelte b/src/lib/DocumentCurrencyEuro.svelte
index be30687d..4a5f1f98 100644
--- a/src/lib/DocumentCurrencyEuro.svelte
+++ b/src/lib/DocumentCurrencyEuro.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentCurrencyPound.svelte b/src/lib/DocumentCurrencyPound.svelte
index 699836e3..47affa1c 100644
--- a/src/lib/DocumentCurrencyPound.svelte
+++ b/src/lib/DocumentCurrencyPound.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentCurrencyRupee.svelte b/src/lib/DocumentCurrencyRupee.svelte
index 94d6d70b..7c2ab69e 100644
--- a/src/lib/DocumentCurrencyRupee.svelte
+++ b/src/lib/DocumentCurrencyRupee.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentCurrencyYen.svelte b/src/lib/DocumentCurrencyYen.svelte
index 74eacad4..97666b23 100644
--- a/src/lib/DocumentCurrencyYen.svelte
+++ b/src/lib/DocumentCurrencyYen.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentDuplicate.svelte b/src/lib/DocumentDuplicate.svelte
index 3a2c588f..e3e2543e 100644
--- a/src/lib/DocumentDuplicate.svelte
+++ b/src/lib/DocumentDuplicate.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -98,7 +95,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentMagnifyingGlass.svelte b/src/lib/DocumentMagnifyingGlass.svelte
index e19e8c6e..aced4c75 100644
--- a/src/lib/DocumentMagnifyingGlass.svelte
+++ b/src/lib/DocumentMagnifyingGlass.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -104,7 +101,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentMinus.svelte b/src/lib/DocumentMinus.svelte
index 850cc65c..2cf0be65 100644
--- a/src/lib/DocumentMinus.svelte
+++ b/src/lib/DocumentMinus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentPlus.svelte b/src/lib/DocumentPlus.svelte
index f4c180ab..3b7c887d 100644
--- a/src/lib/DocumentPlus.svelte
+++ b/src/lib/DocumentPlus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/DocumentText.svelte b/src/lib/DocumentText.svelte
index e380a12e..8753f57f 100644
--- a/src/lib/DocumentText.svelte
+++ b/src/lib/DocumentText.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/EllipsisHorizontal.svelte b/src/lib/EllipsisHorizontal.svelte
index c278d93c..8f501f78 100644
--- a/src/lib/EllipsisHorizontal.svelte
+++ b/src/lib/EllipsisHorizontal.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -114,7 +111,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/EllipsisHorizontalCircle.svelte b/src/lib/EllipsisHorizontalCircle.svelte
index a1216f4e..ecca91f8 100644
--- a/src/lib/EllipsisHorizontalCircle.svelte
+++ b/src/lib/EllipsisHorizontalCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/EllipsisVertical.svelte b/src/lib/EllipsisVertical.svelte
index 24a903cb..0627a424 100644
--- a/src/lib/EllipsisVertical.svelte
+++ b/src/lib/EllipsisVertical.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -114,7 +111,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Envelope.svelte b/src/lib/Envelope.svelte
index a15bb6ee..591e8363 100644
--- a/src/lib/Envelope.svelte
+++ b/src/lib/Envelope.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/EnvelopeOpen.svelte b/src/lib/EnvelopeOpen.svelte
index 1446899d..7c4d4817 100644
--- a/src/lib/EnvelopeOpen.svelte
+++ b/src/lib/EnvelopeOpen.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -90,7 +87,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Equals.svelte b/src/lib/Equals.svelte
index 5d69ef92..d965d832 100644
--- a/src/lib/Equals.svelte
+++ b/src/lib/Equals.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -102,7 +99,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ExclamationCircle.svelte b/src/lib/ExclamationCircle.svelte
index 0be5c829..83dd09d6 100644
--- a/src/lib/ExclamationCircle.svelte
+++ b/src/lib/ExclamationCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ExclamationTriangle.svelte b/src/lib/ExclamationTriangle.svelte
index 9d1d0ac2..dc8f84fd 100644
--- a/src/lib/ExclamationTriangle.svelte
+++ b/src/lib/ExclamationTriangle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Eye.svelte b/src/lib/Eye.svelte
index effe88e3..42401ea0 100644
--- a/src/lib/Eye.svelte
+++ b/src/lib/Eye.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -107,7 +104,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/EyeDropper.svelte b/src/lib/EyeDropper.svelte
index d964a5ce..7a6a6327 100644
--- a/src/lib/EyeDropper.svelte
+++ b/src/lib/EyeDropper.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/EyeSlash.svelte b/src/lib/EyeSlash.svelte
index cd8cbad9..421b14d0 100644
--- a/src/lib/EyeSlash.svelte
+++ b/src/lib/EyeSlash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -110,7 +107,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/FaceFrown.svelte b/src/lib/FaceFrown.svelte
index 1225cf08..76320de8 100644
--- a/src/lib/FaceFrown.svelte
+++ b/src/lib/FaceFrown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/FaceSmile.svelte b/src/lib/FaceSmile.svelte
index c38a8c75..70ed68e6 100644
--- a/src/lib/FaceSmile.svelte
+++ b/src/lib/FaceSmile.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Film.svelte b/src/lib/Film.svelte
index 7ff27606..bddc040c 100644
--- a/src/lib/Film.svelte
+++ b/src/lib/Film.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/FingerPrint.svelte b/src/lib/FingerPrint.svelte
index 84b5a99d..9f30bfbf 100644
--- a/src/lib/FingerPrint.svelte
+++ b/src/lib/FingerPrint.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Fire.svelte b/src/lib/Fire.svelte
index a370e5c3..b294383c 100644
--- a/src/lib/Fire.svelte
+++ b/src/lib/Fire.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -95,7 +92,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Flag.svelte b/src/lib/Flag.svelte
index f3241be4..fb6ddb89 100644
--- a/src/lib/Flag.svelte
+++ b/src/lib/Flag.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -84,7 +81,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Folder.svelte b/src/lib/Folder.svelte
index ba294ca7..1323ceb2 100644
--- a/src/lib/Folder.svelte
+++ b/src/lib/Folder.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/FolderArrowDown.svelte b/src/lib/FolderArrowDown.svelte
index 28b1bd20..6823ac99 100644
--- a/src/lib/FolderArrowDown.svelte
+++ b/src/lib/FolderArrowDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/FolderMinus.svelte b/src/lib/FolderMinus.svelte
index 4ed2225b..941509da 100644
--- a/src/lib/FolderMinus.svelte
+++ b/src/lib/FolderMinus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/FolderOpen.svelte b/src/lib/FolderOpen.svelte
index 9b8e5247..b125d598 100644
--- a/src/lib/FolderOpen.svelte
+++ b/src/lib/FolderOpen.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/FolderPlus.svelte b/src/lib/FolderPlus.svelte
index 44629a3e..09f39851 100644
--- a/src/lib/FolderPlus.svelte
+++ b/src/lib/FolderPlus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Forward.svelte b/src/lib/Forward.svelte
index b6ec3236..f8c0d7a4 100644
--- a/src/lib/Forward.svelte
+++ b/src/lib/Forward.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -89,7 +86,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Funnel.svelte b/src/lib/Funnel.svelte
index c6c5cf8d..032b3f29 100644
--- a/src/lib/Funnel.svelte
+++ b/src/lib/Funnel.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Gif.svelte b/src/lib/Gif.svelte
index 17056520..301a0bdc 100644
--- a/src/lib/Gif.svelte
+++ b/src/lib/Gif.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Gift.svelte b/src/lib/Gift.svelte
index 5598671b..2ddc5530 100644
--- a/src/lib/Gift.svelte
+++ b/src/lib/Gift.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/GiftTop.svelte b/src/lib/GiftTop.svelte
index ff04d468..22298652 100644
--- a/src/lib/GiftTop.svelte
+++ b/src/lib/GiftTop.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -124,7 +121,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/GlobeAlt.svelte b/src/lib/GlobeAlt.svelte
index 63aa1ea9..ecb6b510 100644
--- a/src/lib/GlobeAlt.svelte
+++ b/src/lib/GlobeAlt.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -148,7 +145,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/GlobeAmericas.svelte b/src/lib/GlobeAmericas.svelte
index 169910a9..5f1258d0 100644
--- a/src/lib/GlobeAmericas.svelte
+++ b/src/lib/GlobeAmericas.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/GlobeAsiaAustralia.svelte b/src/lib/GlobeAsiaAustralia.svelte
index e72e4cbd..6b843562 100644
--- a/src/lib/GlobeAsiaAustralia.svelte
+++ b/src/lib/GlobeAsiaAustralia.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/GlobeEuropeAfrica.svelte b/src/lib/GlobeEuropeAfrica.svelte
index 058f3387..0d229039 100644
--- a/src/lib/GlobeEuropeAfrica.svelte
+++ b/src/lib/GlobeEuropeAfrica.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/H1.svelte b/src/lib/H1.svelte
index 4a0db66a..d6493aef 100644
--- a/src/lib/H1.svelte
+++ b/src/lib/H1.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/H2.svelte b/src/lib/H2.svelte
index e7b6a5de..a50e2cf4 100644
--- a/src/lib/H2.svelte
+++ b/src/lib/H2.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/H3.svelte b/src/lib/H3.svelte
index 9d9407d4..77e11f0c 100644
--- a/src/lib/H3.svelte
+++ b/src/lib/H3.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/HandRaised.svelte b/src/lib/HandRaised.svelte
index 4dd945ad..ae9cea3d 100644
--- a/src/lib/HandRaised.svelte
+++ b/src/lib/HandRaised.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -84,7 +81,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/HandThumbDown.svelte b/src/lib/HandThumbDown.svelte
index 285f2c2b..7d4e44a4 100644
--- a/src/lib/HandThumbDown.svelte
+++ b/src/lib/HandThumbDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/HandThumbUp.svelte b/src/lib/HandThumbUp.svelte
index bd60b783..afd3fbfe 100644
--- a/src/lib/HandThumbUp.svelte
+++ b/src/lib/HandThumbUp.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Hashtag.svelte b/src/lib/Hashtag.svelte
index 8e3a8769..a49365e1 100644
--- a/src/lib/Hashtag.svelte
+++ b/src/lib/Hashtag.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Heart.svelte b/src/lib/Heart.svelte
index b9c2df40..f0359ae6 100644
--- a/src/lib/Heart.svelte
+++ b/src/lib/Heart.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -82,7 +79,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Home.svelte b/src/lib/Home.svelte
index bc884545..b497f0cf 100644
--- a/src/lib/Home.svelte
+++ b/src/lib/Home.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/HomeModern.svelte b/src/lib/HomeModern.svelte
index 827f0953..9bb05d69 100644
--- a/src/lib/HomeModern.svelte
+++ b/src/lib/HomeModern.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Identification.svelte b/src/lib/Identification.svelte
index 8496ab0c..79e5c6eb 100644
--- a/src/lib/Identification.svelte
+++ b/src/lib/Identification.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Inbox.svelte b/src/lib/Inbox.svelte
index 2ceea345..d28f0953 100644
--- a/src/lib/Inbox.svelte
+++ b/src/lib/Inbox.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/InboxArrowDown.svelte b/src/lib/InboxArrowDown.svelte
index ffd7031e..fcddb94b 100644
--- a/src/lib/InboxArrowDown.svelte
+++ b/src/lib/InboxArrowDown.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -98,7 +95,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/InboxStack.svelte b/src/lib/InboxStack.svelte
index e89b9acc..7c371771 100644
--- a/src/lib/InboxStack.svelte
+++ b/src/lib/InboxStack.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/InformationCircle.svelte b/src/lib/InformationCircle.svelte
index dc66722c..2f6f5dd6 100644
--- a/src/lib/InformationCircle.svelte
+++ b/src/lib/InformationCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Italic.svelte b/src/lib/Italic.svelte
index f6110f24..75e9604b 100644
--- a/src/lib/Italic.svelte
+++ b/src/lib/Italic.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Key.svelte b/src/lib/Key.svelte
index 6cdea0d5..8bd2c614 100644
--- a/src/lib/Key.svelte
+++ b/src/lib/Key.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Language.svelte b/src/lib/Language.svelte
index f1b362ff..59a54a41 100644
--- a/src/lib/Language.svelte
+++ b/src/lib/Language.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -98,7 +95,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Lifebuoy.svelte b/src/lib/Lifebuoy.svelte
index 5300d95f..2121936b 100644
--- a/src/lib/Lifebuoy.svelte
+++ b/src/lib/Lifebuoy.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/LightBulb.svelte b/src/lib/LightBulb.svelte
index 9289d079..01d41a54 100644
--- a/src/lib/LightBulb.svelte
+++ b/src/lib/LightBulb.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -102,7 +99,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Link.svelte b/src/lib/Link.svelte
index b08e8a6a..df5f1c0d 100644
--- a/src/lib/Link.svelte
+++ b/src/lib/Link.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/LinkSlash.svelte b/src/lib/LinkSlash.svelte
index 88e8f34a..c855f76a 100644
--- a/src/lib/LinkSlash.svelte
+++ b/src/lib/LinkSlash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -90,7 +87,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ListBullet.svelte b/src/lib/ListBullet.svelte
index f4de7f7a..87fb6911 100644
--- a/src/lib/ListBullet.svelte
+++ b/src/lib/ListBullet.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -124,7 +121,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/LockClosed.svelte b/src/lib/LockClosed.svelte
index 0cb2d0ac..7282e937 100644
--- a/src/lib/LockClosed.svelte
+++ b/src/lib/LockClosed.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/LockOpen.svelte b/src/lib/LockOpen.svelte
index 8d8f10fb..222034e3 100644
--- a/src/lib/LockOpen.svelte
+++ b/src/lib/LockOpen.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -84,7 +81,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/MagnifyingGlass.svelte b/src/lib/MagnifyingGlass.svelte
index 983222d0..141da180 100644
--- a/src/lib/MagnifyingGlass.svelte
+++ b/src/lib/MagnifyingGlass.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/MagnifyingGlassCircle.svelte b/src/lib/MagnifyingGlassCircle.svelte
index 67feada1..f2d3e905 100644
--- a/src/lib/MagnifyingGlassCircle.svelte
+++ b/src/lib/MagnifyingGlassCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/MagnifyingGlassMinus.svelte b/src/lib/MagnifyingGlassMinus.svelte
index 41539620..9af10fca 100644
--- a/src/lib/MagnifyingGlassMinus.svelte
+++ b/src/lib/MagnifyingGlassMinus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/MagnifyingGlassPlus.svelte b/src/lib/MagnifyingGlassPlus.svelte
index 38b87242..61c06c3b 100644
--- a/src/lib/MagnifyingGlassPlus.svelte
+++ b/src/lib/MagnifyingGlassPlus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Map.svelte b/src/lib/Map.svelte
index 36d4c11c..23040f34 100644
--- a/src/lib/Map.svelte
+++ b/src/lib/Map.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/MapPin.svelte b/src/lib/MapPin.svelte
index 3b9af6e7..97add172 100644
--- a/src/lib/MapPin.svelte
+++ b/src/lib/MapPin.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -95,7 +92,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Megaphone.svelte b/src/lib/Megaphone.svelte
index 7179ba5d..a1a3b96f 100644
--- a/src/lib/Megaphone.svelte
+++ b/src/lib/Megaphone.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Microphone.svelte b/src/lib/Microphone.svelte
index 2d7bbb52..5f6fbde2 100644
--- a/src/lib/Microphone.svelte
+++ b/src/lib/Microphone.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Minus.svelte b/src/lib/Minus.svelte
index c0193cfe..56e45773 100644
--- a/src/lib/Minus.svelte
+++ b/src/lib/Minus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/MinusCircle.svelte b/src/lib/MinusCircle.svelte
index 405ea4ac..75c12754 100644
--- a/src/lib/MinusCircle.svelte
+++ b/src/lib/MinusCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/MinusSmall.svelte b/src/lib/MinusSmall.svelte
index bea1da0c..f078f730 100644
--- a/src/lib/MinusSmall.svelte
+++ b/src/lib/MinusSmall.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -81,7 +78,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Moon.svelte b/src/lib/Moon.svelte
index 46874ade..f88b37f6 100644
--- a/src/lib/Moon.svelte
+++ b/src/lib/Moon.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/MusicalNote.svelte b/src/lib/MusicalNote.svelte
index c80e5209..8af4b01f 100644
--- a/src/lib/MusicalNote.svelte
+++ b/src/lib/MusicalNote.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -86,7 +83,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Newspaper.svelte b/src/lib/Newspaper.svelte
index 8822f164..3c8fcb5e 100644
--- a/src/lib/Newspaper.svelte
+++ b/src/lib/Newspaper.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/NoSymbol.svelte b/src/lib/NoSymbol.svelte
index 25a7e664..5aa35a7b 100644
--- a/src/lib/NoSymbol.svelte
+++ b/src/lib/NoSymbol.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/NumberedList.svelte b/src/lib/NumberedList.svelte
index 6d8cc9e3..5423d534 100644
--- a/src/lib/NumberedList.svelte
+++ b/src/lib/NumberedList.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -154,7 +151,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PaintBrush.svelte b/src/lib/PaintBrush.svelte
index 74337d91..79b9f652 100644
--- a/src/lib/PaintBrush.svelte
+++ b/src/lib/PaintBrush.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PaperAirplane.svelte b/src/lib/PaperAirplane.svelte
index 6866eae1..999bbcf1 100644
--- a/src/lib/PaperAirplane.svelte
+++ b/src/lib/PaperAirplane.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -82,7 +79,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PaperClip.svelte b/src/lib/PaperClip.svelte
index fd6b48a4..331fe05c 100644
--- a/src/lib/PaperClip.svelte
+++ b/src/lib/PaperClip.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Pause.svelte b/src/lib/Pause.svelte
index b8136fe1..8a813d91 100644
--- a/src/lib/Pause.svelte
+++ b/src/lib/Pause.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -92,7 +89,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PauseCircle.svelte b/src/lib/PauseCircle.svelte
index 16e92d00..d0f59f5a 100644
--- a/src/lib/PauseCircle.svelte
+++ b/src/lib/PauseCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Pencil.svelte b/src/lib/Pencil.svelte
index fe923983..f8ced9df 100644
--- a/src/lib/Pencil.svelte
+++ b/src/lib/Pencil.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PencilSquare.svelte b/src/lib/PencilSquare.svelte
index 62a464b3..4ea7bdde 100644
--- a/src/lib/PencilSquare.svelte
+++ b/src/lib/PencilSquare.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -98,7 +95,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PercentBadge.svelte b/src/lib/PercentBadge.svelte
index 0336a2c2..3d6c49a7 100644
--- a/src/lib/PercentBadge.svelte
+++ b/src/lib/PercentBadge.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Phone.svelte b/src/lib/Phone.svelte
index 7819e86d..f6dd37e0 100644
--- a/src/lib/Phone.svelte
+++ b/src/lib/Phone.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PhoneArrowDownLeft.svelte b/src/lib/PhoneArrowDownLeft.svelte
index 6e52b794..566a51af 100644
--- a/src/lib/PhoneArrowDownLeft.svelte
+++ b/src/lib/PhoneArrowDownLeft.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -98,7 +95,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PhoneArrowUpRight.svelte b/src/lib/PhoneArrowUpRight.svelte
index 8f9a6091..ff926aaa 100644
--- a/src/lib/PhoneArrowUpRight.svelte
+++ b/src/lib/PhoneArrowUpRight.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -98,7 +95,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PhoneXMark.svelte b/src/lib/PhoneXMark.svelte
index cccabc45..4ee4f8cb 100644
--- a/src/lib/PhoneXMark.svelte
+++ b/src/lib/PhoneXMark.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Photo.svelte b/src/lib/Photo.svelte
index 8ea9f0a4..a8d1bd64 100644
--- a/src/lib/Photo.svelte
+++ b/src/lib/Photo.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Play.svelte b/src/lib/Play.svelte
index ba20ba64..d587f091 100644
--- a/src/lib/Play.svelte
+++ b/src/lib/Play.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -84,7 +81,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PlayCircle.svelte b/src/lib/PlayCircle.svelte
index b80dd2ac..8606175a 100644
--- a/src/lib/PlayCircle.svelte
+++ b/src/lib/PlayCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -95,7 +92,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PlayPause.svelte b/src/lib/PlayPause.svelte
index c71a28fd..38e2bf24 100644
--- a/src/lib/PlayPause.svelte
+++ b/src/lib/PlayPause.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Plus.svelte b/src/lib/Plus.svelte
index a2ae160c..bebefebf 100644
--- a/src/lib/Plus.svelte
+++ b/src/lib/Plus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -84,7 +81,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PlusCircle.svelte b/src/lib/PlusCircle.svelte
index b9d927b6..f36b319f 100644
--- a/src/lib/PlusCircle.svelte
+++ b/src/lib/PlusCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PlusSmall.svelte b/src/lib/PlusSmall.svelte
index c6abeee6..9019d596 100644
--- a/src/lib/PlusSmall.svelte
+++ b/src/lib/PlusSmall.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -81,7 +78,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Power.svelte b/src/lib/Power.svelte
index fc3a4434..03cde52d 100644
--- a/src/lib/Power.svelte
+++ b/src/lib/Power.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PresentationChartBar.svelte b/src/lib/PresentationChartBar.svelte
index 288fa092..9e0cd458 100644
--- a/src/lib/PresentationChartBar.svelte
+++ b/src/lib/PresentationChartBar.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PresentationChartLine.svelte b/src/lib/PresentationChartLine.svelte
index 65429d96..1bf4e8d6 100644
--- a/src/lib/PresentationChartLine.svelte
+++ b/src/lib/PresentationChartLine.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Printer.svelte b/src/lib/Printer.svelte
index 3a71aa48..90256de5 100644
--- a/src/lib/Printer.svelte
+++ b/src/lib/Printer.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/PuzzlePiece.svelte b/src/lib/PuzzlePiece.svelte
index ae38253b..b2674f25 100644
--- a/src/lib/PuzzlePiece.svelte
+++ b/src/lib/PuzzlePiece.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -82,7 +79,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/QrCode.svelte b/src/lib/QrCode.svelte
index d62036c7..3db29dac 100644
--- a/src/lib/QrCode.svelte
+++ b/src/lib/QrCode.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -202,7 +199,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/QuestionMarkCircle.svelte b/src/lib/QuestionMarkCircle.svelte
index 2e808689..c5493715 100644
--- a/src/lib/QuestionMarkCircle.svelte
+++ b/src/lib/QuestionMarkCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/QueueList.svelte b/src/lib/QueueList.svelte
index 0a5c00f4..5af25297 100644
--- a/src/lib/QueueList.svelte
+++ b/src/lib/QueueList.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -114,7 +111,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Radio.svelte b/src/lib/Radio.svelte
index b981cc84..1e2a1d2f 100644
--- a/src/lib/Radio.svelte
+++ b/src/lib/Radio.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ReceiptPercent.svelte b/src/lib/ReceiptPercent.svelte
index 71007c50..351c0357 100644
--- a/src/lib/ReceiptPercent.svelte
+++ b/src/lib/ReceiptPercent.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ReceiptRefund.svelte b/src/lib/ReceiptRefund.svelte
index 5bd4541d..76c7da9b 100644
--- a/src/lib/ReceiptRefund.svelte
+++ b/src/lib/ReceiptRefund.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/RectangleGroup.svelte b/src/lib/RectangleGroup.svelte
index 50260b56..8e4d3b5b 100644
--- a/src/lib/RectangleGroup.svelte
+++ b/src/lib/RectangleGroup.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -108,7 +105,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/RectangleStack.svelte b/src/lib/RectangleStack.svelte
index e64dca52..90ec99b8 100644
--- a/src/lib/RectangleStack.svelte
+++ b/src/lib/RectangleStack.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -103,7 +100,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/RocketLaunch.svelte b/src/lib/RocketLaunch.svelte
index 5272359c..aca02ef9 100644
--- a/src/lib/RocketLaunch.svelte
+++ b/src/lib/RocketLaunch.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -102,7 +99,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Rss.svelte b/src/lib/Rss.svelte
index 119c2637..27a6f41d 100644
--- a/src/lib/Rss.svelte
+++ b/src/lib/Rss.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Scale.svelte b/src/lib/Scale.svelte
index 9b2a82f9..726ce2e8 100644
--- a/src/lib/Scale.svelte
+++ b/src/lib/Scale.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Scissors.svelte b/src/lib/Scissors.svelte
index 50f9904b..6a91698d 100644
--- a/src/lib/Scissors.svelte
+++ b/src/lib/Scissors.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -118,7 +115,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Server.svelte b/src/lib/Server.svelte
index 7243f45e..e34eefc7 100644
--- a/src/lib/Server.svelte
+++ b/src/lib/Server.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -100,7 +97,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ServerStack.svelte b/src/lib/ServerStack.svelte
index 9db527ba..66b28f3e 100644
--- a/src/lib/ServerStack.svelte
+++ b/src/lib/ServerStack.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -118,7 +115,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Share.svelte b/src/lib/Share.svelte
index a83a4262..1d25df5b 100644
--- a/src/lib/Share.svelte
+++ b/src/lib/Share.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -84,7 +81,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ShieldCheck.svelte b/src/lib/ShieldCheck.svelte
index 84c6e784..f1eab3d2 100644
--- a/src/lib/ShieldCheck.svelte
+++ b/src/lib/ShieldCheck.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ShieldExclamation.svelte b/src/lib/ShieldExclamation.svelte
index c8ffd559..df8e1924 100644
--- a/src/lib/ShieldExclamation.svelte
+++ b/src/lib/ShieldExclamation.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ShoppingBag.svelte b/src/lib/ShoppingBag.svelte
index a78bec5b..ad970746 100644
--- a/src/lib/ShoppingBag.svelte
+++ b/src/lib/ShoppingBag.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ShoppingCart.svelte b/src/lib/ShoppingCart.svelte
index 02e6bda6..8920fddc 100644
--- a/src/lib/ShoppingCart.svelte
+++ b/src/lib/ShoppingCart.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Signal.svelte b/src/lib/Signal.svelte
index fcdb46dc..8b26a93e 100644
--- a/src/lib/Signal.svelte
+++ b/src/lib/Signal.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -112,7 +109,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/SignalSlash.svelte b/src/lib/SignalSlash.svelte
index 631090b9..3a996259 100644
--- a/src/lib/SignalSlash.svelte
+++ b/src/lib/SignalSlash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -116,7 +113,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Slash.svelte b/src/lib/Slash.svelte
index 2906a5d0..44dba5a1 100644
--- a/src/lib/Slash.svelte
+++ b/src/lib/Slash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Sparkles.svelte b/src/lib/Sparkles.svelte
index 50bba244..e4bff3e0 100644
--- a/src/lib/Sparkles.svelte
+++ b/src/lib/Sparkles.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -132,7 +129,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/SpeakerWave.svelte b/src/lib/SpeakerWave.svelte
index 7a2d7027..c68d089f 100644
--- a/src/lib/SpeakerWave.svelte
+++ b/src/lib/SpeakerWave.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/SpeakerXMark.svelte b/src/lib/SpeakerXMark.svelte
index 81e2ef50..a4b82964 100644
--- a/src/lib/SpeakerXMark.svelte
+++ b/src/lib/SpeakerXMark.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Square2Stack.svelte b/src/lib/Square2Stack.svelte
index 6e61233e..1432f1de 100644
--- a/src/lib/Square2Stack.svelte
+++ b/src/lib/Square2Stack.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Square3Stack3d.svelte b/src/lib/Square3Stack3d.svelte
index 5d4528eb..c31c37e2 100644
--- a/src/lib/Square3Stack3d.svelte
+++ b/src/lib/Square3Stack3d.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Squares2x2.svelte b/src/lib/Squares2x2.svelte
index 11469efb..524d1530 100644
--- a/src/lib/Squares2x2.svelte
+++ b/src/lib/Squares2x2.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -119,7 +116,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/SquaresPlus.svelte b/src/lib/SquaresPlus.svelte
index 85a9e0ad..38bfd898 100644
--- a/src/lib/SquaresPlus.svelte
+++ b/src/lib/SquaresPlus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -118,7 +115,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Star.svelte b/src/lib/Star.svelte
index a2d8b1ac..c11b08be 100644
--- a/src/lib/Star.svelte
+++ b/src/lib/Star.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Stop.svelte b/src/lib/Stop.svelte
index b60641d6..0bc709a7 100644
--- a/src/lib/Stop.svelte
+++ b/src/lib/Stop.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -81,7 +78,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/StopCircle.svelte b/src/lib/StopCircle.svelte
index 1cbec838..b6f630ac 100644
--- a/src/lib/StopCircle.svelte
+++ b/src/lib/StopCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -95,7 +92,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Strikethrough.svelte b/src/lib/Strikethrough.svelte
index 5ce594bb..83dd2af0 100644
--- a/src/lib/Strikethrough.svelte
+++ b/src/lib/Strikethrough.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Sun.svelte b/src/lib/Sun.svelte
index 76aeea0d..4d94021c 100644
--- a/src/lib/Sun.svelte
+++ b/src/lib/Sun.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -178,7 +175,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Swatch.svelte b/src/lib/Swatch.svelte
index b4b221bf..27889c20 100644
--- a/src/lib/Swatch.svelte
+++ b/src/lib/Swatch.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -104,7 +101,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/TableCells.svelte b/src/lib/TableCells.svelte
index 0eddc26e..6eb15a0d 100644
--- a/src/lib/TableCells.svelte
+++ b/src/lib/TableCells.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Tag.svelte b/src/lib/Tag.svelte
index e2a46032..c9743452 100644
--- a/src/lib/Tag.svelte
+++ b/src/lib/Tag.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -95,7 +92,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Ticket.svelte b/src/lib/Ticket.svelte
index f7f7f84d..7fc65edf 100644
--- a/src/lib/Ticket.svelte
+++ b/src/lib/Ticket.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Trash.svelte b/src/lib/Trash.svelte
index 360aa5d9..6231e3e5 100644
--- a/src/lib/Trash.svelte
+++ b/src/lib/Trash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Trophy.svelte b/src/lib/Trophy.svelte
index 2751258a..6d92ee09 100644
--- a/src/lib/Trophy.svelte
+++ b/src/lib/Trophy.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Truck.svelte b/src/lib/Truck.svelte
index 6d02154a..cc2c9f43 100644
--- a/src/lib/Truck.svelte
+++ b/src/lib/Truck.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -130,7 +127,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Tv.svelte b/src/lib/Tv.svelte
index 4873f36e..db3808c7 100644
--- a/src/lib/Tv.svelte
+++ b/src/lib/Tv.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -91,7 +88,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Underline.svelte b/src/lib/Underline.svelte
index 80975460..4e784ea5 100644
--- a/src/lib/Underline.svelte
+++ b/src/lib/Underline.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/User.svelte b/src/lib/User.svelte
index 88c95d47..e3ffaaff 100644
--- a/src/lib/User.svelte
+++ b/src/lib/User.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -105,7 +102,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/UserCircle.svelte b/src/lib/UserCircle.svelte
index 19c06633..8919d45f 100644
--- a/src/lib/UserCircle.svelte
+++ b/src/lib/UserCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/UserGroup.svelte b/src/lib/UserGroup.svelte
index 23d983ac..ac2993ee 100644
--- a/src/lib/UserGroup.svelte
+++ b/src/lib/UserGroup.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -150,7 +147,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/UserMinus.svelte b/src/lib/UserMinus.svelte
index 4ef68152..4749a953 100644
--- a/src/lib/UserMinus.svelte
+++ b/src/lib/UserMinus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/UserPlus.svelte b/src/lib/UserPlus.svelte
index 189c5621..83abb5d8 100644
--- a/src/lib/UserPlus.svelte
+++ b/src/lib/UserPlus.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Users.svelte b/src/lib/Users.svelte
index 67423c0e..28cc13b1 100644
--- a/src/lib/Users.svelte
+++ b/src/lib/Users.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -118,7 +115,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Variable.svelte b/src/lib/Variable.svelte
index 0f35064f..63222ecd 100644
--- a/src/lib/Variable.svelte
+++ b/src/lib/Variable.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/VideoCamera.svelte b/src/lib/VideoCamera.svelte
index 396e1273..f54244aa 100644
--- a/src/lib/VideoCamera.svelte
+++ b/src/lib/VideoCamera.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -94,7 +91,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/VideoCameraSlash.svelte b/src/lib/VideoCameraSlash.svelte
index 9c8d3528..09b11189 100644
--- a/src/lib/VideoCameraSlash.svelte
+++ b/src/lib/VideoCameraSlash.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ViewColumns.svelte b/src/lib/ViewColumns.svelte
index 0850dc07..f34a66e4 100644
--- a/src/lib/ViewColumns.svelte
+++ b/src/lib/ViewColumns.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -96,7 +93,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/ViewfinderCircle.svelte b/src/lib/ViewfinderCircle.svelte
index d447a20b..e7fbc85d 100644
--- a/src/lib/ViewfinderCircle.svelte
+++ b/src/lib/ViewfinderCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -130,7 +127,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Wallet.svelte b/src/lib/Wallet.svelte
index f0c351fc..cb02c554 100644
--- a/src/lib/Wallet.svelte
+++ b/src/lib/Wallet.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -106,7 +103,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Wifi.svelte b/src/lib/Wifi.svelte
index 817b0994..2f38037b 100644
--- a/src/lib/Wifi.svelte
+++ b/src/lib/Wifi.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Window.svelte b/src/lib/Window.svelte
index 41e2acb7..7d68e6d3 100644
--- a/src/lib/Window.svelte
+++ b/src/lib/Window.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/Wrench.svelte b/src/lib/Wrench.svelte
index 0300ae55..3deec2a1 100644
--- a/src/lib/Wrench.svelte
+++ b/src/lib/Wrench.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -95,7 +92,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/WrenchScrewdriver.svelte b/src/lib/WrenchScrewdriver.svelte
index ca623086..ea8fd5c3 100644
--- a/src/lib/WrenchScrewdriver.svelte
+++ b/src/lib/WrenchScrewdriver.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -114,7 +111,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/XCircle.svelte b/src/lib/XCircle.svelte
index aeb15a11..40d1b7d4 100644
--- a/src/lib/XCircle.svelte
+++ b/src/lib/XCircle.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -88,7 +85,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/lib/XMark.svelte b/src/lib/XMark.svelte
index 7f3f48de..49c9d860 100644
--- a/src/lib/XMark.svelte
+++ b/src/lib/XMark.svelte
@@ -5,7 +5,7 @@
   const ctx: CtxType = getContext('iconCtx') ?? {};
 
   let {
-    size = ctx.size || '24',
+    size = ctx.size,
     role = ctx.role || 'img',
     color = ctx.color || 'currentColor',
     variation = ctx.variation || 'outline',
@@ -18,19 +18,16 @@
 
   let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
   const hasDescription = $derived(!!(title?.id || desc?.id));
-  let viewBox: string | undefined = $state(undefined);
 
-  $effect(() => {
-    if (variation === 'mini') {
-      size = size || '20';
-      viewBox = '0 0 20 20';
-    } else if (variation === 'micro') {
-      size = size || '16';
-      viewBox = '0 0 16 16';
-    } else {
-      size = size || '24';
-      viewBox = '0 0 24 24';
-    }
+  let viewBox = $derived.by(() => {
+    if (variation === 'mini') return '0 0 20 20';
+    if (variation === 'micro') return '0 0 16 16';
+    return '0 0 24 24';
+  });
+  let variationSize = $derived.by(() => {
+    if (variation === 'mini') return '20';
+    if (variation === 'micro') return '16';
+    return '24';
   });
 </script>
 
@@ -38,8 +35,8 @@
   xmlns="http://www.w3.org/2000/svg"
   {...restProps}
   {role}
-  width={size}
-  height={size}
+  width={size || variationSize}
+  height={size || variationSize}
   fill="none"
   aria-label={ariaLabel}
   aria-describedby={hasDescription ? ariaDescribedby : undefined}
@@ -84,7 +81,7 @@
 @component
 [Go to docs](https://svelte-heros-v2.codewithshin.com/)
 ## Props
-@prop size = ctx.size || '24'
+@prop size = ctx.size
 @prop role = ctx.role || 'img'
 @prop color = ctx.color || 'currentColor'
 @prop variation = ctx.variation || 'outline'
diff --git a/src/routes/guide/svelte-5/props/md/props.md b/src/routes/guide/svelte-5/props/md/props.md
index 73dab44b..211733d1 100644
--- a/src/routes/guide/svelte-5/props/md/props.md
+++ b/src/routes/guide/svelte-5/props/md/props.md
@@ -1,4 +1,4 @@
-- size = ctx.size || '24'
+- size = ctx.size
 - role = ctx.role || 'img'
 - color = ctx.color || 'currentColor'
 - variation = ctx.variation || "outline"