---
url: /api/renderers/web-components/src/variables/icon.md
---
[pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / icon

# Variable: icon

> `const` **icon**: [`ElementDefinition`](../interfaces/ElementDefinition.md)

Alpha

`<instui-icon>` — an inline SVG glyph from the pantoken icon set. The `name` attribute picks the
glyph, `size` (any CSS length, default `1em`) sizes it, `color` (any CSS color) tints it, and
`margin` adds spacing around it (InstUI keywords like `small`). Renders the SVG into its own light
DOM, sized/coloured via inline styles on the host, so it inherits `currentColor` like text.

## Example

```html
<instui-icon name="arrow-left" margin="small"></instui-icon>
<instui-icon name="star" size="1.5rem" color="gold" margin="small"></instui-icon>
```