diff --git a/components/doc/messages/index.js b/components/doc/messages/index.js
index 88acac70c5..d1471b8422 100644
--- a/components/doc/messages/index.js
+++ b/components/doc/messages/index.js
@@ -15,6 +15,9 @@ import { Messages } from 'primereact/messages';
 import { Message } from 'primereact/message';
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
+import getConfig from 'next/config';
+import * as CustomImage from './custom-icon-active.png';
+import Image from 'next/image';
 
 export class MessagesDemo extends Component {
 
@@ -82,7 +85,7 @@ export class MessagesDemo extends Component {
                             <Message severity="success" text="Message Content" />
                         </div>
                         <div className="col-12 md:col-3">
-                            <Message severity="warn" text="Message Content" />
+                            <Message severity="warn" icon={<Image src={CustomImage} width="20px" height="20px"/>} text="Message Content" />
                         </div>
                         <div className="col-12 md:col-3">
                             <Message severity="error" text="Message Content" />
@@ -118,49 +121,71 @@ export class MessagesDemo extends Component {
             tabName: 'Hooks Source',
             content: `
 import React, { useEffect, useRef } from 'react';
-import { Messages } from 'primereact/messages';
-import { Message } from 'primereact/message';
-import { InputText } from 'primereact/inputtext';
-import { Button } from 'primereact/button';
-
+import { Messages } from '../../components/lib/messages/Messages';
+import { Message } from '../../components/lib/message/Message';
+import { InputText } from '../../components/lib/inputtext/InputText';
+import { Button } from '../../components/lib/button/Button';
+import MessagesDoc from '../../components/doc/messages';
+import { DocActions } from '../../components/doc/common/docactions';
+import Head from 'next/head';
+import getConfig from 'next/config';
+import * as CustomImage from './custom-icon-active.png';
+import Image from 'next/image';
+            
 const MessagesDemo = () => {
-    const msgs1 = useRef(null);
-    const msgs2 = useRef(null);
-    const msgs3 = useRef(null);
-
-    useEffect(() => {
-        msgs1.current.show([
-            { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true },
-            { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true },
-            { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true },
-            { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true }
-        ]);
-
-        msgs3.current.show({
-            severity: 'info', sticky: true, content: (
-                <React.Fragment>
-                    <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" />
-                    <div className="ml-2">Always bet on Prime.</div>
-                </React.Fragment>
-            )
-        });
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const addMessages = () => {
-        msgs2.current.show([
-            { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true },
-            { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true },
-            { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true },
-            { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true }
-        ]);
-    }
-
-    const clearMessages = () => {
-        msgs2.current.clear();
-    }
+const msgs1 = useRef(null);
+const msgs2 = useRef(null);
+const msgs3 = useRef(null);
+const contextPath = getConfig().publicRuntimeConfig.contextPath;
+            
+useEffect(() => {
+    msgs1.current.show([
+        { severity: 'success', icon: 'pi pi-apple', summary: 'Success', detail: 'Message Content', sticky: true },
+        { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true },
+        { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true },
+        { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true }
+    ]);
+
+    msgs3.current.show({
+        severity: 'info',
+        sticky: true,
+        content: (
+            <React.Fragment>
+                <img alt="logo" src={"$'{contextPath}/images/logo.png"} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" />
+                <div className="ml-2">Always bet on Prime.</div>
+            </React.Fragment>
+        )
+    });
+}, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+const addMessages = () => {
+    msgs2.current.show([
+        { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true },
+        { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true },
+        { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true },
+        { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true }
+    ]);
+};
+
+const clearMessages = () => {
+    msgs2.current.clear();
+};
+
+return (
+    <div>
+        <Head>
+            <title>React Messages Component</title>
+            <meta name="description" content="Messages is used to display inline messages with various severities." />
+        </Head>
+        <div className="content-section introduction">
+            <div>
+                <h1>Messages</h1>
+                <p>Messages is used to display inline messages with various severities.</p>
+            </div>
+            <DocActions github="messages/index.js" />
+        </div>
 
-    return (
-        <div>
+        <div className="content-section implementation">
             <div className="card">
                 <h5>Severities</h5>
                 <Messages ref={msgs1} />
@@ -181,24 +206,28 @@ const MessagesDemo = () => {
                         <Message severity="info" text="Message Content" />
                     </div>
                     <div className="col-12 md:col-3">
-                        <Message severity="success" text="Message Content" />
+                        <Message severity="success" icon={<Image src={CustomImage} width="20px" height="20px"/>} text="Message Content" />
                     </div>
                     <div className="col-12 md:col-3">
-                        <Message severity="warn" text="Message Content" />
+                        <Message severity="warn" icon="pi pi-exclamation-triangle" text="Message Content" />
                     </div>
                     <div className="col-12 md:col-3">
-                        <Message severity="error" text="Message Content" />
+                        <Message severity="error" icon="pi pi-times-circle" text="Message Content" />
                     </div>
                 </div>
 
                 <h5>Validation Message</h5>
                 <div className="formgroup-inline mb-2">
-                    <label htmlFor="username1" className="p-sr-only">Username</label>
+                    <label htmlFor="username1" className="p-sr-only">
+                        Username
+                    </label>
                     <InputText id="username1" placeholder="Username" className="p-invalid mr-2" />
                     <Message severity="error" text="Username is required" />
                 </div>
                 <div className="formgroup-inline">
-                    <label htmlFor="email" className="p-sr-only">email</label>
+                    <label htmlFor="email" className="p-sr-only">
+                        email
+                    </label>
                     <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
                     <Message severity="error" />
                 </div>
@@ -207,13 +236,17 @@ const MessagesDemo = () => {
                 <div className="field p-fluid">
                     <label htmlFor="username2">Username</label>
                     <InputText id="username2" aria-describedby="username-help" className="p-invalid mr-2" />
-                    <small id="username-help" className="p-error">Username is not available.</small>
+                    <small id="username-help" className="p-error">
+                        Username is not available.
+                    </small>
                 </div>
             </div>
         </div>
-    )
-}
-                `
+    </div>
+);
+};
+
+`
         },
         ts: {
             tabName: 'TS Source',
@@ -223,6 +256,9 @@ import { Messages } from 'primereact/messages';
 import { Message } from 'primereact/message';
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
+import getConfig from 'next/config';
+import * as CustomImage from './custom-icon-active.png';
+import Image from 'next/image';
 
 const MessagesDemo = () => {
     const msgs1 = useRef(null);
@@ -285,7 +321,7 @@ const MessagesDemo = () => {
                         <Message severity="success" text="Message Content" />
                     </div>
                     <div className="col-12 md:col-3">
-                        <Message severity="warn" text="Message Content" />
+                        <Message severity="warn" icon={<Image src={CustomImage} width="20px" height="20px"/>} text="Message Content" />
                     </div>
                     <div className="col-12 md:col-3">
                         <Message severity="error" text="Message Content" />
@@ -387,10 +423,10 @@ const MessagesDemo = () => {
                         <Message severity="info" text="Message Content" />
                     </div>
                     <div className="col-12 md:col-3">
-                        <Message severity="success" text="Message Content" />
+                        <Message severity="success" icon={<Image src={CustomImage} width="20px" height="20px"/>} width="20px" height="20px" />
                     </div>
                     <div className="col-12 md:col-3">
-                        <Message severity="warn" text="Message Content" />
+                        <Message severity="warn" icon="pi pi-exclamation-triangle" text="Message Content" />
                     </div>
                     <div className="col-12 md:col-3">
                         <Message severity="error" text="Message Content" />
@@ -720,12 +756,6 @@ messages.current.show({ life: 5000, severity: 'error', summary: 'Error Message',
                                     <td>null</td>
                                     <td>Unique identifier of the element.</td>
                                 </tr>
-                                <tr>
-                                    <td>icon</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Customize icon class of icon attributes</td>
-                                </tr>
                                 <tr>
                                     <td>className</td>
                                     <td>string</td>
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index 54e4fe511c..3021f36aab 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -5,36 +5,39 @@ export const Message = React.memo(
     React.forwardRef((props, ref) => {
         const elementRef = React.useRef(null);
 
+        
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
         const createIcon = () => {
             return IconUtils.getJSXIcon(props.icon, { ...props.iconProps });
         };
 
         const createContent = () => {
+            const customIcon = createIcon();
             if (props.content) {
                 return ObjectUtils.getJSXElement(props.content, props);
             }
 
             const text = ObjectUtils.getJSXElement(props.text, props);
             const icon = classNames('p-inline-message-icon pi', {
-                '': props.severity === 'info',
-                '': props.severity === 'warn',
-                '': props.severity === 'error',
-                '': props.severity === 'success'
+                'pi-info-circle': props.severity === 'info',
+                'pi-exclamation-triangle': props.severity === 'warn',
+                'pi-times-circle': props.severity === 'error',
+                'pi-check': props.severity === 'success'
             });
 
+
             return (
                 <>
-                    <span className={icon}></span>
+                    {props.icon ? <span className='p-inline-message-icon'>{customIcon}</span> : <span className={icon}></span>}
                     <span className="p-inline-message-text">{text}</span>
                 </>
             );
         };
 
-        React.useImperativeHandle(ref, () => ({
-            props,
-            getElement: () => elementRef.current
-        }));
-
         const otherProps = ObjectUtils.findDiffKeys(props, Message.defaultProps);
         const className = classNames(
             'p-inline-message p-component',
@@ -48,11 +51,9 @@ export const Message = React.memo(
             props.className
         );
         const content = createContent();
-        const icon = createIcon();
 
         return (
             <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps} role="alert" aria-live="polite">
-                {icon}
                 {content}
             </div>
         );
@@ -68,7 +69,7 @@ Message.defaultProps = {
     text: null,
     severity: null,
     content: null,
-    icon: 'pi pi-info-circle',
+    icon: null,
     iconProps: null,
     iconPos: 'left'
 };
diff --git a/pages/messages/custom-icon-active.png b/pages/messages/custom-icon-active.png
new file mode 100644
index 0000000000..ca38b0d290
Binary files /dev/null and b/pages/messages/custom-icon-active.png differ
diff --git a/pages/messages/index.js b/pages/messages/index.js
index 62e8d41cbc..a300fd242f 100644
--- a/pages/messages/index.js
+++ b/pages/messages/index.js
@@ -7,6 +7,8 @@ import MessagesDoc from '../../components/doc/messages';
 import { DocActions } from '../../components/doc/common/docactions';
 import Head from 'next/head';
 import getConfig from 'next/config';
+import * as CustomImage from './custom-icon-active.png';
+import Image from 'next/image';
 
 const MessagesDemo = () => {
     const msgs1 = useRef(null);
@@ -82,7 +84,7 @@ const MessagesDemo = () => {
                             <Message severity="info" text="Message Content" />
                         </div>
                         <div className="col-12 md:col-3">
-                            <Message severity="success" icon="pi pi-check" text="Message Content" />
+                            <Message severity="success" icon={<Image src={CustomImage} width="20px" height="20px"/>} text="Message Content" />
                         </div>
                         <div className="col-12 md:col-3">
                             <Message severity="warn" icon="pi pi-exclamation-triangle" text="Message Content" />