diff --git a/apps/www/app/[locale]/(user)/components/Content.tsx b/apps/www/app/[locale]/(user)/components/Content.tsx
index 1a364d70..dfd90f38 100644
--- a/apps/www/app/[locale]/(user)/components/Content.tsx
+++ b/apps/www/app/[locale]/(user)/components/Content.tsx
@@ -12,7 +12,7 @@ export function Content() {
 
   return (
     <>
-      <IconBrandTabler size="80" color="var(--icon)" />
+      <IconBrandTabler size={320} color="var(--icon)" />
       <Text variant="heading4xl" as="h1" alignment="center">
         {t('title')}
       </Text>
diff --git a/apps/www/app/[locale]/dashboard/components/in-progress.tsx b/apps/www/app/[locale]/dashboard/components/in-progress.tsx
index 2e972658..2ee1f5eb 100644
--- a/apps/www/app/[locale]/dashboard/components/in-progress.tsx
+++ b/apps/www/app/[locale]/dashboard/components/in-progress.tsx
@@ -7,7 +7,7 @@ import { Icons } from '@/components/icons';
 export function InProgress() {
   return (
     <div className="flex flex-col h-full items-center justify-center gap-4">
-      <Icon source={Icons.construction} size="20" />
+      <Icon source={Icons.construction} size={80} />
       <Text variant="headingSm" color="subdued">
         This page is currently under construction.
       </Text>
diff --git a/apps/www/app/[locale]/dashboard/components/main-nav.tsx b/apps/www/app/[locale]/dashboard/components/main-nav.tsx
index e3d41355..ce076ad3 100644
--- a/apps/www/app/[locale]/dashboard/components/main-nav.tsx
+++ b/apps/www/app/[locale]/dashboard/components/main-nav.tsx
@@ -22,7 +22,7 @@ export function MainNav() {
       <Box flex justifyContent="space-between" gap="4" alignItems="center">
         <Link href="/">
           <Box flex alignItems="center" gap="2">
-            <Icon source={Icons.logo} size="6" />
+            <Icon source={Icons.logo} size={24} />
             <Text variant="headingLg" as="h1">
               OPub
             </Text>
diff --git a/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx b/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx
index 46af9762..2fc1b955 100644
--- a/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx
+++ b/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx
@@ -31,7 +31,7 @@ const NoList = ({
     <div className="flex flex-col items-center justify-center p-6">
       <Icon
         source={Icons.distribution}
-        size="16"
+        size={64}
         stroke={1}
         color="interactive"
       />
diff --git a/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx b/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx
index c03c77f2..13766ed3 100644
--- a/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx
+++ b/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx
@@ -226,7 +226,7 @@ const FileUpload = ({
   const uploadedFile = file && (
     <div className="flex items-center justify-center h-full py-16">
       <div className="flex gap-3 items-center py-2 px-3 rounded-05 border-borderSubdued border-1 border-solid bg-surface">
-        <Icon source={Icons.check} size="6" color="success" />
+        <Icon source={Icons.check} size={24} color="success" />
 
         <div className="flex flex-col">
           <div className="max-w-[180px]">
@@ -240,7 +240,7 @@ const FileUpload = ({
         </div>
         <Button
           size="slim"
-          icon={<Icon source={Icons.delete} size="6" />}
+          icon={<Icon source={Icons.delete} size={24} />}
           plain
           accessibilityLabel="delete resource"
           onClick={handleFileDelete}
diff --git a/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx b/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx
index 55ce3c18..49658663 100644
--- a/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx
+++ b/apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx
@@ -63,7 +63,7 @@ const Header = ({ id, title }: { id: string; title?: string }) => {
     <div className="flex gap-4 flex-wrap items-center justify-between">
       <div className="flex flex-wrap gap-4 items-center">
         <Link href="/dashboard/dataset">
-          <Icon source={Icons.back} size="8" />
+          <Icon source={Icons.back} size={32} />
           <Text visuallyHidden>Go to dataset listing page</Text>
         </Link>
 
diff --git a/apps/www/app/[locale]/dashboard/dataset/components/action-bar.tsx b/apps/www/app/[locale]/dashboard/dataset/components/action-bar.tsx
index f914d2dc..e49f8c99 100644
--- a/apps/www/app/[locale]/dashboard/dataset/components/action-bar.tsx
+++ b/apps/www/app/[locale]/dashboard/dataset/components/action-bar.tsx
@@ -33,7 +33,7 @@ export function ActionBar(props: Props) {
   const isNavigating = useIsNavigating().isNavigating;
 
   const { width }: Size = useWindowSize();
-  const iconSize = width && width < 480 ? '5' : '8';
+  const iconSize = width && width < 480 ? 20 : 32;
 
   const backButton = props.previousPage && props.previousPage?.link && (
     <Link href={props.previousPage?.link} className={styles.BackButton}>
diff --git a/apps/www/app/[locale]/dashboard/dataset/components/content.tsx b/apps/www/app/[locale]/dashboard/dataset/components/content.tsx
index cde34cdd..afcf3325 100644
--- a/apps/www/app/[locale]/dashboard/dataset/components/content.tsx
+++ b/apps/www/app/[locale]/dashboard/dataset/components/content.tsx
@@ -14,7 +14,7 @@ export function Content({ data }: { data?: any }) {
           source={Icons.addDataset}
           color="interactive"
           stroke={1}
-          size="20"
+          size={80}
         />
         <Text variant="headingSm" color="subdued">
           You have not added any datasets yet.
diff --git a/apps/www/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx b/apps/www/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx
index 29ca1d8c..38a42646 100644
--- a/apps/www/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx
+++ b/apps/www/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx
@@ -152,7 +152,7 @@ const RadioItem = ({
   return (
     <RadioCard {...props}>
       <div className={styles.RadioItem}>
-        <Icon source={icon} size="8" />
+        <Icon source={icon} size={32} />
         <div className={styles.RadioContent}>
           <Text
             variant="headingSm"