How to use Ant Design Icons with React.js

This article shows you how to use Ant Design Icons in a React.js project.

1. Install the required package:

npm install @ant-design/icons --save

2. Import the icons you need, for example:

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

Note: To see the full list of available icons, go to this file:

your_project/node_modules/@ant-design/icons/lib/icons/index.d.ts

3. Try some Ant Design Icons with the style property:

import React from 'react';
import { CheckCircleFilled, LikeFilled, GoldFilled, HomeFilled } from '@ant-design/icons';

function App() {
  return (
    <center style={{marginTop: 200}}>
      <CheckCircleFilled style={{fontSize: 200, color: 'green'}}  />
      <LikeFilled style={{fontSize: 200, color: 'blue'}} /> 
      <GoldFilled style={{fontSize: 200, color: 'orange'}} spin={true} /> 
      <HomeFilled style={{fontSize: 150, color: 'purple'}} />
    </center>
  );
}

export default App;

Output:

Hope this helps! Happy coding with React 🙂