@teacss/preset-icons

Pure-CSS icon utilities with no client-side runtime.

Usage

@preset "standard";
@preset "icons";
@teacss;

<span class="icon:lucide-sun"></span>
<span class="icon:carbon-sun"></span>
<span class="icon:flagpack-nl"></span>
<span class="icon:crypto-btc"></span>

The grammar is icon:<collection>-<icon-name>. The preset bundles Lucide, Carbon, Flagpack, and Cryptocurrency Color (named crypto) and works offline. Datasets load only when a matching icon is used.

Names are case-insensitive and accept each collection's canonical kebab-case or camelCase form. Arbitrary re-hyphenation emits no CSS. Missing icons do not fall back to a shorter collection name.

mode: "auto" uses masks for currentColor icons and background images for multicolor icons. Override one icon with ?mask, ?bg, or ?auto.

.logo {
  background-image: icon("lucide-sun");
}

Custom collections

Pass local data or a loader through collections:

import { icons as tabler } from "@iconify-json/tabler";
import { presetIcons } from "@teacss/preset-icons";

presetIcons({ collections: { tabler: () => tabler } });

Generation never downloads or installs collections. An unknown collection, missing icon, or failed loader emits nothing. Set warn: true to report it. Programmatic integrations can call preset.api.resolveIcon(name).

Runtime merging

The /merge entry exports an icon-only cn and pluginIcon:

import { createMerger } from "@teacss/classes";
import { cn as iconCn, pluginIcon } from "@teacss/preset-icons/merge";

const cn = createMerger({ plugins: [pluginIcon] });

The application cn from teacss already combines icon and Standard merge metadata. Merging validates only the canonical token shape, not whether the icon exists.

Pre-1.0. Output follows the bundled Iconify datasets.