Icons

The Icons preset generates pure CSS icon classes from bundled SVG data. It adds no browser-side icon runtime and does not require Standard. Enable it explicitly in the project’s CSS entry:

@presets "icons";
@source "./src/**/*.{astro,html,js,jsx,ts,tsx}";
@teacss;

Add @presets "standard"; separately when the same markup also uses Standard utilities such as w:4, h:4, or text-color:primary-900. The Icons Storybook catalogue ↗ shows the preset’s syntax alongside searchable examples.

Write an icon token

The grammar is icon:<collection>-<icon-name>:

<span class="icon:lucide-sun" aria-hidden="true"></span>
<span class="icon:logo-github" role="img" aria-label="GitHub"></span>
<span class="icon:carbon-sun" aria-hidden="true"></span>
<span class="icon:flagpack-nl" role="img" aria-label="Netherlands"></span>
<span class="icon:crypto-btc" role="img" aria-label="Bitcoin"></span>

The preset bundles Logo, Lucide, Carbon, Flagpack, and Cryptocurrency Color (written crypto in classes). It loads only datasets needed by used icons, and generation works offline. Names are case-insensitive, but retain a collection’s canonical kebab-case or camelCase boundaries; arbitrary re-hyphenation will not resolve. An unknown collection or missing icon generates no CSS.

Rendering modes

The default auto mode uses a CSS mask when the SVG contains currentColor, so monochrome Lucide and Carbon icons inherit text color. It uses a CSS background image for multicolor Flagpack and Crypto icons, preserving their colors. Logo provides monochrome brand glyphs that follow currentColor. Override a single icon with ?mask, ?bg, or ?auto:

<span class="icon:lucide-sun?mask" aria-hidden="true"></span>
<span class="icon:flagpack-nl?bg" role="img" aria-label="Netherlands"></span>

A mask forces one color; a background image preserves source colors. The icon rule supplies inline-block display and an SVG image; size and surrounding layout remain the application’s responsibility. For example, use CSS width: 1.25em; height: 1.25em on a standalone icon or Standard sizing utilities when that preset is enabled.

Accessibility and custom collections

An icon-only action needs an accessible button name; the icon itself is decorative. A meaningful standalone icon needs its own text alternative:

<button type="button" aria-label="Search">
  <span class="icon:lucide-search" aria-hidden="true"></span>
</button>

A build adapter can register another local Iconify collection through presetOptions.icons.collections. For example, install the Tabler dataset with bun add -d @iconify-json/tabler and pass it to the Vite plugin:

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

export default { plugins: [teacss({ presetOptions: { icons: { collections: { tabler } } } })] };

Keep icons in the CSS entry. The standalone CLI uses the bundled collections; it has no custom collection option. In @teacss/classes, all icon:value tokens share one conflict identity, including unknown names; the final merged token can still emit no CSS. Merging does not validate the icon catalogue.

Browse a collection below. Each Storybook catalogue is searchable and lets you copy the exact icon: token; the collection pages here explain usage without duplicating thousands of icon names.