diff --git a/components/doc/multiselect/basicdoc.js b/components/doc/multiselect/basicdoc.js
index 351d3b708a..5c3689c4e1 100644
--- a/components/doc/multiselect/basicdoc.js
+++ b/components/doc/multiselect/basicdoc.js
@@ -79,7 +79,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} showClear={true} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 1d8ad5e0c7..c87de74b00 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -577,7 +577,7 @@ export const MultiSelect = React.memo(
         });
 
         const createClearIcon = () => {
-            const iconClassName = 'p-multiselect-clear-icon';
+            const iconClassName = 'p-icon p-multiselect-clear-icon';
             const icon = props.clearIcon || <TimesIcon className={iconClassName} />;
             const clearIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });