Fields
Lucide Icon Picker
A customizable icon picker field for PayloadCMS with Lucide icons, fuzzy search, and virtualized rendering.
Experimental
This field is currently experimental. Please report any issues you encounter on the github repository.
Installation
Use the following command to install the icon picker field:
npx shadcn@latest add https://payload.veiag.dev/r/lucide-icon-picker.jsonImportant
Currently, shadcn CLI removes use client directive from the top of the files.
Please ensure to add it back to the top of index.tsx file in the icon picker field directory.
I think this should be fixed in future releases of shadcn CLI.
Usage
Basic usage
import { iconField } from '@/fields/icon-picker/field'
export const MyCollection = {
slug: 'my-collection',
fields: [
iconField({
name: 'icon',
required: true,
description: 'Choose an icon for this feature',
}),
],
}With custom configuration
import { iconField } from '@/fields/icon-picker/field'
export const MyCollection = {
slug: 'my-collection',
fields: [
iconField({
name: 'menuIcon',
showTextInput: true,
searchable: true,
categorized: true,
searchPlaceholder: 'Find your icon...',
triggerPlaceholder: 'Choose Icon',
description: 'Icon displayed in the navigation menu',
}),
],
}Advanced usage
import { iconField } from '@/fields/icon-picker/field'
export const MyCollection = {
slug: 'my-collection',
fields: [
iconField({
name: 'featureIcon',
required: true,
showTextInput: false,
searchable: true,
categorized: true,
searchPlaceholder: 'Search icons...',
triggerPlaceholder: 'Select Feature Icon',
overrides: (field) => ({
...field,
admin: {
...field.admin,
condition: (data) => data.showIcon === true,
},
}),
}),
],
}Screenshots
API Reference
Prop
Type
Features
- Lucide Icons - Access to the complete Lucide icon library with dynamic loading
- Fuzzy Search - Powered by Fuse.js for intelligent icon discovery by name, tags, and categories
- Virtualized Rendering - Smooth performance with @tanstack/react-virtual, rendering only visible icons
- Category Navigation - Browse icons organized by category with quick jump navigation
- Icon Preview - Visual preview of selected icon in both edit and list views
- Debounced Search - Optimized search with 200ms debounce for smooth typing experience
- Responsive Design - Adapts to different screen sizes with mobile-optimized grid layouts
- Tooltips - Hover tooltips showing icon names for easy identification
- Custom Cell Component - Displays icon preview with name in admin list views
- Keyboard Accessible - Full keyboard navigation and focus management