---
order: 2
title:
zh-CN: 自定义图标
en-US: Custom Icon
---
## zh-CN
利用 `Icon` 组件封装一个可复用的自定义图标。可以通过 `component` 属性传入一个组件来渲染最终的图标，以满足特定的需求。
## en-US
Create a reusable React component by using ``. The property `component` takes a React component that renders to `svg` element.
```jsx
import { Icon } from 'antd';
const HeartSvg = () => (
);
const PandaSvg = () => (
);
const HeartIcon = props => ;
const PandaIcon = props => ;
ReactDOM.render(
,
mountNode,
);
```
```css
.custom-icons-list > .anticon {
margin-right: 6px;
}
```