Collections

Export design tokens

An icon set only becomes a system when the codebase can name it. Generate tokens from your saved icons and paste them straight into the repo.

Showing a sample - favourite some icons and they'll be used here instead.

css

:root {
  --icon-lucide-heart: url("/api/icon/lucide/heart");
  --icon-lucide-search: url("/api/icon/lucide/search");
  --icon-mdi-account: url("/api/icon/mdi/account");
  --icon-ph-gear-six: url("/api/icon/ph/gear-six");
}

.icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

How to use it

Pick the format that matches your stack

CSS variables suit plain stylesheets and design-system packages. JSON is right when a build step generates components. Tailwind gives you icon-* utilities. TypeScript constants stop typos in icon names from reaching production.

Questions

Token FAQ

CSS and Tailwind output references the CDN by URL, so icons load lazily and cache well. If you need zero external requests, use the CLI to vendor the SVGs and point the tokens at local paths.

Upstream sets occasionally rename glyphs. Pin a version with the CLI lockfile and regenerate tokens deliberately rather than on every install.

Yes - open the collection and choose Export, or point the CLI at the collection name to generate the same tokens in CI.

The JSON manifest carries the set and licence for every icon, which makes attribution a build artefact instead of a memory exercise.

Automate it in CI

The CLI generates the same tokens on every build, so the repo never drifts from the vault.

Use the CLI Back to collections