Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Tooltip with Icon
A tooltip with icon and text content using flex items-center gap-2 layout with CheckCircleIcon from Lucide React for status indicators
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text alone does not always convey meaning—icons add visual context instantly. This React tooltip pattern combines Lucide React icons with text using flex items-center layout for inline status messages. Built with shadcn/ui Tooltip and Radix UI primitives with size-4 icons and text-primary-foreground color, the icon-text combination provides quick visual confirmation—perfect for system status, health checks, validation states, connection indicators, sync status, or any interface element where an icon plus brief text communicates state faster than text alone.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Tooltip
Simple single-line tooltip text
Tooltip with Title
Tooltip with structured title and description
Tooltip with Keyboard Shortcut
Tooltip showing keyboard command
Badge with Icon
Badge component with icon indicator
Alert with Icon
Alert message with status icon
Button with Icon
Button containing icon and text
Questions you might have
React Tooltip with Title and Description
A tooltip with structured content showing title in font-semibold and description in text-xs using flex-col gap-1 layout
React Tooltip with Keyboard Shortcut
A tooltip showing keyboard shortcut with Kbd component using flex items-center gap-2 layout displaying command key combinations