diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index 78ac488b4b..de1e169cd1 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -47,14 +47,13 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
     [`${prefixCls}-item-head-${color}`]: true,
   });
 
+  const customColor = /blue|red|green|gray/.test(color || '') ? undefined : color;
+
   return (
     <li {...restProps} className={itemClassName}>
       {label && <div className={`${prefixCls}-item-label`}>{label}</div>}
       <div className={`${prefixCls}-item-tail`} />
-      <div
-        className={dotClassName}
-        style={{ borderColor: /blue|red|green|gray/.test(color || '') ? undefined : color }}
-      >
+      <div className={dotClassName} style={{ borderColor: customColor, color: customColor }}>
         {dot}
       </div>
       <div className={`${prefixCls}-item-content`}>{children}</div>
diff --git a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
index 36921c182d..0932dfbb2c 100644
--- a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -316,7 +316,7 @@ exports[`renders ./components/timeline/demo/color.md extend context correctly 1`
     </div>
   </li>
   <li
-    class="ant-timeline-item ant-timeline-item-last"
+    class="ant-timeline-item"
   >
     <div
       class="ant-timeline-item-tail"
@@ -338,6 +338,44 @@ exports[`renders ./components/timeline/demo/color.md extend context correctly 1`
       </p>
     </div>
   </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-#00CCFF"
+      style="border-color:#00CCFF;color:#00CCFF"
+    >
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      <p>
+        Custom color testing
+      </p>
+    </div>
+  </li>
 </ul>
 `;
 
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
index d6d89848c1..3f16cbf7e2 100644
--- a/components/timeline/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
@@ -316,7 +316,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
     </div>
   </li>
   <li
-    class="ant-timeline-item ant-timeline-item-last"
+    class="ant-timeline-item"
   >
     <div
       class="ant-timeline-item-tail"
@@ -338,6 +338,44 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
       </p>
     </div>
   </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-#00CCFF"
+      style="border-color:#00CCFF;color:#00CCFF"
+    >
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      <p>
+        Custom color testing
+      </p>
+    </div>
+  </li>
 </ul>
 `;
 
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index adfd03b480..8796b1a72f 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -15,6 +15,7 @@ Set the color of circles. `green` means completed or success status, `red` means
 
 ```jsx
 import { Timeline } from 'antd';
+import { SmileOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <Timeline>
@@ -40,6 +41,9 @@ ReactDOM.render(
       <p>Technical testing 2</p>
       <p>Technical testing 3 2015-09-01</p>
     </Timeline.Item>
+    <Timeline.Item color="#00CCFF" dot={<SmileOutlined />}>
+      <p>Custom color testing</p>
+    </Timeline.Item>
   </Timeline>,
   mountNode,
 );