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

`.instui-logo` — The logo system preserves each product logo's colors and aspect ratio. Explicit current-color variants inherit the text color.

## 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>
```

-automatica11y

```html
<span class="instui-logo -logo-canvas-horizontal-color" role="img" aria-label="Canvas logo" data-a11y-root></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` |
| `--pantoken-logo-fill` | — | `transparent` |
| `--pantoken-logo-image` | `<url>` | `url("data:image/svg+xml` |
| `--pantoken-logo-mask` | — | `none` |