Looking for an Open-Source React icon picker that’s flexible, developer-friendly, and built with modern technologies like ShadCN and TailwindCSS? Meet the React Icon Picker—a dynamic, reusable component designed to integrate seamlessly into your Next.js or React projects.
Whether you’re creating a CMS, admin panel, or design system, this Icon Picker simplifies the process of selecting and managing icons, offering a clean, intuitive interface with built-in search and customizable design.
The icon picker is built of 2 main components,
- A hook for collecting icon data
useIconPicker()
Has built in search that can be removed depending on use case
- A component for rendering the icon
<IconRenderer icon="..." />
Pass the icon name to render your icon. Accepts all the same props your icon component would.
It includes popular UI components but the useIconPicker() hook & <IconRenderer /> component are all you need to build your own from scratch.
Try it Here:
https://modall.ca/lab/shadcn-icon-picker-component
Start Building with the React Icon Picker
Ready to add an intuitive, responsive icon picker to your project? Copy the code, customize it, and start building better user interfaces today.
If you use this component in your project, we’d greatly appreciate it if you could link back to this post or our showcase to help others discover it. Of course, there’s no obligation to do so—this component is free to use as you see fit. Your support, whether through a link, feedback, or contributions, helps us continue building tools for the community!
Top comments (0)