Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - With Item Icons
A React combobox with Lucide React icons stored in data using createElement for dynamic icon rendering in both trigger and items with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Icons communicate faster than words—recognize before reading. This React combobox stores icon components (Chrome, Smartphone, Github) in data rendering via createElement in trigger and platform dot icon syntax in items. Built with shadcn/ui Command and Popover featuring dynamic icon rendering from data properties. The item icons pattern accelerates recognition—perfect for platform selectors, tool pickers, integration choosers, or anywhere visual symbols distinguish options enabling instant identification through iconography supplementing text labels with universal symbols users recognize immediately.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Single Select
Text-only combobox
Items with Icons and Descriptions
Icons with descriptive text
Nested/Hierarchical Groups
ChevronRight icon indicators
Items with Avatars
Avatar-based visuals
With Default Selected Value
Pre-selected options
Button with Icon
Icon button patterns
Questions you might have
React Combobox - With Default Selected Value
A React combobox with default selected value initialized using useState for pre-selected language preference display with shadcn/ui
React Combobox - Small Size Variant
A compact React combobox with small size variant using h-8 trigger, text-xs typography, and size-3 icons for space-constrained interfaces with shadcn/ui