@cssints/iconsAn icon is a style written on scope() (one scope, "icons", whatever the collection): a marker class, a mask kernel and one atomic class per icon that holds the SVG as a data URL. There is no runtime. Install @cssints/icons and a collection (@iconify-json/mdi), or point it at a folder of .svg files.
import { const cn: (...styles: Style[]) => Stylecn, const color: Prop<"color">`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color, const width: Prop<"width">`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/width)width } from "cssints" with { type: "cssints" };
import { const icons: <C extends Collection = Collection>(options: Options) => Icons<IconName<C>>Icons from the `@iconify-json/<collection>` package installed in the project (read from `node_modules` when the
module runs; the project is the working directory), or from the `.svg` files of a directory (relative to the working
directory, named without the extension). Say which collection in the type argument to have the names checked as you
type: `icons<typeof import("@iconify-json/mdi/icons.json")>({ provider: "iconify-json", collection: "mdi" })`. A name
that does not exist is a build error that suggests the nearest one.
One scope, "icons", whatever the collection: its kernels are the same, and `build` is the same code, which the engine
takes as one definition however many times `icons()` runs.icons } from "@cssints/icons" with { type: "cssints" };
// icons.ts: a build-time module (it runs while the build runs, and never reaches the browser)
export const const mdi: Icons<IconName<{
prefix: string;
icons: {
"ab-testing": {
body: string;
};
abacus: {
body: string;
};
"abjad-arabic": {
body: string;
};
"abjad-hebrew": {
body: string;
};
"abugida-devanagari": {
body: string;
};
"abugida-thai": {
body: string;
};
"access-point": {
body: string;
};
"access-point-check": {
body: string;
};
"access-point-minus": {
body: string;
};
"access-point-network": {
body: string;
};
"access-point-network-off": {
body: string;
};
"access-point-off": {
body: string;
};
"access-point-plus": {
body: string;
};
"access-point-remove": {
body: string;
};
account: {
body: string;
};
"account-alert": {
body: string;
};
"account-alert-outline": {
...;
};
... 7620 more ...;
"zodiac-virgo": {
...;
};
};
aliases: {
...;
};
lastModified: number;
width: number;
height: number;
}>>
icons<{
prefix: string;
icons: {
"ab-testing": {
body: string;
};
abacus: {
body: string;
};
"abjad-arabic": {
body: string;
};
"abjad-hebrew": {
body: string;
};
"abugida-devanagari": {
body: string;
};
"abugida-thai": {
body: string;
};
"access-point": {
body: string;
};
"access-point-check": {
body: string;
};
"access-point-minus": {
body: string;
};
"access-point-network": {
body: string;
};
"access-point-network-off": {
body: string;
};
"access-point-off": {
body: string;
};
"access-point-plus": {
body: string;
};
"access-point-remove": {
body: string;
};
account: {
body: string;
};
"account-alert": {
body: string;
};
"account-alert-outline": {
...;
};
... 7620 more ...;
"zodiac-virgo": {
...;
};
};
aliases: {
...;
};
lastModified: number;
width: number;
height: number;
}>(options: Options): Icons<...>
provider: "iconify-json"provider: "iconify-json",
collection: stringcollection: "mdi",
});
export const const brand: Icons<string>brand = icons<Collection>(options: Options): Icons<string>Icons from the `@iconify-json/<collection>` package installed in the project (read from `node_modules` when the
module runs; the project is the working directory), or from the `.svg` files of a directory (relative to the working
directory, named without the extension). Say which collection in the type argument to have the names checked as you
type: `icons<typeof import("@iconify-json/mdi/icons.json")>({ provider: "iconify-json", collection: "mdi" })`. A name
that does not exist is a build error that suggests the nearest one.
One scope, "icons", whatever the collection: its kernels are the same, and `build` is the same code, which the engine
takes as one definition however many times `icons()` runs.icons({ provider: "fs"provider: "fs", dir: stringdir: "src/icons" });
// a component imports them from there: import { mdi, brand } from "./icons.ts" with { type: "cssints" }
export const const close: Styleclose = function cn(...styles: Style[]): Stylecn(const mdi: (name: IconName<{
prefix: string;
icons: {
"ab-testing": {
body: string;
};
abacus: {
body: string;
};
"abjad-arabic": {
body: string;
};
"abjad-hebrew": {
body: string;
};
"abugida-devanagari": {
body: string;
};
"abugida-thai": {
body: string;
};
"access-point": {
body: string;
};
"access-point-check": {
body: string;
};
"access-point-minus": {
body: string;
};
"access-point-network": {
body: string;
};
"access-point-network-off": {
body: string;
};
"access-point-off": {
body: string;
};
"access-point-plus": {
body: string;
};
"access-point-remove": {
body: string;
};
account: {
body: string;
};
"account-alert": {
body: string;
};
"account-alert-outline": {
...;
};
... 7620 more ...;
"zodiac-virgo": {
...;
};
};
aliases: {
...;
};
lastModified: number;
width: number;
height: number;
}>) => Style
color<readonly ["crimson"]>(parts_0: "crimson"): Style`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color("crimson"), width<readonly ["1.5em"]>(parts_0: "1.5em"): Style`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/width)width("1.5em"));
export const const logo: Stylelogo = const brand: (name: string) => Stylebrand("logo");
export const const typo: Styletypo = const mdi: (name: IconName<{
prefix: string;
icons: {
"ab-testing": {
body: string;
};
abacus: {
body: string;
};
"abjad-arabic": {
body: string;
};
"abjad-hebrew": {
body: string;
};
"abugida-devanagari": {
body: string;
};
"abugida-thai": {
body: string;
};
"access-point": {
body: string;
};
"access-point-check": {
body: string;
};
"access-point-minus": {
body: string;
};
"access-point-network": {
body: string;
};
"access-point-network-off": {
body: string;
};
"access-point-off": {
body: string;
};
"access-point-plus": {
body: string;
};
"access-point-remove": {
body: string;
};
account: {
body: string;
};
"account-alert": {
body: string;
};
"account-alert-outline": {
...;
};
... 7620 more ...;
"zodiac-virgo": {
...;
};
};
aliases: {
...;
};
lastModified: number;
width: number;
height: number;
}>) => Style
/* kernel icons.mask, layer _.k; LightningCSS adds -webkit-mask for your targets */
._icons-mask { display: inline-block; width: 1em; height: 1em; background-color: currentColor; mask: var(--icons-svg) no-repeat center / 100% 100%; }
/* the only per-icon rule */
._x1 { --icons-svg: url("data:image/svg+xml,%3Csvg …"); }icons({ provider: "iconify-json", collection }) reads @iconify-json/<collection>/icons.json from the node_modules of the working directory, while the module runs. icons({ provider: "fs", dir }) reads <dir>/<name>.svg (dir is relative to the working directory; the SVG needs a viewBox). The result is a function of the icon name: mdi("home") is a style that goes into cn(), cx() and the conditions like any member. Call icons() in a module of its own, imported with the attribute, as above.icons<typeof import("@iconify-json/mdi/icons.json")>(…) types mdi(name) as the icons and aliases of that collection, and a typo is an error in the editor. Without the type argument, and for fs, a name is any string. In every case a name that does not exist is a build error at the call, with the nearest name when it is close: cssints: icons: no icon "hom" in iconify-json mdi, did you mean home?.currentColor (every one-colour icon of a collection) gets the marker _icons-mask and takes the text color. Any other (a logo with its own colours) gets _icons-image, a background image. This is iconify's own rule. A non-square icon is centred on a square view box, so width and height set its size (1em by default).requires: LightningCSS adds -webkit-mask for targets that have only the prefixed form.fs updates the CSS of the modules that use it, without a touch or a restart (dependsOn, see "Plugins"; 2026-10-09, cssints-04u8). A new SVG in dir is not seen until the module runs again.fs, and a name transform.