diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts
index 2e21e0916..4d6d4cbf5 100755
--- a/components/lib/autocomplete/AutoComplete.d.ts
+++ b/components/lib/autocomplete/AutoComplete.d.ts
@@ -170,13 +170,17 @@ export interface AutoCompletePassThroughOptions {
      */
     inputChip?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the loading icon's DOM element.
+     * Used to pass attributes to the loader's DOM element.
      */
-    loadingIcon?: AutoCompletePassThroughOptionType;
+    loader?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the dropdown button component.
+     * Used to pass attributes to the dropdown's DOM element.
      */
-    dropdownButton?: AutoCompletePassThroughOptionType;
+    dropdown?: AutoCompletePassThroughOptionType;
+    /**
+     * Used to pass attributes to the dropdown icon's DOM element.
+     */
+    dropdownIcon?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
@@ -191,13 +195,13 @@ export interface AutoCompletePassThroughOptions {
      */
     list?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the item group's DOM element.
+     * Used to pass attributes to the option group's DOM element.
      */
-    itemGroup?: AutoCompletePassThroughOptionType;
+    optionGroup?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the item's DOM element.
+     * Used to pass attributes to the option's DOM element.
      */
-    item?: AutoCompletePassThroughOptionType;
+    option?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the empty message's DOM element.
      */
@@ -433,9 +437,13 @@ export interface AutoCompleteProps {
     dropdownClass?: string | object | undefined;
     /**
      * Icon to display in loading state.
-     * @deprecated since v3.27.0. Use 'loadingicon' slot.
+     * @deprecated since v4.0. Use 'loader' slot.
      */
     loadingIcon?: string | undefined;
+    /**
+     * Icon to display in loading state.
+     */
+    loader?: string | undefined;
     /**
      * Icon to display in chip remove action.
      * @deprecated since v3.27.0. Use 'removetokenicon' slot.
@@ -713,16 +721,27 @@ export interface AutoCompleteSlots {
         removeCallback: (event: Event, index: number) => void;
     }): VNode[];
     /**
-     * Custom loading icon template.
+     * @deprecated since v4.0. Use 'loader' slot instead.
+     * Custom loader template.
      */
     loadingicon(scope: {
         /**
-         * Style class of the loading icon.
+         * Style class of the loader.
          */
         class: string;
     }): VNode[];
     /**
-     * Custom dropdown button template.
+     * Custom loader template.
+     */
+    loader(scope: {
+        /**
+         * Style class of the loader.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * @deprecated since v4.0. Use 'dropdown' slot instead.
+     * Custom dropdown template.
      */
     dropdownbutton(scope: {
         /**
@@ -731,6 +750,16 @@ export interface AutoCompleteSlots {
          */
         toggleCallback: (event: Event) => void;
     }): VNode[];
+    /**
+     * Custom dropdown template.
+     */
+    dropdown(scope: {
+        /**
+         * Toggle function.
+         * @param {Event} event - Browser event
+         */
+        toggleCallback: (event: Event) => void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 783ba0c32..c740c3218 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -5,7 +5,7 @@
             ref="focusInput"
             :id="inputId"
             type="text"
-            :class="[cx('input'), inputClass]"
+            :class="[cx('pcInput'), inputClass]"
             :style="inputStyle"
             :value="inputValue"
             :placeholder="placeholder"
@@ -28,7 +28,7 @@
             @input="onInput"
             @change="onChange"
             :unstyled="unstyled"
-            :pt="ptm('input')"
+            :pt="ptm('pcInput')"
         />
         <ul
             v-if="multiple"
@@ -93,25 +93,25 @@
                 />
             </li>
         </ul>
-        <slot v-if="searching || loading" :class="cx('loadingIcon')" name="loadingicon">
-            <i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
-            <SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
+        <slot v-if="searching || loading" :class="cx('loader')" :name="$slots.loader ? 'loader' : 'loadingicon'">
+            <i v-if="loader || loadingIcon" :class="['pi-spin', cx('loader'), loader, loadingIcon]" aria-hidden="true" v-bind="ptm('loader')" />
+            <SpinnerIcon v-else :class="cx('loader')" spin aria-hidden="true" v-bind="ptm('loader')" />
         </slot>
-        <slot name="dropdownbutton" :toggleCallback="(event) => onDropdownClick(event)">
+        <slot :name="$slots.dropdown ? 'dropdown' : 'dropdownbutton'" :toggleCallback="(event) => onDropdownClick(event)">
             <button
                 v-if="dropdown"
                 ref="dropdownButton"
                 type="button"
-                :class="[cx('dropdownButton'), dropdownClass]"
+                :class="[cx('dropdown'), dropdownClass]"
                 :disabled="disabled"
                 aria-haspopup="listbox"
                 :aria-expanded="overlayVisible"
                 :aria-controls="panelId"
                 @click="onDropdownClick"
-                v-bind="ptm('dropdownButton')"
+                v-bind="ptm('dropdown')"
             >
                 <slot name="dropdownicon" :class="dropdownIcon">
-                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButtonIcon')" />
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownIcon')" />
                 </slot>
             </button>
         </slot>
@@ -135,7 +135,7 @@
                         <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
                             <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" :aria-label="listAriaLabel" v-bind="ptm('list')">
                                 <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
+                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('optionGroup')" role="option" v-bind="ptm('optionGroup')">
                                         <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                     </li>
                                     <li
@@ -143,7 +143,7 @@
                                         :id="id + '_' + getOptionIndex(i, getItemOptions)"
                                         v-ripple
                                         :style="{ height: itemSize ? itemSize + 'px' : undefined }"
-                                        :class="cx('item', { option, i, getItemOptions })"
+                                        :class="cx('option', { option, i, getItemOptions })"
                                         role="option"
                                         :aria-label="getOptionLabel(option)"
                                         :aria-selected="isSelected(option)"
@@ -155,7 +155,7 @@
                                         :data-p-highlight="isSelected(option)"
                                         :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                         :data-p-disabled="isOptionDisabled(option)"
-                                        v-bind="getPTOptions(option, getItemOptions, i, 'item')"
+                                        v-bind="getPTOptions(option, getItemOptions, i, 'option')"
                                     >
                                         <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         <slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index 022dff3bc..35961e804 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -232,7 +232,7 @@ const classes = {
             'p-autocomplete-open': instance.overlayVisible
         }
     ],
-    input: 'p-autocomplete-input',
+    pcInput: 'p-autocomplete-input',
     inputMultiple: ({ props, instance }) => [
         'p-autocomplete-input-multiple',
         {
@@ -248,8 +248,8 @@ const classes = {
     chipLabel: 'p-autocomplete-chip-label',
     chipIcon: 'p-autocomplete-chip-icon',
     inputChip: 'p-autocomplete-input-chip',
-    loadingIcon: 'p-autocomplete-loader',
-    dropdownButton: 'p-autocomplete-dropdown',
+    loader: 'p-autocomplete-loader',
+    dropdown: 'p-autocomplete-dropdown',
     panel: ({ instance }) => [
         'p-autocomplete-overlay p-component',
         {
@@ -257,8 +257,8 @@ const classes = {
         }
     ],
     list: 'p-autocomplete-list',
-    itemGroup: 'p-autocomplete-option-group',
-    item: ({ instance, option, i, getItemOptions }) => [
+    optionGroup: 'p-autocomplete-option-group',
+    option: ({ instance, option, i, getItemOptions }) => [
         'p-autocomplete-option',
         {
             'p-autocomplete-option-selected': instance.isSelected(option),