diff --git a/packages/message/__tests__/message.spec.ts b/packages/message/__tests__/message.spec.ts
index 91582dd4d8..6eb5835f41 100644
--- a/packages/message/__tests__/message.spec.ts
+++ b/packages/message/__tests__/message.spec.ts
@@ -33,7 +33,7 @@ describe('Message.vue', () => {
 
       expect(wrapper.text()).toEqual(AXIOM)
       expect(vm.visible).toBe(true)
-      expect(vm.typeClass).toBe('el-message__icon el-icon-info')
+      expect(vm.typeClass).toBe('el-icon-info')
       expect(vm.customStyle).toEqual({ top: '20px', zIndex: 0 })
     })
 
@@ -100,7 +100,7 @@ describe('Message.vue', () => {
       const type = 'some-type'
       const wrapper = _mount({ props: { type } })
 
-      expect(wrapper.find('.el-message__icon').exists()).toBe(false)
+      expect(wrapper.find(`el-icon-${type}`).exists()).toBe(false)
     })
   })
 
diff --git a/packages/message/src/index.vue b/packages/message/src/index.vue
index 7fd8909340..19fe965e08 100644
--- a/packages/message/src/index.vue
+++ b/packages/message/src/index.vue
@@ -15,7 +15,7 @@
       @mouseenter="clearTimer"
       @mouseleave="startTimer"
     >
-      <i v-if="type || iconClass" :class="[typeClass, iconClass]"></i>
+      <i v-if="type || iconClass" :class="['el-message__icon', typeClass, iconClass]"></i>
       <slot>
         <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
         <!-- Caution here, message could've been compromised, never use user's input as message -->
@@ -65,7 +65,7 @@ export default defineComponent({
     const typeClass = computed(() => {
       const type = !props.iconClass && props.type
       return type && TypeMap[type]
-        ? `el-message__icon el-icon-${TypeMap[type]}`
+        ? `el-icon-${TypeMap[type]}`
         : ''
     })
     const customStyle = computed(() => {