Select Dropdown With Icons

A select dropdown component where each option displays a leading icon alongside the text for enhanced visual recognition.

Intuitive form selections with icon-enhanced dropdowns that improve scannability and user comprehension. Perfect for category selectors, tool pickers, and feature toggles.

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/form-select-with-icons.json

npx shadcn@latest add https://www.shadcn.io/r/form-select-with-icons.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/form-select-with-icons.json

bunx shadcn@latest add https://www.shadcn.io/r/form-select-with-icons.json

Select Basic

Basic dropdown select form

Select Grouped

Grouped options in a select dropdown

Select Searchable

Searchable combobox dropdown

Multi Select

Multi-select with checkbox popover

Cascading Select

Dependent cascading dropdowns

Country Select

Country selector with flag emojis

FAQ

Last updated on March 24, 2026

Was this page helpful?

Searchable Combobox Form

A searchable combobox-style select form using Popover and Command components

Slider Range Form

A slider range input form with real-time value display

Select Dropdown With Icons