diff --git a/README.md b/README.md
index d8023423d3..efc98d651d 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@ export default function WaitlistForm() {
       <Text name="firstname" label="What's your first name?" validation="required" />
       <Text name="lastname" label="What's your last name?" />
       <Textarea name="about" label="About you" help="Please keep it short" />
-      <Submit label="Submit" />
+      <Submit name="submit" label="Submit" />
     </Form>
   );
 }
diff --git a/apps/formbricks-com/lib/docsNavigation.ts b/apps/formbricks-com/lib/docsNavigation.ts
index df722eaf82..cc73c934b1 100644
--- a/apps/formbricks-com/lib/docsNavigation.ts
+++ b/apps/formbricks-com/lib/docsNavigation.ts
@@ -87,6 +87,10 @@ const navigation = [
         title: "Style with Tailwind",
         href: "/docs/react-form-library/style-tailwind",
       },
+      {
+        title: "Icons",
+        href: "/docs/react-form-library/icons",
+      },
     ],
   },
   {
diff --git a/apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx
index 30587e9c85..8a797df627 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx
@@ -66,7 +66,7 @@ export default function WaitlistForm() {
       <Text name="firstname" label="What's your first name?" validation="required" />
       <Text name="lastname" label="What's your last name?" />
       <Textarea name="about" label="About you" help="Please keep it short" />
-      <Submit label="Submit" />
+      <Submit name="submit" label="Submit" />
     </Form>
   );
 }
diff --git a/apps/formbricks-com/pages/docs/react-form-library/icons/find-icon-name-react-library-form-builder.PNG b/apps/formbricks-com/pages/docs/react-form-library/icons/find-icon-name-react-library-form-builder.PNG
new file mode 100644
index 0000000000..7012fc9f03
Binary files /dev/null and b/apps/formbricks-com/pages/docs/react-form-library/icons/find-icon-name-react-library-form-builder.PNG differ
diff --git a/apps/formbricks-com/pages/docs/react-form-library/icons/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/icons/index.mdx
new file mode 100644
index 0000000000..678a8a7eab
--- /dev/null
+++ b/apps/formbricks-com/pages/docs/react-form-library/icons/index.mdx
@@ -0,0 +1,74 @@
+import { Layout } from "@/components/docs/Layout";
+import { Callout } from "@/components/shared/Callout";
+import Image from "next/image";
+import FindIcon from "./find-icon-name-react-library-form-builder.png";
+
+export const meta = {
+  title: "Icons - Formbricks React Form Library",
+};
+
+Icons give forms and surveys not only a professional look & feel, they increase the usability. Formbricks React supports icons in several locations throughout the form.
+
+### Choosing an icon library
+
+In the first step you have to decide which library you like. We like:
+
+- [HeroIcons](https://heroicons.com/),
+- [FeatherIcons](https://feathericons.com/) (beautiful but limited),
+- [React Icons](https://react-icons.github.io/react-icons/). (huge collection)
+
+### Installing library package
+
+Once you picked yours you have to add it to your repository, e.g. HeroIcons:
+
+```jsx
+npm install @heroicons/react
+```
+
+### Importing icons
+
+Next you have to import the icons you want to use them in your form:
+
+```jsx
+import { PlusIcon } from "@heroicons/react/24/outline";
+
+# or several at once
+
+import { ChatBubbleOvalLeftEllipsisIcon, EnvelopeIcon } from "@heroicons/react/24/solid";
+
+```
+
+If you paid close attention you noticed that we imported `PlusIcon` from the `outline` folder and the latter two from the `solid` folder. You can find the name of the icon you'd like to import on the respective website:
+
+<Image
+  src={FindIcon}
+  alt="Illustration of error message and validation handling in best form react lib"
+  className="rounded-lg"
+/>
+
+Now you're ready to use them!
+
+### Using icons
+
+At this early stage, we only support icons in the submit button. You add it **before** and **after** the button text.
+
+Before the button text:
+
+```jsx
+<Submit label="Submit" PrefixIcon={EnvelopeIcon} />
+```
+
+After the button text:
+
+```jsx
+<Submit label="Submit" SuffixIcon={PlusIcon} />
+```
+
+### Props & Attributes
+
+| Prop       | Type | Default | Description                 |
+| ---------- | ---- | ------- | --------------------------- |
+| PrefixIcon | SVG  | -       | Icon displayed before label |
+| SuffixIcon | SVG  | -       | Icon displayed after label  |
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-submit/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-submit/index.mdx
index 4d8a4f56c3..c9449ff19e 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-submit/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-submit/index.mdx
@@ -9,11 +9,19 @@ export const meta = {
 The submit button component is very straight forward:
 
 ```jsx
-<Submit label="Submit" />
+<Submit name="submit" label="Submit" />
 ```
 
 To keep it working make sure that there is **only one Submit button** per form.
 
+### Adding an icon
+
+You can add icons **before and after** the button text:
+
+```jsx
+<Submit label="Submit" PrefixIcon={BeakerIcon} SuffixIcon={BeakerIcon} />
+```
+
 ### Props & Attributes
 
 | Prop       | Type | Default | Description                 |
diff --git a/apps/formbricks-com/pages/docs/react-form-library/introduction/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/introduction/index.mdx
index 5702797145..b32fad298c 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/introduction/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/introduction/index.mdx
@@ -4,16 +4,14 @@ import Image from "next/image";
 import StyleClasses from "./sampleform.png";
 
 export const meta = {
-  title: "React Form Library",
+  title: "Building React forms just got easy",
 };
 
-## Building React forms has never been quicker.
-
 Every developer works with forms, few like their experience. Building Forms, especially in React, can be pretty annoying. State management, validation, form components, accessibility, internationalization and performance are all things you have to deal with, but don't really want to.
 
-We make building - and maintaining - forms easier than ever in the React world.
+We make building - and maintaining - forms easier than ever in the world of React.
 
-### Formbricks React Example:
+### Example
 
 ```jsx
 import { Form, Text, Email, Checkbox, Submit } from "@formbricks/react";
@@ -52,7 +50,7 @@ export default function WaitlistForm() {
 
 ### Why is this easier already?
 
-- One easy to use syntax for input types including labels, validation and help texts
+- One easy to use syntax for all input types
 - HTML & non-HTML input types available out of the box
 - Easily maintainable with component-based approach
 - All characteristics adjustable via props
@@ -64,8 +62,12 @@ export default function WaitlistForm() {
 - Multi-page forms
 - Accessibility
 - Internationalization
-- Form Templates
+- Form Templates (content & styles)
 
-The Formbricks React Library uses [React Hook Form](https://react-hook-form.com/) to benefit from their easy to use data handling and performance optimizations. The easy to use approach was inspired by the [FormKit for Vue.js](https://formkit.com/) Library.
+### Shoutout
+
+The Formbricks React Library is built on top of [React Hook Form](https://react-hook-form.com/) to make from their data handling and performance optimizations.
+
+The developer experience is inspired by the great [FormKit for Vue.js](https://formkit.com/) Library.
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
diff --git a/apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx
index eb1f647311..58d6eb3912 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx
@@ -16,16 +16,19 @@ We love Tailwind! This is why Formbricks React natively supports Tailwind. All y
 
 Here are all the props you can use to extend the styling of the different form elements:
 
-| CSS class           | Prop              | Content                                             |
-| ------------------- | ----------------- | --------------------------------------------------- |
-| formbricks-form     | formClassName     | The wrapper around the complete form                |
-| formbricks-outer    | outerClassName    | The wrapper around label, input field and help text |
-| formbricks-help     | helpClassName     | The help text                                       |
-| formbricks-wrapper  | wrapperClassName  | The wrapper around the label and the input field    |
-| formbricks-label    | labelClassName    | The label                                           |
-| formbricks-inner    | innerClassName    | The input field                                     |
-| formbricks-input    | inputClassName    | The input                                           |
-| formbricks-message  | messageClassName  | The validation / error message itself               |
-| formbricks-messages | messagesClassName | Wrapper around all error messages                   |
+| CSS class           | Prop              | Content                                                      |
+| ------------------- | ----------------- | ------------------------------------------------------------ |
+| formbricks-form     | formClassName     | The wrapper around the complete form                         |
+| formbricks-outer    | outerClassName    | The wrapper around label, input field and help text          |
+| formbricks-legend   | legendClassName   | The label of the options group (only radio & checkbox input) |
+| formbricks-help     | helpClassName     | The help text                                                |
+| formbricks-options  | optionsClassName  | A wrapper around all options (only radio & checkbox input)   |
+| formbricks-option   | optionClassName   | A wrapper around each option (only radio & checkbox input)   |
+| formbricks-wrapper  | wrapperClassName  | The wrapper around the label and the input field             |
+| formbricks-label    | labelClassName    | The label                                                    |
+| formbricks-inner    | innerClassName    | The input field                                              |
+| formbricks-input    | inputClassName    | The input                                                    |
+| formbricks-message  | messageClassName  | The validation / error message itself                        |
+| formbricks-messages | messagesClassName | Wrapper around all error messages                            |
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
diff --git a/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
index 436d50986a..da09002932 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
@@ -12,7 +12,7 @@ Validation prevents users from submitting missing of false data.
 
 To add a validation to your inputs, add the `validation` prop and write the rules in string syntax. Rules are divided by a pipe (`|`), e.g.:
 
-```bash
+```jsx
 <Text name="age" label="What's your age?" validation="required|number|min:0|max:100" />
 ```
 
diff --git a/apps/formbricks-com/pages/docs/react-form-library/work-with-components/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/work-with-components/index.mdx
index f25f61d636..0d668728bf 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/work-with-components/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/work-with-components/index.mdx
@@ -28,9 +28,16 @@ All imported components will be included in the production build - even when you
 | Component      | Details             | Use                                         |
 | -------------- | ------------------- | ------------------------------------------- |
 | `<Form />`     | Form Wrapper        | Handles the onSubmit action, wraps the form |
+| `<Email />`    | HTML Email Input    | Email input                                 |
+| `<Number />`   | HTML Number Input   | Integer or decimal value                    |
+| `<Password />` | HTML Password Input | Strings of all kind                         |
+| `<Phone />`    | HTML Tel Input      | Phone numbers                               |
+| `<Radio />`    | Radio Buttons       | Single choice                               |
+| `<Search />`   | HTML Search Input   | Search terms                                |
+| `<Submit />`   | Submit Button       | Submits the form                            |
 | `<Text />`     | HTML Text Input     | Single line of text input                   |
 | `<Textarea />` | HTML Textarea Input | Multiple lines of text                      |
-| `<Submit />`   | Submit Button       | Submits the form                            |
+| `<URL />`      | HTML URL Input      | Submits the form                            |
 
 ---
 
@@ -38,13 +45,12 @@ All imported components will be included in the production build - even when you
 
 | Component          | Details                       | Use                     |
 | ------------------ | ----------------------------- | ----------------------- |
-| `<Radio />`        | Radio Buttons                 | Single choice           |
-| `<Checkbox />`     | Checkboxes                    | Multiple choice         |
 | `<Rating />`       | Star-Rating                   | Simple rating in steps  |
 | `<Nps />`          | Nps Score                     | Evaluate experience     |
 | `<Color />`        | Color-Picker                  | Let user choose a color |
 | `<Slider />`       | Slider                        | Stepless rating         |
 | `<Autocomplete />` | Autocomplete possible options | e.g. Tags               |
+| `<Payments />`     | Ready-made Stripe integration | Process Stripe payments |
 
 and many more...