diff --git a/src/Panel.tsx b/src/Panel.tsx
index 09a57b4..4080a1d 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import shallowEqual from 'shallowequal';
 import PanelContent from './PanelContent';
-import { CollapsePanelProps } from './interface';
+import type { CollapsePanelProps } from './interface';
 
 class CollapsePanel extends React.Component<CollapsePanelProps, any> {
   static defaultProps = {
@@ -54,10 +54,11 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
     } = this.props;
 
     const disabled = collapsible === 'disabled';
+    const collapsibleHeader = collapsible === 'header';
 
     const headerCls = classNames(`${prefixCls}-header`, {
       [headerClass]: headerClass,
-      [`${prefixCls}-header-collapsible-only`]: collapsible === 'header',
+      [`${prefixCls}-header-collapsible-only`]: collapsibleHeader,
     });
     const itemCls = classNames(
       {
@@ -69,22 +70,34 @@ class CollapsePanel extends React.Component<CollapsePanelProps, any> {
     );
 
     let icon: any = <i className="arrow" />;
+
+    /** header 节点属性 */
+    const headerProps: React.HTMLAttributes<HTMLDivElement> = {
+      className: headerCls,
+      'aria-expanded': isActive,
+      onKeyPress: this.handleKeyPress,
+    };
+
     if (showArrow && typeof expandIcon === 'function') {
       icon = expandIcon(this.props);
     }
+    if (collapsibleHeader) {
+      icon = (
+        <span style={{ cursor: 'pointer' }} onClick={() => this.handleItemClick()}>
+          {icon}
+        </span>
+      );
+    } else {
+      headerProps.onClick = this.handleItemClick;
+      headerProps.role = accordion ? 'tab' : 'button';
+      headerProps.tabIndex = disabled ? -1 : 0;
+    }
 
     return (
       <div className={itemCls} style={style} id={id}>
-        <div
-          className={headerCls}
-          onClick={() => collapsible !== 'header' && this.handleItemClick()}
-          role={accordion ? 'tab' : 'button'}
-          tabIndex={disabled ? -1 : 0}
-          aria-expanded={isActive}
-          onKeyPress={this.handleKeyPress}
-        >
+        <div {...headerProps}>
           {showArrow && icon}
-          {collapsible === 'header' ? (
+          {collapsibleHeader ? (
             <span onClick={this.handleItemClick} className={`${prefixCls}-header-text`}>
               {header}
             </span>
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 7d86dcb..fc97a1d 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -530,5 +530,18 @@ describe('collapse', () => {
       collapse.find('.rc-collapse-header').simulate('click');
       expect(collapse.find('.rc-collapse-item-active').length).toBe(0);
     });
+
+    it('icon trigger when collapsible equal header', () => {
+      const collapse = mount(
+        <Collapse collapsible="header">
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
+      );
+
+      collapse.find('.rc-collapse-header .arrow').simulate('click');
+      expect(collapse.find('.rc-collapse-item-active').length).toBe(1);
+    });
   });
 });