diff --git a/examples/district/app/[locale]/[district]/components/index.tsx b/examples/district/app/[locale]/[district]/components/index.tsx
index 162afc92..260a1204 100644
--- a/examples/district/app/[locale]/[district]/components/index.tsx
+++ b/examples/district/app/[locale]/[district]/components/index.tsx
@@ -40,7 +40,7 @@ export const BreadCrumb = ({
     <div className="md:container flex items-center gap-2 md:gap-4 bg-backgroundSolidDefault md:bg-transparent">
       <Link href={backUrl} className="mt-5 hidden md:block">
         <Text visuallyHidden>Go to State Page</Text>
-        <Icon filled source={Icons.leftFilled} size={24} />
+        <Icon source={Icons.leftFilled} size={24} />
       </Link>
       <div className="hidden md:block mt-4">
         <Breadcrumbs crumbs={crumbs} />
diff --git a/examples/district/app/[locale]/dashboard/components/dashboard-nav.tsx b/examples/district/app/[locale]/dashboard/components/dashboard-nav.tsx
index 0423c65b..2a1eb265 100644
--- a/examples/district/app/[locale]/dashboard/components/dashboard-nav.tsx
+++ b/examples/district/app/[locale]/dashboard/components/dashboard-nav.tsx
@@ -21,7 +21,7 @@ export function DashboardNav() {
       <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/examples/district/app/[locale]/dashboard/components/in-progress.tsx b/examples/district/app/[locale]/dashboard/components/in-progress.tsx
index 05cb73d8..9977cb82 100644
--- a/examples/district/app/[locale]/dashboard/components/in-progress.tsx
+++ b/examples/district/app/[locale]/dashboard/components/in-progress.tsx
@@ -6,7 +6,7 @@ import { Icon, Text } from 'opub-ui';
 export function InProgress() {
   return (
     <div className="flex flex-col h-full items-center justify-center gap-4">
-      <Icon source={Icons.construction} color="default" size="20" />
+      <Icon source={Icons.construction} color="default" size={80} />
       <Text variant="headingSm" color="subdued">
         This page is currently under construction.
       </Text>
diff --git a/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx
index 1b603796..4e207930 100644
--- a/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx
+++ b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx
@@ -30,7 +30,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/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx
index 1c5b01ba..30866291 100644
--- a/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx
+++ b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx
@@ -225,7 +225,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]">
@@ -239,7 +239,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/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx
index 681a702d..968a2988 100644
--- a/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx
+++ b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx
@@ -62,7 +62,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} color="default" size="8" />
+          <Icon source={Icons.back} color="default" size={32} />
           <Text visuallyHidden>Go to dataset listing page</Text>
         </Link>
 
diff --git a/examples/district/app/[locale]/dashboard/dataset/components/action-bar.tsx b/examples/district/app/[locale]/dashboard/dataset/components/action-bar.tsx
index 7afd3da9..2d23d1ec 100644
--- a/examples/district/app/[locale]/dashboard/dataset/components/action-bar.tsx
+++ b/examples/district/app/[locale]/dashboard/dataset/components/action-bar.tsx
@@ -32,7 +32,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/examples/district/app/[locale]/dashboard/dataset/components/content.tsx b/examples/district/app/[locale]/dashboard/dataset/components/content.tsx
index 9b92fa29..511bc2ba 100644
--- a/examples/district/app/[locale]/dashboard/dataset/components/content.tsx
+++ b/examples/district/app/[locale]/dashboard/dataset/components/content.tsx
@@ -13,7 +13,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/examples/district/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx b/examples/district/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx
index 1e463624..6455a8d9 100644
--- a/examples/district/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx
+++ b/examples/district/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx
@@ -151,7 +151,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"
diff --git a/packages/opub-ui/src/components/Collapsible/Collapsible.tsx b/packages/opub-ui/src/components/Collapsible/Collapsible.tsx
index 7879904e..45450c6a 100644
--- a/packages/opub-ui/src/components/Collapsible/Collapsible.tsx
+++ b/packages/opub-ui/src/components/Collapsible/Collapsible.tsx
@@ -24,7 +24,7 @@ export const Collapsible = ({
         <span className={styles.Text}>{collapsibleHeading}</span>
         <CollapsibleDemo.Trigger asChild>
           <button className={styles.IconButton}>
-            <Icon source={iconSource} size="6" />
+            <Icon source={iconSource} size={24} />
           </button>
         </CollapsibleDemo.Trigger>
       </div>
diff --git a/packages/opub-ui/src/components/DataTable/components/Toolbar/Toolbar.tsx b/packages/opub-ui/src/components/DataTable/components/Toolbar/Toolbar.tsx
index 366f173f..5a22d7cc 100644
--- a/packages/opub-ui/src/components/DataTable/components/Toolbar/Toolbar.tsx
+++ b/packages/opub-ui/src/components/DataTable/components/Toolbar/Toolbar.tsx
@@ -47,7 +47,7 @@ export function Toolbar<TData>({
             <Button
               size="slim"
               onClick={() => table.resetColumnFilters()}
-              icon={<Icon source={IconX} size="4" color="highlight" />}
+              icon={<Icon source={IconX} size={16} color="highlight" />}
               kind="tertiary"
             >
               Reset
diff --git a/packages/opub-ui/src/components/Icon/Icon.stories.tsx b/packages/opub-ui/src/components/Icon/Icon.stories.tsx
index b5027b48..b86f0976 100644
--- a/packages/opub-ui/src/components/Icon/Icon.stories.tsx
+++ b/packages/opub-ui/src/components/Icon/Icon.stories.tsx
@@ -72,7 +72,7 @@ export const Filled = () => (
   <div>
     <PropsVariationSection
       component={Icon}
-      common={{ source: IconSquareRoundedChevronLeftFilled, filled: true }}
+      common={{ source: IconSquareRoundedChevronLeftFilled }}
       xAxis={{
         default: {},
       }}
diff --git a/packages/opub-ui/src/components/Icon/Icon.tsx b/packages/opub-ui/src/components/Icon/Icon.tsx
index 279b14fa..78dc3325 100644
--- a/packages/opub-ui/src/components/Icon/Icon.tsx
+++ b/packages/opub-ui/src/components/Icon/Icon.tsx
@@ -3,7 +3,6 @@ import { variationName } from '../../utils/css';
 import { Text } from '../Text';
 import styles from './Icon.module.scss';
 import cx from 'classnames';
-import React from 'react';
 
 export function Icon({
   source,
@@ -14,7 +13,6 @@ export function Icon({
   stroke,
   className,
   noEvents,
-  filled,
 }: IconProps) {
   const classes = cx(
     styles.Icon,
@@ -25,11 +23,7 @@ export function Icon({
   );
 
   const SourceComponent: any = source;
-  const iconSize = size
-    ? typeof size === 'number'
-      ? size
-      : Number(size) * 4
-    : 20;
+  const iconSize = size ? size : 20;
 
   const style = {
     height: size ? size : iconSize,
diff --git a/packages/opub-ui/src/components/Tag/Tag.tsx b/packages/opub-ui/src/components/Tag/Tag.tsx
index 6380a0c6..c1333f84 100644
--- a/packages/opub-ui/src/components/Tag/Tag.tsx
+++ b/packages/opub-ui/src/components/Tag/Tag.tsx
@@ -60,7 +60,7 @@ export const Tag = React.forwardRef(
         onMouseUp={handleMouseUpByBlurring}
         disabled={disabled}
       >
-        <Icon source={IconX} size="4" />
+        <Icon source={IconX} />
       </button>
     ) : null;
 
diff --git a/packages/opub-ui/src/types/icon.tsx b/packages/opub-ui/src/types/icon.tsx
index 0c2671b0..165c8e21 100644
--- a/packages/opub-ui/src/types/icon.tsx
+++ b/packages/opub-ui/src/types/icon.tsx
@@ -1,4 +1,3 @@
-import { SpacingSpaceScale } from '../tokens';
 import { TablerIconsProps } from '@tabler/icons-react';
 
 export type Color =
@@ -32,13 +31,11 @@ export interface IconProps {
   /** Descriptive text to be read to screenreaders */
   accessibilityLabel?: string;
   /** size of the icon, use space tokens  */
-  size?: SpacingSpaceScale | number;
+  size?: number;
   /** stroke width  */
   stroke?: number;
   /** class name  */
   className?: string;
   /** Prevent click event */
   noEvents?: boolean;
-  /** fill the icon */
-  filled?: boolean;
 }