Untitled UI icon picker

DatoCMS field editor that lets editors pick an icon from the Untitled UI icon set and stores the icon name as a string.

This is a Community Plugin! Learn how create your own plugin, or copy and remix existing ones in our documentation

DatoCMS plugin: Untitled UI icon picker

A DatoCMS field editor plugin that lets editors pick an icon from the Untitled UI icon set and stores the icon name as a plain string. Pair it with a frontend that looks the chosen name up against @untitledui/icons to render the matching component.

Head ups

The plugin stores the icon name as a string (e.g. Star01). It does not store SVG markup, props, or sizing. Your frontend is responsible for resolving the name to a React component.
Designed for single-string fields only (fieldTypes: ['string']).
Bundled icon list is generated from @untitledui/icons at build time. If your frontend is pinned to a different version of @untitledui/icons, picked names may not exist there — keep the versions in lockstep.

Installation

Install via the DatoCMS marketplace:

In your DatoCMS project, go to Settings → Plugins → Add new plugin.
Search for Untitled UI icon picker and install it.

Then, on any single-line string field where you want the picker:

Open the field's settings.
Under Presentation, set the editor to Untitled UI icon picker.
Save.

Usage

In your frontend, resolve the stored name back to an icon component:

1
import * as Icons from '@untitledui/icons';
2
import type { FC, SVGProps } from 'react';
3

4
type IconComponent = FC&lt;SVGProps&lt;SVGSVGElement&gt; & { size?: number }&gt;;
5
const registry = Icons as unknown as Record&lt;string, IconComponent&gt;;
6

7
export const Icon = ({ name, size = 24 }: { name: string; size?: number }) =&gt; {
8
  const Cmp = registry[name];
9
  if (!Cmp) return null;
10
  return &lt;Cmp size={size} /&gt;;
11
};

Contributing

1
nvm use
2
npm install
3
npm run dev      # vite dev server on :5173
4
npm run build    # builds dist/ — what gets shipped to the marketplace
5
npm run lint
6
npm run typecheck

To test the plugin against a real DatoCMS project before publishing, add it as a private plugin in that project's settings pointing at your local dev server URL.

Releases are cut from main via the Release GitHub Action (workflow_dispatch), which uses release-it to bump the version, generate CHANGELOG.md, tag, and npm publish. The DatoCMS marketplace picks up new versions automatically within an hour.