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

Seraph

Answer 1

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

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

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

Klotz

While the answer from @ßiansor Å. Ålmerol was correct at the time, this is the better solution by now. – Seraph

Answer 2

It should be

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

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

Frankel

I tried it too and it works. I post a codepen example. – Persia

Also works is you are using the individual icon component, like so <MessageOutlined style={{ fontSize: '20px'}}/> – Ketchum

In my browser at least, your codepen doesn't work. – Magdalenamagdalene

Answer 3

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

Mattins

Answer 4

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;
    }
}

Pressmark

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 – Seraph

Answer 5

While many of the solutions here give the correct answer I'd like to explain a little bit about why it works this way.

Solution

As stated by other answers you need to change the font size as follows:

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

Why does this work?

If you inspect the svg that ant design renders you can see that instead of the width and height being set in pixels, it uses the em unit.

The em unit is a relative unit which is relative to the font size of the parent. Therefore if the parent's font size is 16px then 1em = 16px, 2em = 32px and so on.

Since ant design sets the width and the height to 1em, the width and the height of the svg will be whatever the font size of the parent is - in this case the font size of the span that ant design wraps their icons with.

Why did they not just use pixels?

As I was not involved in the development process I can not give you a definite answer, but I have two theories.

1. Since icons are square and both the width and the height are equal, doing it this way would allow a user to set both the width and the height together without needing to explicitly defined both the width and the height.
2. Since the icon is wrapped with a span, you would need to be able to use css selectors in order to change the width and height of the svg component. When using inline styling this is generally not possible. Setting the width and height as a em unit allows the user to change the size of the svg without needing to use a css selector.

Oui

Answer 6

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

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

Narcotism

Answer 7

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

Wherewith

Answer 8

Best way to do it with javascript

Icon.setTwoToneColor("#000");

Banket