shadcn.io is not affiliated with official shadcn/ui
Searchable Icon Grid Gallery Block for React
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 Base 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.
Related
- Pro
Color Token Grid Gallery
Design assetsTwelve of the theme's own colour tokens as swatches on shared hairlines, each with its name and its painted value in the format you choose, and a Copy button that copies exactly that text.
- Pro
Type Tester Gallery
Design assetsA preview text field, a Weight slider, a Size slider and a Case control set one line in the theme's Sans, Serif and Mono stacks, above a table of the nine weights that marks the current one.
- Pro
Component Catalogue Gallery
Design assetsTwelve components drawn in plain boxes on shared hairlines, each with a status badge and a variant count, a status filter, and a Show variants switch that turns every drawing into its list of variants.
- Pro
Logo Lockups Gallery
Design assetsFour drawn logo lockups in framed cells with a Show clear space toggle that lays the margin over every lockup, and real SVG and PNG downloads under each.
- Pro
Filterable Gallery
Filter, sort and tabsTwelve drawn pictures on shared hairlines with a band of chips, each with a count, that keeps only one kind of work and says how many are showing.
- Pro
Pattern Kit Gallery
Design assetsTwelve tileable CSS surfaces in cells on shared hairlines, with a Scale slider and a Contrast slider that repaint every cell live, and a Copy CSS button that copies the real rule for the pattern you choose.