Icon composition

Figma plugin

Generate a DTPR icon component library in Figma from the live API, then publish it as a Team Library.

The DTPR Figma plugin builds an icon component library directly inside a Figma file, pulling every element and composed icon from the live API at api.dtpr.io.

Run it once, publish the result as a Team Library, and your designers get the full DTPR icon set in their Assets panel — without installing anything themselves.

Preview release. The plugin's download, network, and icon-composition paths are tested, but the document-building step has not yet been verified against a real Figma session. Generate into a scratch file first.

Download

dtpr-figma-plugin.zip (v0.2.0) — the built plugin: manifest.json, dist/code.js, dist/ui.html, and an install README.txt.

Sizes and a SHA-256 digest are published at /figma-plugin/manifest.json if you want to verify what you downloaded.

Install

The plugin is not on the Figma Community, so it installs from disk.

Unzip somewhere permanent. Figma reads the plugin off disk every time it runs — a Downloads folder you periodically empty will break it.
Open the Figma desktop app. Browser Figma cannot load local plugins.
Plugins → Development → Import plugin from manifest…
Select manifest.json from the unzipped folder.

Run it from Plugins → Development → DTPR Icon Library.

The plugin declares https://api.dtpr.io under networkAccess in its manifest, which is the only domain it can reach. It sends no data and uses no credentials — every DTPR endpoint it touches is public and read-only.

What it generates

A new page per schema version, one section per category, in schema order:

Page  "DTPR Icons — ai@2026-08-24-beta"
 └ Frame "purpose"                          category section
    ├ Text  "Purpose"                       category name + description
    ├ ComponentSet "purpose/accessibility"
    │   ├ Component "Theme=light"
    │   │   └ Frame "icon" → "shape" + "symbol"
    │   └ Component "Theme=dark"
    └ Text  "Accessibility"                 optional caption

For ai@2026-08-24-beta that's 137 elements across 14 categories, 468 icons.

Each component carries its element description in Figma's description field, so the plain-language meaning shows up in the Assets panel and the instance inspector. Each node is also stamped with plugin data recording its element id, schema version, and content hash.

Variants become component sets

The API exposes an element's icons as a flat list of tokens on icon_variants[]:

["default", "dark", "vendor", "vendor.dark"]

Those are really two independent axes — a context (the category's element_context value) and a theme (light or dark). See composed variants for how the API composes them.

The plugin splits each token back apart and rebuilds it as a Figma component set with matching variant properties:

API token	Figma variant
`default`	`Context=default, Theme=light`
`dark`	`Context=default, Theme=dark`
`vendor`	`Context=vendor, Theme=light`
`vendor.dark`	`Context=vendor, Theme=dark`

Only the axis that actually varies gets named. Most elements have just light and dark, so they get a plain Theme=light / Theme=dark property rather than a Context property with one value.

SVG import flattens to vector nodes, so the shape and symbol are not independently recolorable after generation. Use the theme and context variants for color rather than restyling the vectors — that keeps the icons faithful to the shape contract.

Build time and rate limits

A full build is 468 icon requests plus metadata, against an API that allows 1200 icon requests per minute. The whole set therefore fits inside one window and downloads in a single pass. The plugin still identifies itself with a DTPR-Client header so it gets its own rate-limit bucket, honours Retry-After on a 429, and lets a single failed icon drop just that variant rather than the whole element.

The download phase is no longer the bottleneck — it is bounded by network latency rather than by pacing, and the plugin's estimate line reflects that. The remaining time is Figma building the components. Two options cut the request count down further when you only need a refresh:

Option	Requests	Effect
(none)	468	Every context and both themes.
Light theme only	234	Skips every dark-theme icon.
Default context only	274	Skips per-context icons (`vendor`, `identifiable`, …).
Both	137	One icon per element.

Publishing to your team

The plugin is a generator, not something every designer needs. The intended workflow:

One person runs the plugin in an empty Figma file.
That file is published as a Team Library (Assets → Library → Publish).
Everyone else enables the library and drags icons from their Assets panel.

Consumers never install the plugin. Re-run it when a new schema version ships, then re-publish.

DTPR ships beta schema versions regularly. A generated library is a snapshot — the page name and each component's plugin data record which version it came from. Check versions and releases before assuming a published library is current.

Build from source

The plugin lives in the Helpful-Places/dtpr repository under figma-plugin/.

pnpm install
pnpm --filter @dtpr/figma-plugin build      # → dist/code.js + dist/ui.html
pnpm --filter @dtpr/figma-plugin dev        # rebuild on change
pnpm --filter @dtpr/figma-plugin test

Import figma-plugin/manifest.json in Figma instead of the downloaded copy, then use Plugins → Development → Hot reload plugin to pick up changes.

URLs — the icon URL scheme the plugin fetches.
Composed variants — where default, dark, and context colors come from.
REST: icon routes — the HTTP surface underneath.
@dtpr/ui DtprIcon — the same icons rendered in a web app instead.

Edit this pageorReport an issue

URLs

Derive an icon URL from any (version, element, variant) triple.

@dtpr/ui

Framework-neutral helpers, Vue components, and SSR HTML renderer for DTPR content.