diff --git a/packages/icons-react/src/components/Icon.tsx b/packages/icons-react/src/components/Icon.tsx
index 9add0354d..8f4c1bbfa 100644
--- a/packages/icons-react/src/components/Icon.tsx
+++ b/packages/icons-react/src/components/Icon.tsx
@@ -17,8 +17,10 @@ export interface CustomIconComponentProps {
   fill?: string;
   viewBox?: string;
   className?: string;
+  color?: string;
   style?: React.CSSProperties;
 }
+
 export interface IconComponentProps extends IconBaseProps {
   viewBox?: string;
   component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>> | React.ForwardRefExoticComponent<CustomIconComponentProps>;
@@ -34,6 +36,7 @@ Omit<IconComponentProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
 
     // affect inner <svg>...</svg>
     component: Component,
+    color,
     viewBox,
     spin,
     rotate,
@@ -80,6 +83,7 @@ Omit<IconComponentProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
 
   const innerSvgProps: CustomIconComponentProps = {
     ...svgBaseProps,
+    color,
     className: svgClassString,
     style: svgStyle,
     viewBox,
diff --git a/packages/icons-react/src/components/IconBase.tsx b/packages/icons-react/src/components/IconBase.tsx
index cceba19aa..93e0abb7a 100644
--- a/packages/icons-react/src/components/IconBase.tsx
+++ b/packages/icons-react/src/components/IconBase.tsx
@@ -6,6 +6,7 @@ export interface IconProps {
   icon: IconDefinition;
   className?: string;
   onClick?: React.MouseEventHandler<SVGSVGElement>;
+  color?: string;
   style?: React.CSSProperties;
   primaryColor?: string; // only for two-tone
   secondaryColor?: string; // only for two-tone
diff --git a/packages/icons-react/tests/Icon.test.tsx b/packages/icons-react/tests/Icon.test.tsx
index af1143ec0..35d33ee9b 100644
--- a/packages/icons-react/tests/Icon.test.tsx
+++ b/packages/icons-react/tests/Icon.test.tsx
@@ -9,6 +9,7 @@ describe('React AntdIcon Component', () => {
       style: {
         fontSize: '3rem',
       },
+      color: 'red',
       className: 'my-icon',
       extraProps: { hello: 'world' },
     } as any;
diff --git a/packages/icons-react/tests/__snapshots__/Icon.test.tsx.snap b/packages/icons-react/tests/__snapshots__/Icon.test.tsx.snap
index 510c2132b..9397e9448 100644
--- a/packages/icons-react/tests/__snapshots__/Icon.test.tsx.snap
+++ b/packages/icons-react/tests/__snapshots__/Icon.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`React AntdIcon Component should create SVG element. 1`] = `
 <IconReact
   className="my-icon"
+  color="red"
   extraProps={
     {
       "hello": "world",
diff --git a/packages/icons-react/tests/__snapshots__/index.test.tsx.snap b/packages/icons-react/tests/__snapshots__/index.test.tsx.snap
index 8c3b29661..ae4e208d6 100644
--- a/packages/icons-react/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/icons-react/tests/__snapshots__/index.test.tsx.snap
@@ -1025,6 +1025,23 @@ exports[`Icon.createFromIconfontCN() should support iconfont.cn 1`] = `
       />
     </svg>
   </span>
+  <span
+    class="anticon abc"
+    role="img"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      color="blue"
+      focusable="false"
+      height="1em"
+      width="1em"
+    >
+      <use
+        href="#icon-twitter"
+      />
+    </svg>
+  </span>
 </div>
 `;
 
diff --git a/packages/icons-react/tests/index.test.tsx b/packages/icons-react/tests/index.test.tsx
index efe3ed336..e5fb888d4 100644
--- a/packages/icons-react/tests/index.test.tsx
+++ b/packages/icons-react/tests/index.test.tsx
@@ -302,6 +302,7 @@ describe('Icon.createFromIconfontCN()', () => {
         <IconFont type="icon-tuichu" />
         <IconFont type="icon-facebook" />
         <IconFont type="icon-twitter" />
+        <IconFont type="icon-twitter" color="blue" />
       </div>,
     );
     expect(wrapper).toMatchSnapshot();