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!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay