The Complete Guide to Ant Design Icon Button Size and Style

Ant Design icon buttons can be created in three ways:

• Include an icon as a child of the button
• Use the icon prop to pass an icon to the button
• Add an onClick handler and custom style directly to an icon to create a custom icon button

In this tutorial I will show how to create all three. I will also show how to control width, height, icon color, background color, and border. Here’s what we will create:

Ant Design Icon Button Color and Background Color

The first Icon Button I created simply passed an icon as a child of the button:

<Button className="custom-button-color" size="large">
  <PlayCircleOutlined /> Text!
</Button>

I used a custom class to add background color and text color to the button. The color CSS value trickles down to children of the button, so the PlayCircleOutlined icon receives the custom-button-color class color.

Here’s the code in the CSS class:

.custom-button-color {
  background-color: green;
  color: red;
}

The AntD button does not have any color or background color by default. The MUI IconButton has lots of default styling.

Ant Design Icon Button Border and Border Radius

Next I added border and border radius to the icon button. I added the following values to the custom-button-color class:

border: 4px solid pink;
border-radius: 4px;

The Button has a default border, but it was easy to override with this class.

Interestingly, the button has default border, background, and text color on hover. I was able to remove or override the default hover behavior with this selector:

.custom-button-color:hover

Ant Design Icon Button Width and Height

In the next example I wanted to pass in an icon to a button using the icon prop.

I wanted to find a list of Button props but could not in the AntD docs. Instead, I right-clicked and chose “Go To Definition”. This opens the type definition for a component and shows the available props.

Here’s an example:

Once I found the value type that the icon prop required, I was able to pass an icon in:

<Button className="custom-button-size" icon={<PlusCircleOutlined />} />

Instead of using the size prop, which has limited options, I added custom width and height values using a custom class:

.custom-button-size {
  width: 120px;
  height: 60px;
}

I found that custom values also centered the icon better.

This example does not have any text. If desired, we can remove the border and have “just” a clickable icon (even though it renders as a button). Add the following class to the button:

.custom-button-no-border {
  border: none;
}

Here’s what that looks like in the DOM:

Here’s how to set Ant Design Table Row height and style, and here’s table row width.

Ant Design Clickable Icon

In the final example, I did not use a Button component. Instead, I turned an icon directly into a “button”.

<QuestionOutlined
  className="ant-btn custom-button-color custom-button-size custom-button-alignment"
  onClick={() => {
    console.log("Clicked!");
  }}
/>

The topmost element in the DOM for this icon button is a span. There is no button element:

There are a couple of options for styling the icon so that it looks like a button. We can apply the Ant Design button classes, such as ant-btn, or simply create our own classes.

I used both approaches. I applied the button classes from the previous sections, and I also applied an alignment class and the ant-btn class (because I added margin to it):

.custom-button-alignment {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 32px;
}

.ant-btn {
  margin: 12px;
}

The anticon default class adds a cursor, which is useful for a button look and feel.

Resources

Here is full code for this example:

//CSS

.custom-button-color {
  background-color: green;
  color: red;
  border: 4px solid pink;
  border-radius: 4px;
}

.custom-button-size {
  width: 120px;
  height: 60px;
}

.custom-button-no-border {
  border: none;
}

.custom-button-alignment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.ant-btn {
  margin: 12px;
}

.layout-div {
  display: flex;
}

//JSX

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Button } from "antd";
import {
  PlayCircleOutlined,
  PlusCircleOutlined,
  QuestionOutlined
} from "@ant-design/icons";

const CustomIconButtons: React.FC = () => (
  <div className="layout-div">
    <Button className="custom-button-color" size="large">
      Text! <PlayCircleOutlined />
    </Button>
    <Button className="custom-button-size" icon={<PlusCircleOutlined />} />
    <QuestionOutlined
      className="ant-btn custom-button-color custom-button-size custom-button-alignment"
      onClick={() => {
        console.log("Clicked!");
      }}
    />
  </div>
);

export default CustomIconButtons;