---
title: "Logo tile"
description: "An organization’s, a clinic’s or an integration’s logo on a white tile, at a product mark’s sizes so the two sit side by side. It tries each source in turn and shows an icon, or the initials, while none loads."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Logo tile

## Integrations beside a product

```tsx
import { PlugsConnectedIcon } from '@phosphor-icons/react';
import { LogoTile, ProductMark } from '@arbol-ai/ui';

const LOGO =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='11' fill='%232563eb'/%3E%3Cpath d='M10 17l4 4 8-9' stroke='white' stroke-width='3' fill='none'/%3E%3C/svg%3E";

<ul className="space-y-3 text-sm">
  <li className="flex items-center gap-2.5">
    <ProductMark product="agenda" />
    Agenda
  </li>
  <li className="flex items-center gap-2.5">
    <LogoTile name="Salud Total" src={['data:image/png;base64,AAAA', LOGO]} />
    Salud Total
  </li>
  <li className="flex items-center gap-2.5">
    <LogoTile icon={<PlugsConnectedIcon weight="duotone" />} name="Custom server" />
    Custom server (no logo yet)
  </li>
  <li className="flex items-center gap-2.5">
    <LogoTile name="Nueva EPS" />
    Nueva EPS (its initials)
  </li>
</ul>
```

## The current logo in a settings row

With alt, the tile is an image that screen readers name.

```tsx
import { BuildingsIcon } from '@phosphor-icons/react';
import { LogoTile } from '@arbol-ai/ui';

const LOGO =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='11' fill='%232563eb'/%3E%3Cpath d='M10 17l4 4 8-9' stroke='white' stroke-width='3' fill='none'/%3E%3C/svg%3E";

<div className="flex items-center gap-3">
  <LogoTile alt="Current logo" icon={<BuildingsIcon />} name="Clínica Norte" size="xl" src={LOGO} />
  <span className="text-muted-foreground text-sm">PNG, SVG or JPG, ideally square.</span>
</div>
```

## Source

The examples above are [`src/blocks/logo-tile/logo-tile.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/logo-tile/logo-tile.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/logo-tile/index.mdx