diff --git a/components/icon/__tests__/__snapshots__/index.test.js.snap b/components/icon/__tests__/__snapshots__/index.test.js.snap
index 3f374700bd..325441a7cd 100644
--- a/components/icon/__tests__/__snapshots__/index.test.js.snap
+++ b/components/icon/__tests__/__snapshots__/index.test.js.snap
@@ -333,6 +333,20 @@ exports[`Icon should support two-tone icon 1`] = `
 </i>
 `;
 
+exports[`Icon support render svg as component 1`] = `
+<i
+  aria-label="icon: undefined"
+  class="anticon"
+>
+  <svg
+    fill="currentColor"
+    height="1em"
+    viewBox="0 0 1024 1024"
+    width="1em"
+  />
+</i>
+`;
+
 exports[`Icon.createFromIconfontCN() should support iconfont.cn 1`] = `
 <div
   class="icons-list"
diff --git a/components/icon/__tests__/index.test.js b/components/icon/__tests__/index.test.js
index 036f452439..94ac450b81 100644
--- a/components/icon/__tests__/index.test.js
+++ b/components/icon/__tests__/index.test.js
@@ -94,6 +94,15 @@ describe('Icon', () => {
     }).not.toThrow();
   });
 
+  it('support render svg as component', () => {
+    const renderSvg = () => (
+      <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" />
+    );
+    const SvgIcon = props => <Icon component={renderSvg} {...props} />;
+
+    expect(mount(<SvgIcon />).render()).toMatchSnapshot();
+  });
+
   describe('warning on conflicting theme', () => {
     let errorSpy;
     beforeEach(() => {
diff --git a/components/icon/index.tsx b/components/icon/index.tsx
index 59567a2808..caa214d6e4 100755
--- a/components/icon/index.tsx
+++ b/components/icon/index.tsx
@@ -121,6 +121,10 @@ const Icon: IconComponent<IconProps> = props => {
     viewBox,
   };
 
+  if (!viewBox) {
+    delete innerSvgProps.viewBox;
+  }
+
   // component > children > type
   if (Component) {
     innerNode = <Component {...innerSvgProps}>{children}</Component>;