Iconify Icon Input for Payload CMS

A Payload CMS field that lets editors search and select Iconify icons.

Install

pnpm add iconify-icon-input

Usage

import { IconPickerField } from 'iconify-icon-input'

export const MyCollection = {
  slug: 'pages',
  fields: [
    IconPickerField({
      name: 'icon',
      label: 'Icon',
      icons: ['lucide', 'mdi'],
    }),
  ],
}

You can also pass a custom icon map:

IconPickerField({
  name: 'icon',
  customIcons: {
    'custom:logo': '<svg>...</svg>',
  },
})

Client Component

The field uses the exported client component at:

iconify-icon-input/client#IconPickerFieldComponent

License

MIT