diff --git a/packages/werewolf-ui/src/examples/cards.tsx b/packages/werewolf-ui/src/examples/cards.tsx
index 26fed91..235f30a 100644
--- a/packages/werewolf-ui/src/examples/cards.tsx
+++ b/packages/werewolf-ui/src/examples/cards.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/lib/button"
 import { Input } from "@/lib/input"
 import { Select } from "@/lib/select"
 import { Grid } from "@/lib/grid"
-import { Break } from "@/lib/break"
+import { Divider } from "@/lib/divider"
 
 export const Cards = () => {
   return (
@@ -93,15 +93,15 @@ CreateAccount = Card(
         <h5>Enter your email below to create your account</h5>
         <HStack h="evenly" gap="4">
           <Button variant="outline" class="grow">
-            <Icon name="Github" />
+            <Icon class="mr-1" name="Github" />
             Github
           </Button>
           <Button variant="outline" class="grow">
-            <Icon name="Mail" />
+            <Icon class="mr-1" name="Mail" />
             Google
           </Button>
         </HStack>
-        <Break>OR CONTINUE WITH</Break>
+        <Divider>OR CONTINUE WITH</Divider>
         <Input id="email" placeholder="m@example.com">
           Email
         </Input>
@@ -208,11 +208,11 @@ TeamCard = Card(
         </div>
       </HStack>
       <HStack h="between" gap="3" v="center">
-        <Icon name="MapPin" size={16} />
+        <Icon name="MapPin" size={6} />
         <p class="grow">Alexandria, VA</p>
-        <IconLink name="Mail" size={16} />
-        <IconLink name="Linkedin" size={16} />
-        <IconLink name="Github" size={16} />
+        <IconLink name="Mail" size={6} />
+        <IconLink name="Linkedin" size={6} />
+        <IconLink name="Github" size={6} />
       </HStack>
     </VStack>
   )
@@ -252,9 +252,9 @@ section_content =(('bell','Everything',"Email digest, mentions & all activity.")
         <Input value="http://example.com/link/to/document" class="grow" />
         <Button variant="outline">Copy link</Button>
       </HStack>
-      <Break>
-        <Icon name="Circle" size={16} class="stroke-gray-300" />
-      </Break>
+      <Divider>
+        <Icon name="Circle" size="3" class="stroke-gray-300" />
+      </Divider>
       <h4 class="font-bold">People with access</h4>
       {teamMembers.map((member) => (
         <HStack h="between" gap="3" class="w-full p-2 hover:bg-gray-50 rounded">
@@ -303,7 +303,7 @@ Notifications = Card(
       <h4>Choose what you want to be notified about.</h4>
       {sectionContent.map((item) => (
         <HStack gap="3" v="center">
-          <Icon name={item.icon} size={16} />
+          <Icon name={item.icon} size={8} />
           <div class="flex-1">
             <p class="text-sm">{item.title}</p>
             <p class="text-sm text-gray-400">{item.description}</p>
diff --git a/packages/werewolf-ui/src/index.css b/packages/werewolf-ui/src/index.css
index a71eb94..1b7545b 100644
--- a/packages/werewolf-ui/src/index.css
+++ b/packages/werewolf-ui/src/index.css
@@ -1,5 +1,24 @@
 @import "tailwindcss";
 
+@utility spacing {
+  .w-*: width: *;
+  .h-*: height: *;
+  .p-*: padding: *;
+  .pt-*: padding-top: *;
+  .pb-*: padding-bottom: *;
+  .pl-*: padding-left: *;
+  .pr-*: padding-right: *;
+  .px-*: padding-left: *; padding-right: *;
+  .py-*: padding-top: *; padding-bottom: *;
+  .m-*: margin: *;
+  .mt-*: margin-top: *;
+  .mb-*: margin-bottom: *;
+  .ml-*: margin-left: *;
+  .mr-*: margin-right: *;
+  .mx-*: margin-left: *; margin-right: *;
+  .my-*: margin-top: *; margin-bottom: *;
+}
+
 @theme {
   --color-background: #ffffff;
   --color-foreground: #09090b;
diff --git a/packages/werewolf-ui/src/lib/break.tsx b/packages/werewolf-ui/src/lib/divider.tsx
similarity index 75%
rename from packages/werewolf-ui/src/lib/break.tsx
rename to packages/werewolf-ui/src/lib/divider.tsx
index b1c2e5b..787e52e 100644
--- a/packages/werewolf-ui/src/lib/break.tsx
+++ b/packages/werewolf-ui/src/lib/divider.tsx
@@ -1,11 +1,11 @@
 import "hono/jsx"
 import { FC, PropsWithChildren } from "hono/jsx"
 
-type BreakProps = PropsWithChildren & {
+type DividerProps = PropsWithChildren & {
   class?: string
 }
 
-export const Break: FC<BreakProps> = ({ children, class: className }) => {
+export const Divider: FC<DividerProps> = ({ children, class: className }) => {
   return (
     <div class={`flex items-center my-4 ${className || ""}`}>
       <div class="flex-1 border-t border-gray-300"></div>
@@ -22,18 +22,18 @@ export const Break: FC<BreakProps> = ({ children, class: className }) => {
 export const Test = () => {
   return (
     <div class="p-4 space-y-8 max-w-md">
-      <h2 class="text-lg font-bold mb-4">Break Examples</h2>
+      <h2 class="text-lg font-bold mb-4">Divider Examples</h2>
 
       <div>
         <p>Would you like to continue</p>
-        <Break>OR WOULD YOU LIKE TO</Break>
+        <Divider>OR WOULD YOU LIKE TO</Divider>
         <p>Submit to certain dealth</p>
       </div>
 
       {/* Just a line */}
       <div>
         <p>Look a line 👇</p>
-        <Break />
+        <Divider />
         <p>So cool, so straight!</p>
       </div>
     </div>
diff --git a/packages/werewolf-ui/src/lib/icon.tsx b/packages/werewolf-ui/src/lib/icon.tsx
index 9066be3..8d5e5e0 100644
--- a/packages/werewolf-ui/src/lib/icon.tsx
+++ b/packages/werewolf-ui/src/lib/icon.tsx
@@ -1,3 +1,4 @@
+import { TailwindSize } from "@/types"
 import "hono/jsx"
 import { FC } from "hono/jsx"
 import * as icons from "lucide-static"
@@ -6,7 +7,7 @@ export type IconName = keyof typeof icons
 
 type IconProps = {
   name: IconName
-  size?: number | string
+  size?: TailwindSize
   class?: string
 }
 
@@ -16,7 +17,7 @@ type IconLinkProps = IconProps & {
 }
 
 export const Icon: FC<IconProps> = (props) => {
-  const { name, size = 24, class: className } = props
+  const { name, size = 6, class: className } = props
 
   const iconSvg = icons[name]
 
@@ -24,17 +25,16 @@ export const Icon: FC<IconProps> = (props) => {
     throw new Error(`Icon "${name}" not found in Lucide icons`)
   }
 
+  // Convert size to Tailwind classes if provided
+  const sizeClass = size ? getSizeClass(size) : ""
+  const allClasses = [sizeClass, className].filter(Boolean).join(" ")
+
   // Modify the SVG string to include our custom attributes
   const modifiedSvg = iconSvg
-    .replace(/width="[^"]*"/, `width="${size}"`)
-    .replace(/height="[^"]*"/, `height="${size}"`)
-    .replace(/class="[^"]*"/, className ? `class="${className}"` : "")
-    .replace(
-      /<svg([^>]*)>/,
-      `<svg$1 style="display: block; flex-shrink: 0;"${
-        className && !iconSvg.includes("class=") ? ` class="${className}"` : ""
-      }>`
-    )
+    .replace(/width="[^"]*"/, "")
+    .replace(/height="[^"]*"/, "")
+    .replace(/class="[^"]*"/, "")
+    .replace(/<svg([^>]*)>/, `<svg$1 style="display: block; flex-shrink: 0;" class="${allClasses}">`)
 
   return <div dangerouslySetInnerHTML={{ __html: modifiedSvg }} />
 }
@@ -76,23 +76,23 @@ export const Test = () => {
         <h2 class="text-xl font-bold mb-4">Styling with CSS Classes</h2>
         <div class="grid grid-cols-5 gap-6">
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Star" size={24} />
+            <Icon name="Star" size={12} />
             <p class="text-sm">Default</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Star" size={24} class="text-blue-500" />
+            <Icon name="Star" size={12} class="text-blue-500" />
             <p class="text-sm">Blue Color</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Star" size={24} class="stroke-1" />
+            <Icon name="Star" size={12} class="stroke-1" />
             <p class="text-sm">Thin Stroke</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Star" size={24} class="text-yellow-400 stroke-0 fill-current" />
+            <Icon name="Star" size={12} class="text-yellow-400 stroke-0 fill-current" />
             <p class="text-sm">Filled</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Star" size={24} class="text-purple-500 hover:text-purple-700 transition-colors" />
+            <Icon name="Star" size={12} class="text-purple-500 hover:text-purple-700 transition-colors" />
             <p class="text-sm">Hover Effect</p>
           </div>
         </div>
@@ -103,19 +103,19 @@ export const Test = () => {
         <h2 class="text-xl font-bold mb-4">Advanced Styling</h2>
         <div class="grid grid-cols-4 gap-6">
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Heart" size={24} class="text-red-500 stroke-0 fill-current" />
+            <Icon name="Heart" size={12} class="text-red-500 stroke-0 fill-current" />
             <p class="text-sm">Filled Heart</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Shield" size={24} class="text-green-600 stroke-2" />
+            <Icon name="Shield" size={12} class="text-green-600 stroke-2" />
             <p class="text-sm">Thick Stroke</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Sun" size={24} class="text-yellow-500 animate-spin" />
+            <Icon name="Sun" size={12} class="text-yellow-500 animate-spin" />
             <p class="text-sm">Animated</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <Icon name="Zap" size={24} class="text-blue-400 drop-shadow-lg" />
+            <Icon name="Zap" size={12} class="text-blue-400 drop-shadow-lg" />
             <p class="text-sm">Drop Shadow</p>
           </div>
         </div>
@@ -128,19 +128,19 @@ export const Test = () => {
         <h2 class="text-xl font-bold mb-4">Icon Links</h2>
         <div class="flex gap-6">
           <div class="flex flex-col items-center space-y-2">
-            <IconLink name="Home" size={32} href="/" />
+            <IconLink name="Home" size={8} href="/" />
             <p class="text-sm">Home Link</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <IconLink name="ExternalLink" size={32} href="https://example.com" target="_blank" />
+            <IconLink name="ExternalLink" size={8} href="https://example.com" target="_blank" />
             <p class="text-sm">External Link</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <IconLink name="Mail" size={32} href="mailto:hello@example.com" />
+            <IconLink name="Mail" size={8} href="mailto:hello@example.com" />
             <p class="text-sm">Email Link</p>
           </div>
           <div class="flex flex-col items-center space-y-2">
-            <IconLink name="Phone" size={32} href="tel:+1234567890" />
+            <IconLink name="Phone" size={8} href="tel:+1234567890" />
             <p class="text-sm">Phone Link</p>
           </div>
         </div>
@@ -153,7 +153,7 @@ export const Test = () => {
           <div class="flex flex-col items-center space-y-2">
             <IconLink
               name="Download"
-              size={32}
+              size={8}
               href="#"
               class="bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors"
             />
@@ -162,7 +162,7 @@ export const Test = () => {
           <div class="flex flex-col items-center space-y-2">
             <IconLink
               name="Settings"
-              size={32}
+              size={8}
               href="#"
               class="border-2 border-gray-300 p-2 rounded-full hover:border-gray-500 hover:bg-gray-50 transition-all"
             />
@@ -171,7 +171,7 @@ export const Test = () => {
           <div class="flex flex-col items-center space-y-2">
             <IconLink
               name="Heart"
-              size={32}
+              size={8}
               href="#"
               class="text-red-500 hover:scale-125 transition-transform stroke-[3]"
             />
@@ -180,7 +180,7 @@ export const Test = () => {
           <div class="flex flex-col items-center space-y-2">
             <IconLink
               name="Star"
-              size={32}
+              size={8}
               href="#"
               class="text-yellow-400 fill-current stroke-1 hover:rotate-12 transition-transform"
             />
@@ -192,7 +192,10 @@ export const Test = () => {
   )
 }
 
-const getIconContent = (svgString: string): string => {
-  const match = svgString.match(/<svg[^>]*>(.*?)<\/svg>/s)
-  return match ? match[1] : ""
+const getSizeClass = (size: TailwindSize): string => {
+  return `size-${size}`
 }
+
+const tailwindSafeWidthStrings = [ "w-0", "w-0.5", "w-1", "w-1.5", "w-2", "w-2.5", "w-3", "w-3.5", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9", "w-10", "w-11", "w-12", "w-14", "w-16", "w-20", "w-24", "w-28", "w-32", "w-36", "w-40", "w-44", "w-48", "w-52", "w-56", "w-60", "w-64", "w-72", "w-80", "w-96" ] // prettier-ignore
+const tailwindSafeHeightStrings = [ "h-0", "h-0.5", "h-1", "h-1.5", "h-2", "h-2.5", "h-3", "h-3.5", "h-4", "h-5", "h-6", "h-7", "h-8", "h-9", "h-10", "h-11", "h-12", "h-14", "h-16", "h-20", "h-24", "h-28", "h-32", "h-36", "h-40", "h-44", "h-48", "h-52", "h-56", "h-60", "h-64", "h-72", "h-80", "h-96", ] // prettier-ignore
+const tailwindSafeSizeStrings = [ "size-0", "size-0.5", "size-1", "size-1.5", "size-2", "size-2.5", "size-3", "size-3.5", "size-4", "size-5", "size-6", "size-7", "size-8", "size-9", "size-10", "size-11", "size-12", "size-14", "size-16", "size-20", "size-24", "size-28", "size-32", "size-36", "size-40", "size-44", "size-48", "size-52", "size-56", "size-60", "size-64", "size-72", "size-80", "size-96", ] // prettier-ignore
diff --git a/packages/werewolf-ui/src/lib/linebreak.tsx b/packages/werewolf-ui/src/lib/linebreak.tsx
deleted file mode 100644
index 0250d33..0000000
--- a/packages/werewolf-ui/src/lib/linebreak.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import "hono/jsx"
-import { FC, PropsWithChildren } from "hono/jsx"
-
-type BreakProps = PropsWithChildren & {
-  class?: string
-}
-
-export const Break: FC<BreakProps> = ({ children, class: className }) => {
-  return (
-    <div class={`flex items-center my-4 ${className || ""}`}>
-      <div class="flex-1 border-t border-gray-300"></div>
-      {children && (
-        <>
-          <span class="px-3 text-sm text-gray-500 bg-white">{children}</span>
-          <div class="flex-1 border-t border-gray-300"></div>
-        </>
-      )}
-    </div>
-  )
-}
-
-export const Test = () => {
-  return (
-    <div class="p-4 space-y-8 max-w-md">
-      <h2 class="text-lg font-bold mb-4">Break Examples</h2>
-
-      {/* With text */}
-      <div>
-        <p>Would you like to sign in?</p>
-        <Break>OR DO YOU SUBMIT TO</Break>
-        <p>Certain death</p>
-      </div>
-
-      {/* Simple divider */}
-      <div>
-        <p>Payment methods</p>
-        <Break />
-        <p>Billing information</p>
-      </div>
-
-      {/* Different text examples */}
-      <div>
-        <p>Existing user?</p>
-        <Break>OR</Break>
-        <p>Create new account</p>
-      </div>
-
-      <div>
-        <p>Personal info</p>
-        <Break>STEP 2</Break>
-        <p>Payment details</p>
-      </div>
-    </div>
-  )
-}
diff --git a/packages/werewolf-ui/src/routes/tests/[test].tsx b/packages/werewolf-ui/src/routes/tests/[test].tsx
index 254995d..8c09168 100644
--- a/packages/werewolf-ui/src/routes/tests/[test].tsx
+++ b/packages/werewolf-ui/src/routes/tests/[test].tsx
@@ -1,25 +1,12 @@
 import { LoaderProps } from "@workshop/nano-remix"
 import "@/index.css"
-/*
-break
-button
-grid
-icon
-image
-input
-linebreak
-placeholder
-select
-stack
-*/
 import { Test as AvatarTest } from "@/lib/avatar"
-import { Test as BreakTest } from "@/lib/break"
+import { Test as DividerTest } from "@/lib/divider"
 import { Test as ButtonTest } from "@/lib/button"
 import { Test as GridTest } from "@/lib/grid"
 import { Test as IconTest } from "@/lib/icon"
 import { Test as ImageTest } from "@/lib/image"
 import { Test as InputTest } from "@/lib/input"
-import { Test as LinebreakTest } from "@/lib/linebreak"
 import { Test as PlaceholderTest } from "@/lib/placeholder"
 import { Test as SelectTest } from "@/lib/select"
 import { Test as StackTest } from "@/lib/stack"
@@ -39,8 +26,8 @@ export default function Test({ testName }: LoaderProps<typeof loader>) {
 
   if (testName === "avatar") {
     component = <AvatarTest />
-  } else if (testName === "break") {
-    component = <BreakTest />
+  } else if (testName === "divider") {
+    component = <DividerTest />
   } else if (testName === "button") {
     component = <ButtonTest />
   } else if (testName === "grid") {
@@ -51,8 +38,6 @@ export default function Test({ testName }: LoaderProps<typeof loader>) {
     component = <ImageTest />
   } else if (testName === "input") {
     component = <InputTest />
-  } else if (testName === "linebreak") {
-    component = <LinebreakTest />
   } else if (testName === "placeholder") {
     component = <PlaceholderTest />
   } else if (testName === "select") {
diff --git a/packages/werewolf-ui/src/types.ts b/packages/werewolf-ui/src/types.ts
index 8c10404..9b4a692 100644
--- a/packages/werewolf-ui/src/types.ts
+++ b/packages/werewolf-ui/src/types.ts
@@ -1,8 +1,12 @@
 type TailwindSizeNumber =
   | 0
+  | 0.5
   | 1
+  | 1.5
   | 2
+  | 2.5
   | 3
+  | 3.5
   | 4
   | 5
   | 6