Attempted import error: 'Icon' is not exported from 'antd'

In v4, the icons are a default export, so do

import Icon from '@ant-design/icons';

instead of

import {Icon} from 'antd';

You might also need to do npm install @ant-design/icons --save-dev

On upgrading the version of Ant Design to v4, one of the major breaking changes have been that Icon is no longer exported from antd package.

Also instead of having string based icon references like:

// Before
<Icon type="smile" />

In v4:

import { SmileOutlined } from '@ant-design/icons';

<SmileOutlined />

There is still an Icon export, but that is from the package @ant-design/icons instead of just antd. This Icon export can be used for adding custom icons.

Docs Changelog

i added '@ant-design/compatible' it works for me

yarn add @ant-design/compatible --save-dev

Your import is wrong.

Check ant documentation: https://ant.design/components/icon/

Are you using v4?

import Icon from '@ant-design/icons';