Icons — Teasim

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:

css

@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:blue-500. The Icons Storybook catalogue shows the preset’s syntax alongside searchable examples.

Write an icon token

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

html

<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:

html

<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:

html

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

Applications with a programmatic generator integration can add local collections with presetIcons. For this example, first install the dataset with bun add -d @iconify-json/tabler (or npm install -D @iconify-json/tabler):

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

const iconsPreset = presetIcons({
  collections: { tabler: () => tabler },
  warn: true,
});

The application must install and supply that dataset. Generation does not download or install collections. warn: true reports a missing icon or failed custom loader; without it, unresolved tokens emit nothing. Import cn from the application dependency @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.