---
url: /api/css/logo.md
---
# CSS: logo

`.instui-logo` — The logo system: `.instui-logo` sizing plus the shared `-logo-<name>` painter that masks a product logo (in `currentColor`) before any element, preserving the logo's own aspect ratio instead of a fixed 1:1 box.

## Accessibility

A logo is meaningful, not decorative — give the host element `role="img"` and an `aria-label` naming the product; never mark it `aria-hidden`.

## Usage

```css
@import "@pantoken/plugin-custom-components/custom-components.css";
```

## Examples

```html
<span class="instui-logo -logo-canvas-horizontal-color" role="img" aria-label="Canvas logo"></span>
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-logo-*` | Set the glyph token (`--pantoken-glyph`) and its aspect ratio (`--pantoken-logo-aspect`), then render both via the shared painter (for example `-logo-canvas-horizontal-color`, from `@pantoken/plugin-logos`). |

## Pseudo-elements

| Pseudo-element | Description |
| --- | --- |
| `::before` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--pantoken-glyph` | `<url>` | `url("data:image/svg+xml` |
| `--pantoken-logo-aspect` | — | `310.23 / 78.94` |