Icon Component

Vector icons implemented with CSS mask-image. Color via text-* or icon-* utilities. Supports multiple icon families, sizes, and custom colors.

Notes

Base class: .icon. Shape class: icon-* (e.g. icon-check).
Icon color follows currentColor by default. Use text-* utilities or inline style="color:..." to set color.
Sizes via icon-* dynamic utilities (e.g. icon-6, icon-10, icon-20, icon-[28px]).
More icons will be added in future releases.

Success Error Info Warning

check check-pill check-pill-fill

close close-circle close-circle-fill

warning warning-triangle warning-triangle-fill

warning warning-circle warning-circle-fill

info info-circle info-circle-fill

chevron-down chevron-down-circle chevron-down-circle-fill

plus plus-circle plus-circle-fill

default primary secondary tertiary success error info warning help ink title description caption disabled

Icon color follows the text color — use style="color:..." or text-* utilities.

Upload successful Upload failed Disk space low Update available

Save Delete Details

Username available Password too weak Email format OK Code expiring