---
title: Logo
description: The OpenPerf mark, drawn in the accent colour.
---

```tsx
import { Logo } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function LogoBasic() {
  return (
    <Preview>
      <Logo.Root />
    </Preview>
  );
}
```

- The sidebar header uses the default size and colour.
- Sign-in and other pages outside the shell use `Standalone.Logo` from [Standalone](/deft/components/standalone), which draws the mark on a raised tile.
- Elsewhere, size it with a class; `fill-current` with a text colour draws it in that colour.
- The mark carries an "OpenPerf" `<title>`, so it needs no `aria-label`.

## API

Other props go to the native `svg`.