---
url: /api/formats/components/src/functions/iconGlyphsCss.md
---
[pantoken-root](../../../../index.md) / [formats/components/src](../index.md) / iconGlyphsCss

# Function: iconGlyphsCss()

> **iconGlyphsCss**(`names`, `options?`): `string`

Beta

Build the icon-glyph stylesheet: one `.-icon-<name>` class per icon that points
`--pantoken-glyph` at the matching `--instui-icon-<name>` token. Kept out of the component bundle
(it's large); ships as its own `icons.css`. Pass the icon names (e.g. from `@pantoken/icons`).

## Parameters

### names

readonly `string`\[]

Icon names without the `--instui-icon-` prefix (e.g. `["megaphone", "check"]`).

### options?

[`IconGlyphsOptions`](../interfaces/IconGlyphsOptions.md) = `{}`

[IconGlyphsOptions](../interfaces/IconGlyphsOptions.md) for optional icon token values and a prefix.

## Returns

`string`

The CSS string.

## Example

```ts
import { iconGlyphsCss } from "@pantoken/components";
import { icons } from "@pantoken/icons";

const css = iconGlyphsCss(icons.map((i) => i.name)); // .-icon-megaphone { --pantoken-glyph: … }
```

This is the glyph-token half of the icon system (the `.-icon-<name>` modifiers, shipped as
`icons.css`); the `icon` utility is the painter half (the shared `::before`). They share the `icon`
demo.