Icons

About

Adds an icon picker field type to Payload 3. The field stores a small group value of `{ provider, name }` in the database, with both subfields hidden from editors. Selection happens through a custom admin component that renders a searchable, paginated picker and a preview cell in collection list views. Ships with two icon providers: Lucide (via `lucide-react`) and Phosphor (via `@phosphor-icons/react`). Each provider contributes a server config (id and label) and a client factory that resolves icon components synchronously. The picker supports provider switching, category grouping, and per-field provider subsets. Configuration pairs a plugin with a field factory. `createIconPlugin()` returns both `iconPlugin` and `iconField`, keeping provider ids and labels in sync. Field options control the stored name, admin label, required state, default provider, enabled provider subset, and per-field label overrides. A `packageImport` option lets monorepo setups alias the client entry. Custom providers are supported through `registerIconProviderClientFactory`. A provider supplies icon names, category maps, a category representative, and a component resolver. The resolver must use eager imports; per-icon lazy loading would fire hundreds of requests while the picker is open. An `Icon` client component renders a stored value, forwarding SVG props and Phosphor's `weight`. Requires Payload `^3.37.0` and React 19.

Package info

Package name

payload-plugin-icons

Latest version

1.1.2

Unpacked size

163 kB

License

MIT

Weekly downloads

120

Last publish

Aug 10, 2026