Button Icon

Icon buttons using .btn-icon (1:1 square button) with variants, colors, sizes, and shapes. Supports SVG, img, and icon fonts.

Notes

Use .btn-icon for a square 1:1 icon button. It works on button, a, span elements, etc. All btn-* utilities (colors, variants, sizes, shapes) work with it.
Three icon types are supported: inline SVG, img tag, and icon font (e.g. Font Awesome).
Use the disabled attribute for disabled state.

Basic usage

Default icon button

N

Disabled

Link as icon button

N Y

Ghost variant (`.btn-ghost`)

Primary colors

Primary

Secondary

Tertiary

Status colors

Success

Error

Info

Warning

Highlight

Neutral colors

Title

Description

Caption

Disabled

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

Solid

Outline

Subtle

Ghost

Sizes (btn-4 ~ btn-15)

Extra small: 4 ~ 7

Small: 8 ~ 9

Medium: 10 ~ 11

Large: 12 ~ 13

Extra large: 14 ~ 15

Icon types comparison

SVG

Image (img tag)

Icon font