Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Left Icon
A link-styled button with left icon adding visual context to text-based actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Icons clarify intent instantly. This React link button pairs shadcn/ui's minimal link variant with lucide-react icons positioned left of text using gap-2 spacing. Built with transparent background and primary-colored icon-text combination, it creates recognizable inline action patterns. Perfect for "Download PDF" with Download icon in document viewers, "Send Email" with Mail icon in contact forms, or "Open Settings" with Settings icon in user menus—the icon reinforcement speeds recognition while maintaining the subtle visual weight of link-styled buttons.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Text Only Link
Basic link button without icon
Link Right Icon
Icon positioned after text
Standard Left Icon
Primary button with left icon
Outline Left Icon
Bordered button with icon
Loading Link
Link button with spinner
Icon Breadcrumb
Navigation with home icon