diff --git a/src/design-system/text/text.css.ts b/src/design-system/text/text.css.ts
index 7ff2b57..9e95d3f 100644
--- a/src/design-system/text/text.css.ts
+++ b/src/design-system/text/text.css.ts
@@ -44,6 +44,7 @@ export const typography = recipe({
       highlight: sx({ color: '$data_blue' }),
       success: sx({ color: '$data_green' }),
       error: sx({ color: '$data_pink' }),
+      warning: sx({ color: '$data_orange' }),
     },
   },
 });
diff --git a/src/design-system/text/text.stories.tsx b/src/design-system/text/text.stories.tsx
index 0b07cc7..6f29170 100644
--- a/src/design-system/text/text.stories.tsx
+++ b/src/design-system/text/text.stories.tsx
@@ -86,6 +86,7 @@ const colors: TypographyVariants['color'][] = [
   'error',
   'success',
   'accent',
+  'warning',
 ];
 
 export const Overview = (): JSX.Element => (
diff --git a/src/icons/WarningIconCircleComponent.tsx b/src/icons/WarningIconCircleComponent.tsx
new file mode 100644
index 0000000..a7d841e
--- /dev/null
+++ b/src/icons/WarningIconCircleComponent.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgWarningIconCirclecomponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M10 6v4m0 4h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0"
+    />
+  </svg>
+);
+export default SvgWarningIconCirclecomponent;
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 7d78af4..bd03b84 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -59,4 +59,5 @@ export { default as UserGroupGradientComponent } from './UserGroupGradientCompon
 export { default as UserGroupComponent } from './UserGroupComponent';
 export { default as VideoGradientComponent } from './VideoGradientComponent';
 export { default as WalletComponent } from './WalletComponent';
+export { default as WarningIconCircleComponent } from './WarningIconCircleComponent';
 export { default as WarningIconTriangleComponent } from './WarningIconTriangleComponent';
diff --git a/src/icons/raw/warning-icon-circle.component.svg b/src/icons/raw/warning-icon-circle.component.svg
new file mode 100644
index 0000000..33a13e5
--- /dev/null
+++ b/src/icons/raw/warning-icon-circle.component.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M10 6V10M10 14H10.01M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file