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

Question

So when I'm using an Icon in Ant Design it is always 14 * 14 px. Is there a way to set the size maually?

Things like

<Icon width={"20px"} type="setting" />

or

<Icon style={{width: '20em'}} type="setting" />

do not work

ßiansor Å. Ålmerol · Answer 1 · 2019-01-31T09:18:39.690

35

It should be

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

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

edited Jan 31 '19 at 09:18

answered Jan 31 '19 at 09:13

ßiansor Å. Ålmerol

2,849
3
22
24

I tried it too and it works. I post a codepen example. – ßiansor Å. Ålmerol Jan 31 '19 at 09:19
Also works is you are using the individual icon component, like so `` – Kahitarich Aug 08 '20 at 01:50
In my browser at least, your codepen doesn't work. – nurgasemetey Dec 01 '20 at 08:42

score 17 · Accepted Answer · answered Feb 14 '21 at 17:13

17

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

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

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

answered Feb 14 '21 at 17:13

Kelum Sampath Edirisinghe

1,156
12
21

1

While the answer from @ßiansor Å. Ålmerol was correct at the time, this is the better solution by now. – Gianluca Filitz May 03 '21 at 22:33

Jolly Good · Answer 3 · 2021-11-24T04:46:06.520

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" }}/>

score 2 · Answer 4 · answered Apr 27 '21 at 07:19

2

Not sure if its just for me, but as of today the accepted answer does not work, I made it work by putting a className inside the Icon Component, and targeting the svg of that class. here's an example

component.js

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

  <CheckCircleTwoTone
                    twoToneColor="#52c41a"
                    className="reg_icon"
                />

component.scss

.reg_icon {
    svg {
        font-size: 120px !important;
    }
}

answered Apr 27 '21 at 07:19

Drailan John Terrible

315
3
24

Thank you for the hint, you are right. They updated it and by now you should use another aproach. Therfor I accepted the answer by @Kelum Sampath – Gianluca Filitz May 03 '21 at 22:34

score 0 · Answer 5 · answered Jan 31 '19 at 09:18

0

Use <Icon style={{ fontSize: '30px'}} type="check-circle" />

Here is a working codepen: https://codesandbox.io/s/x7r7k7j6xw

answered Jan 31 '19 at 09:18

Besart Marku

543
1
7
14

score 0 · Answer 6 · answered Sep 09 '21 at 14:33

If using the icon inside the button like this:

<Button type="text" icon={<GithubOutlined />} />

You can add these classes/styles and it will solve the issue for you (it solved it for me)

<Button type="text"
        className={styles.button}
        icon={<GithubOutlined className={styles.icon}/>}
/>

.button {
  
  // The wanted size...
  font-size: 2.5em;

  // Without it, changing the font size will cause problems.
  width: fit-content;
  height: fit-content;

  .icon {
    font-size: inherit;
  }
}

CodePen Demo

score -4 · Answer 7 · answered May 13 '19 at 17:22

-4

Best way to do it with javascript

Icon.setTwoToneColor("#000");

answered May 13 '19 at 17:22

Tamaghna Banerjee

168
2
18

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

7 Answers7