diff --git a/packages/components/icon/src/Icon.doc.mdx b/packages/components/icon/src/Icon.doc.mdx
index 4d093525f..bdcfcfbb5 100644
--- a/packages/components/icon/src/Icon.doc.mdx
+++ b/packages/components/icon/src/Icon.doc.mdx
@@ -13,14 +13,14 @@ Accessible icon wrapper
 
 ## Install
 
-```
+```sh
 npm install @spark-ui/icon
 ```
 
 ## Import
 
-```
-import { Icon } from "@spark-ui/icon"
+```tsx
+import { Icon } from '@spark-ui/icon'
 ```
 
 ## Props
@@ -33,13 +33,13 @@ import { Icon } from "@spark-ui/icon"
 
 ## Sizes
 
-Use `size` prop to change the size of the icon.
+Use `size` prop to change the size of the icon. If `current` is set the current font size will be used.
 
 <Canvas of={IconStories.Sizes} />
 
 ## Colors
 
-Use a utility text color class to change the color of the icon.
+Use `intent` prop to change the color of the icon. If `current` is set the current font color will be used.
 
 <Canvas of={IconStories.Colors} />
 
diff --git a/packages/components/icon/src/Icon.stories.tsx b/packages/components/icon/src/Icon.stories.tsx
index a4114622e..ff87b38a2 100644
--- a/packages/components/icon/src/Icon.stories.tsx
+++ b/packages/components/icon/src/Icon.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react'
+import { ComponentProps } from 'react'
 
 import { Icon } from '.'
 
@@ -17,7 +18,7 @@ export const Default: StoryFn = _args => (
   </Icon>
 )
 
-const sizes = ['sm', 'md', 'lg'] as const
+const sizes: ComponentProps<typeof Icon>['size'][] = ['sm', 'md', 'lg']
 
 export const Sizes: StoryFn = _args => (
   <>
@@ -29,19 +30,37 @@ export const Sizes: StoryFn = _args => (
           </svg>
         </Icon>
       ))}
+
+      <Icon size="current" className="text-display-1">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8.91958 20.1667C8.73748 20.1667 8.56045 20.1323 8.38847 20.0635C8.21649 19.9947 8.05969 19.8915 7.91806 19.7539L2.42489 14.4176C2.14163 14.1425 2 13.8083 2 13.4152C2 13.0222 2.14163 12.688 2.42489 12.4129C2.70814 12.1377 3.04704 12.0001 3.44158 12.0001C3.83612 12.0001 4.18513 12.1377 4.48862 12.4129L8.91958 16.7173L19.5417 6.42797C19.825 6.1528 20.1639 6.0103 20.5584 6.00048C20.953 5.99065 21.2919 6.13315 21.5751 6.42797C21.8584 6.70313 22 7.03727 22 7.43036C22 7.82346 21.8584 8.15759 21.5751 8.43276L9.92109 19.7539C9.77946 19.8915 9.62266 19.9947 9.45068 20.0635C9.27871 20.1323 9.10167 20.1667 8.91958 20.1667Z" />
+        </svg>
+      </Icon>
     </div>
   </>
 )
 
+const intents: ComponentProps<typeof Icon>['intent'][] = [
+  'primary',
+  'secondary',
+  'success',
+  'alert',
+  'error',
+  'info',
+  'neutral',
+]
+
 export const Colors: StoryFn = _args => (
   <div className="gap-lg flex">
-    <Icon className="text-primary">
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8.91958 20.1667C8.73748 20.1667 8.56045 20.1323 8.38847 20.0635C8.21649 19.9947 8.05969 19.8915 7.91806 19.7539L2.42489 14.4176C2.14163 14.1425 2 13.8083 2 13.4152C2 13.0222 2.14163 12.688 2.42489 12.4129C2.70814 12.1377 3.04704 12.0001 3.44158 12.0001C3.83612 12.0001 4.18513 12.1377 4.48862 12.4129L8.91958 16.7173L19.5417 6.42797C19.825 6.1528 20.1639 6.0103 20.5584 6.00048C20.953 5.99065 21.2919 6.13315 21.5751 6.42797C21.8584 6.70313 22 7.03727 22 7.43036C22 7.82346 21.8584 8.15759 21.5751 8.43276L9.92109 19.7539C9.77946 19.8915 9.62266 19.9947 9.45068 20.0635C9.27871 20.1323 9.10167 20.1667 8.91958 20.1667Z" />
-      </svg>
-    </Icon>
+    {intents.map(intent => (
+      <Icon intent={intent}>
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8.91958 20.1667C8.73748 20.1667 8.56045 20.1323 8.38847 20.0635C8.21649 19.9947 8.05969 19.8915 7.91806 19.7539L2.42489 14.4176C2.14163 14.1425 2 13.8083 2 13.4152C2 13.0222 2.14163 12.688 2.42489 12.4129C2.70814 12.1377 3.04704 12.0001 3.44158 12.0001C3.83612 12.0001 4.18513 12.1377 4.48862 12.4129L8.91958 16.7173L19.5417 6.42797C19.825 6.1528 20.1639 6.0103 20.5584 6.00048C20.953 5.99065 21.2919 6.13315 21.5751 6.42797C21.8584 6.70313 22 7.03727 22 7.43036C22 7.82346 21.8584 8.15759 21.5751 8.43276L9.92109 19.7539C9.77946 19.8915 9.62266 19.9947 9.45068 20.0635C9.27871 20.1323 9.10167 20.1667 8.91958 20.1667Z" />
+        </svg>
+      </Icon>
+    ))}
 
-    <Icon className="text-secondary">
+    <Icon intent="current" className="text-secondary">
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.91958 20.1667C8.73748 20.1667 8.56045 20.1323 8.38847 20.0635C8.21649 19.9947 8.05969 19.8915 7.91806 19.7539L2.42489 14.4176C2.14163 14.1425 2 13.8083 2 13.4152C2 13.0222 2.14163 12.688 2.42489 12.4129C2.70814 12.1377 3.04704 12.0001 3.44158 12.0001C3.83612 12.0001 4.18513 12.1377 4.48862 12.4129L8.91958 16.7173L19.5417 6.42797C19.825 6.1528 20.1639 6.0103 20.5584 6.00048C20.953 5.99065 21.2919 6.13315 21.5751 6.42797C21.8584 6.70313 22 7.03727 22 7.43036C22 7.82346 21.8584 8.15759 21.5751 8.43276L9.92109 19.7539C9.77946 19.8915 9.62266 19.9947 9.45068 20.0635C9.27871 20.1323 9.10167 20.1667 8.91958 20.1667Z" />
       </svg>
diff --git a/packages/components/icon/src/Icon.tsx b/packages/components/icon/src/Icon.tsx
index b25d2b14a..69a4001d6 100644
--- a/packages/components/icon/src/Icon.tsx
+++ b/packages/components/icon/src/Icon.tsx
@@ -15,13 +15,20 @@ export interface IconProps extends IconVariantsProps, React.SVGProps<SVGElement>
   label?: string
 }
 
-export function Icon({ label, className, size = 'md', children, ...others }: IconProps) {
+export function Icon({
+  label,
+  className,
+  size = 'current',
+  intent = 'current',
+  children,
+  ...others
+}: IconProps) {
   const child = React.Children.only(children)
 
   return (
     <>
       {React.cloneElement(child as React.ReactElement, {
-        className: iconVariants({ className, size }),
+        className: iconVariants({ className, size, intent }),
         'aria-hidden': 'true',
         focusable: 'false',
         ...others,
diff --git a/packages/components/icon/src/Icon.variants.tsx b/packages/components/icon/src/Icon.variants.tsx
index 0c8491270..56c360f51 100644
--- a/packages/components/icon/src/Icon.variants.tsx
+++ b/packages/components/icon/src/Icon.variants.tsx
@@ -3,7 +3,18 @@ import { cva, VariantProps } from 'class-variance-authority'
 
 export const iconVariants = cva(['fill-current'], {
   variants: {
+    intent: makeVariants<'intent'>({
+      current: ['text-current'],
+      primary: ['text-primary'],
+      secondary: ['text-secondary'],
+      success: ['text-success'],
+      alert: ['text-alert'],
+      error: ['text-error'],
+      info: ['text-info'],
+      neutral: ['text-neutral'],
+    }),
     size: makeVariants<'size'>({
+      current: ['w-current', 'h-current'],
       sm: ['w-sz-16', 'h-sz-16'],
       md: ['w-sz-24', 'h-sz-24'],
       lg: ['w-sz-32', 'h-sz-32'],