shadcn.io is not affiliated with official shadcn/ui
Searchable Icon Grid Gallery Block for Radix UI
Forty-eight drawn glyphs on shared hairlines with a search field, category tabs, a size toggle and a stroke slider, where pressing a glyph copies its name and confirms it in place.
Installation
Overview
An icon browser for React with Radix UI. A header with a search field at its end sits over a band holding the category Tabs (All, Arrows, Interface, Media, Files, each with its count), a Size toggle (S, M, L) and a Stroke slider from 1 to 3, then forty-eight glyphs on shared hairlines, eight across on a wide screen and four on a phone, ending the block. Every glyph is a few stroked paths in a 24 by 24 box, so it follows the stroke slider and the text colour. Pressing a glyph copies its name to the clipboard and says "Copied" in the cell and in a polite status line. Search matches names and related words ("bin" finds trash); a category narrows it further. Matches move to the start and the other cells stay blank, so the grid never changes height, and with no match an Empty says so. It's built from Guides, Tabs, InputGroup, ToggleGroup and Slider. For icon sets, design-system docs and any page that offers glyphs to copy.
FAQ
What does pressing a glyph copy?
Its name, such as arrow-right. The cell says "Copied" for a moment and a status line announces it. If the browser refuses the clipboard, the cell says "Couldn't copy" instead.
How does the search work?
Type any part of a name, or the start of a related word: "bin" finds trash, "photo" finds camera and image. It works together with the category tabs, and the count under the field tells you how many of the forty-eight are showing.
Why do blank cells appear when I search?
So the block keeps its height. Matches move to the start of the grid and the rest stay empty cells, so nothing below jumps while you type. With no match at all, a message sits over the empty grid with a Clear search button.
Where do the glyphs come from?
They are drawn in the file: each is a list of path strings in a 24 by 24 box, painted with currentColor and the stroke you set. Swap the ICONS list for your own paths, or render your set's components in the same cell.