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 Size and Style Example
Ant Design Icon Button Size and Style Example

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.

AntD Icon Button Color
AntD Icon Button 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:

AntD Button Props
AntD Button Props

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 />} />
AntD Icon Button Width and Height
AntD Icon Button Width and Height

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:

Ant Design Button with No Border
Ant Design Button with No Border

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:

Ant Design Icon Button DOM
Ant Design Icon Button DOM

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;
}
Ant Design Icon Button Example
Ant Design Icon Button Example

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;
Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.