---
title: "Logo"
description: "A IIIF provider's logo, each of the resource's providers' in turn, its alt text the provider's name; inside a Provider, that provider's."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/logo
version: "4"
---
# Logo
\ (web components: \)0.9 kB added to a page with a Root, gzipped (web components: 16 kB added to a page with a \, styles included, gzipped)
A provider’s logo, named by the provider.
> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.
**React**
```jsx
```
**Web components**
```html
```
## API reference
Reads the `logo` of each of the resource’s providers (its `provider`) and renders an `img` for each, the first logo a provider gives. Inside a [`Provider` (web components: ``)](https://clover.iiif.library.northwestern.edu/docs/primitives/provider), it shows the logo of the provider it is drawn for. It renders nothing while there is none, nor for a logo whose image fails to load, never the browser’s broken picture, and its other props go to each `img`.
Its `alt` is the provider’s name, else its homepage’s, else “Logo”: give your own, or `alt=""` where the name is written beside it. It is `--clover-logo-height` tall, 1.618rem by default, and as wide as that makes it, never wider than its room.
**React**
| Prop | Type | Default | Description |
| ----------- | ---------------------------------- | ------------------- | ---------------------------------------------------------------- |
| `of` | `"manifest" \| "canvas"` | `"manifest"` | Whose providers: the resource’s, or the Canvas the reader is on. |
| `value` | `{ id, width, height }`, providers | — | Logos to show instead: images, or providers with theirs. |
| `alt` | `string` | the provider’s name | Its alt text. |
| `className` | `string` | — | Added to `clover-logo`. |
**Web components**
### ``
A provider's logo, its alt text the provider's name: each of the resource's providers' in turn. Inside a clover-provider it draws nothing itself, and the provider draws each provider's logo in its place.
| Name | Type | Default | Description |
| -------- | ------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------- |
| `of` | `"manifest" \| "canvas"` | `manifest` | Whose property: the Manifest's, or the Canvas in view's. |
| `value` | `string (a URL or JSON)` | — | Logos: images, or Agents with theirs, instead of the root's: as text, a URL or JSON. Outside a root, the one to show. |
| `alt` | `string` | — | Its alt text instead of the provider's name: "" where the name is written beside it. |
| `.value` | `Record \| Array> \| null` | — | As a property: Logos: images, or Agents with theirs, instead of the root's. |
## Examples
### Its size
Set `--clover-logo-height` for a larger or smaller logo; its width follows.
> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.
**React**
```jsx
```
**Web components**
```html
```