diff --git a/packages/ui-library/src/components/form-hint/index.ts b/packages/ui-library/src/components/form-hint/index.ts
new file mode 100644
index 000000000..4b2d2e702
--- /dev/null
+++ b/packages/ui-library/src/components/form-hint/index.ts
@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+
+type HintVariant = 'hint' | 'error';
+
+type FormHintType = {
+  message: string;
+  variant: HintVariant;
+};
+
+export const BlrFormHint = ({ message, variant }: FormHintType) => {
+  const classes = classMap({
+    [`${variant}`]: variant,
+  });
+
+  return html`
+    <span class="blr-form-hint ${classes}">
+      <blr-icon name="${variant === 'error' ? 'blr360Xl' : 'blr360Xl'}"></blr-icon>
+      <span>${message}</span>
+    </span>
+  `;
+};