How can I set the size of icons in Ant Design?

Can change the size of the icon using fontSize style property.

eg: use of style={{ fontSize: '150%'}}

<PlayCircleFilled style={{ fontSize: '150%'}} />

enter image description here


It should be

<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />

https://codepen.io/anon/pen/wNgrWX


In the new antd Icon version, you can increase the size of the icon like this:

import { MessageTwoTone } from "@ant-design/icons";

And call it as:

  <div style={{ fontSize: "30px" }}>
        <MessageTwoTone />
      </div>

I tried using it as an attribute of <MessageTwoTone> but attribute no longer works like in the old version mentioned in the answers above.

Edited:- I was told later that the above will only work while the Icon inherits its font-size from its parent. So we should rather add the style attribute directly to the Icon

         <MessageTwoTone style={{ fontSize: "30px" }}/>