DEV Community

Cover image for Open-Source React Icon Picker: Lightweight, Customizable, and Built with ShadCN, TailwindCSS. Perfect for Next.js Projects!
jake r
jake r

Posted on

Open-Source React Icon Picker: Lightweight, Customizable, and Built with ShadCN, TailwindCSS. Perfect for Next.js Projects!

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,

  1. A hook for collecting icon data useIconPicker()

Has built in search that can be removed depending on use case

  1. 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!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay