v0 by Vercel

Icon Picker Component with shadcn/ui

I'll create a comprehensive icon picker component that matches the design in your screenshot, with tabs for Icons, Emojis, and Upload functionality.

How to Use the Icon Picker Component

The icon picker component I've created matches the design in your screenshot with three tabs:

Icons Tab: Displays Lucide icons with a color picker at the top
Emojis Tab: Shows a grid of emoji characters with search functionality
Upload Tab: Allows users to upload custom icons via drag-and-drop or file selection

Key Features

Color Selection: Choose from 8 different colors for icons
Search Functionality: Filter icons and emojis by name
Responsive Design: Works well on different screen sizes
Drag and Drop: Easy file uploading with visual feedback
Create Project Modal: Matches the design in your screenshot

Implementation Details

The component is built using shadcn/ui components like Tabs, ScrollArea, Input, and Button. It uses Lucide React for the icons and includes a comprehensive emoji dataset.

To use this component in your project, you can import it and provide callback functions for when icons, emojis, or files are selected:

<IconPicker 
  onSelectIcon={(icon) => console.log("Selected icon:", icon)}
  onSelectEmoji={(emoji) => console.log("Selected emoji:", emoji)}
  onUploadIcon={(file) => console.log("Uploaded file:", file.name)}
/>

The demo page (/demo) shows how to integrate both the icon picker and the create project modal in a complete interface.