diff --git a/src/TabNavList/ExtraContent.tsx b/src/TabNavList/ExtraContent.tsx
index 0da8cadf..8471b8ad 100644
--- a/src/TabNavList/ExtraContent.tsx
+++ b/src/TabNavList/ExtraContent.tsx
@@ -9,7 +9,7 @@ interface ExtraContentProps {
 
 const ExtraContent = React.forwardRef<HTMLDivElement, ExtraContentProps>((props, ref) => {
   const { position, prefixCls, extra } = props;
-  if (!extra) {
+  if (!extra && extra !== 0) {
     return null;
   }
 
@@ -31,7 +31,7 @@ const ExtraContent = React.forwardRef<HTMLDivElement, ExtraContentProps>((props,
     content = assertExtra.left;
   }
 
-  return content ? (
+  return content || content === 0 ? (
     <div className={`${prefixCls}-extra-content`} ref={ref}>
       {content}
     </div>
diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
index 761d7aa6..b1389d02 100644
--- a/src/TabNavList/TabNode.tsx
+++ b/src/TabNavList/TabNode.tsx
@@ -53,6 +53,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
   const tabPrefix = `${prefixCls}-tab`;
 
   const removable = getRemovable(closable, closeIcon, editable, disabled);
+  const hasIcon = !!icon || icon === 0;
 
   function onInternalClick(e: React.MouseEvent | React.KeyboardEvent) {
     if (disabled) {
@@ -68,8 +69,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
   }
 
   const labelNode = React.useMemo<React.ReactNode>(
-    () => (icon && typeof label === 'string' ? <span>{label}</span> : label),
-    [label, icon],
+    () => (hasIcon && typeof label === 'string' ? <span>{label}</span> : label),
+    [label, hasIcon],
   );
 
   const btnRef = React.useRef<HTMLDivElement>(null);
@@ -121,7 +122,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
             {`Tab ${currentPosition} of ${tabCount}`}
           </div>
         )}
-        {icon && <span className={`${tabPrefix}-icon`}>{icon}</span>}
+        {hasIcon && <span className={`${tabPrefix}-icon`}>{icon}</span>}
         {label && labelNode}
       </div>
 
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index e4576ee1..6c96304c 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -537,6 +537,17 @@ describe('Tabs.Basic', () => {
     );
   });
 
+  it('renders numeric zero extra content', () => {
+    const { container, rerender } = render(getTabs({ tabBarExtraContent: 0 }));
+    expect(container.querySelectorAll('.rc-tabs-extra-content')).toHaveLength(1);
+    expect(container.querySelector('.rc-tabs-extra-content')).toHaveTextContent('0');
+
+    rerender(getTabs({ tabBarExtraContent: { left: 0, right: 0 } }));
+    expect(container.querySelectorAll('.rc-tabs-extra-content')).toHaveLength(2);
+    expect(container.querySelectorAll('.rc-tabs-extra-content')[0]).toHaveTextContent('0');
+    expect(container.querySelectorAll('.rc-tabs-extra-content')[1]).toHaveTextContent('0');
+  });
+
   it('no break of empty object', () => {
     render(getTabs({ tabBarExtraContent: {} }));
   });
@@ -637,6 +648,21 @@ describe('Tabs.Basic', () => {
     expect(container.querySelectorAll<HTMLSpanElement>(selectors).length).toBe(1);
   });
 
+  it('renders numeric zero tab labels and icons', () => {
+    const { getAllByRole, container } = render(
+      <Tabs
+        items={[
+          { key: 'zero-label', label: 0, children: 'Zero label content' },
+          { key: 'zero-icon', label: 'Label', icon: 0, children: 'Zero icon content' },
+        ]}
+      />,
+    );
+
+    expect(getAllByRole('tab')[0]).toHaveTextContent('0');
+    expect(container.querySelector('.rc-tabs-tab-icon')).toHaveTextContent('0');
+    expect(getAllByRole('tab')[1].querySelectorAll('span')).toHaveLength(2);
+  });
+
   it('support indicatorAlign', async () => {
     const { container: startContainer, rerender: rerenderStart } = render(
       <Tabs