Icon Field

Preview

import iconField from "~/payload/fields/icon/config";

// Usage in PayloadCMS block/collection config
const featureIcon = iconField({
  name: "icon",
  label: "Feature Icon",
  required: true,
});

Props

The iconField function accepts the following configuration options:

This field provides a searchable dropdown interface for selecting from all available Lucide React icons.

Installation

npx shadcn@latest add @uifoundry/icon-field

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component uses the following registry components:

• Field Types - TypeScript definitions for PayloadCMS fields
• Select Enum Field - Base select field configuration with enum support
• Command - Command menu component for searchable selection
• Popover - Floating UI popover component
• Button - Customizable button component with variants
• Style Utils - Tailwind utility functions including cn() class merger

Dependencies

This component requires the following NPM packages:

• React - JavaScript library for building user interfaces
• PayloadCMS - Headless CMS and application framework
• @payloadcms/ui - PayloadCMS admin UI components
• Lucide React - Beautiful & consistent icon toolkit