Solution

To add a custom icon in the ant design alert in react js, use the icon attribute and pass your desired icon in the attribute the alert component will show in the UI.

Make sure you have added showIcon={true} in your alert component.

Snippet

In this snippet, see the short example of use alert component with icon from ant design library.

<Alert message="Success Text" type="success" showIcon icon={<CheckOutlined />} style={{
  margin: '30px',
}}/>

Example

In this example, we will import the alert component from the antd library, use the icon component in the alert icon attribute, and provide attribute details to add a custom icon appearance.

Let’s start coding…

App.js

import * as React from 'react';
import { Alert } from 'antd';
import { CheckOutlined } from "@ant-design/icons";

export default function ComboBox() {
  return (
    <Alert message="Success Text" type="success" showIcon icon={<CheckOutlined />} style={{
      margin: '30px',
    }}/>
  );
}

Output

Ant-design, custom, icon

Here, we are provided code sandbox links for the above program add custom icon in ant design alert. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.