diff --git a/web/src/features/dialog/components/fields/color.tsx b/web/src/features/dialog/components/fields/color.tsx
index 03c87a2..81b4c65 100644
--- a/web/src/features/dialog/components/fields/color.tsx
+++ b/web/src/features/dialog/components/fields/color.tsx
@@ -2,6 +2,7 @@ import { IColorInput } from '../../../../interfaces/dialog';
 import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
 import { ColorInput } from '@mantine/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface Props {
   row: IColorInput;
@@ -31,6 +32,7 @@ const ColorField: React.FC<Props> = (props) => {
       defaultValue={props.row.default}
       format={props.row.format}
       withAsterisk={props.row.required}
+      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
     />
   );
 };
diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts
index 9882499..cf649c9 100644
--- a/web/src/interfaces/dialog.ts
+++ b/web/src/interfaces/dialog.ts
@@ -66,6 +66,7 @@ export interface IColorInput {
   description?: string;
   format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
   required?: boolean;
+  icon?: IconProp;
 }
 
 export interface IDateInput {