Icon Mark!

Non-interactive visual equivalent of the icon button — a circular badge with an icon inside. Use when you need the look of an icon button but the element is decorative, not clickable (e.g. progress steps, activity markers, section headers).

Color variants follow the bootstrap alert pattern (tinted background, darker text). Override the icon color with any text-* utility (text-white, text-primary, text-success, etc.).

icon-mark

Default — soft light gradient background with primary icon.

icon-mark icon-mark-primary

Tinted primary — primary-50 background with primary icon.

icon-mark icon-mark-primary bg-gradient

Gradient-filled primary — mirrors btn btn-primary bg-gradient rounded-circle. Useful for the priority / "skip the line" style indicators.

icon-mark icon-mark-secondary

icon-mark icon-mark-info

icon-mark icon-mark-success

icon-mark icon-mark-warning

icon-mark icon-mark-danger

Responsive Test