Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Logo
description: A component for displaying a brand logo.
sidebar:
  badge:
    text: ⋅
    variant: success
---

```astro live props={{ name: 'logo' }}
---
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
import logoDark from "@/assets/logo-dark.svg"
import logoLight from "@/assets/logo-light.svg"
---

<Logo>
  <LogoImage srcLight={logoLight} srcDark={logoDark} alt="Logo" />
  <LogoText>Fulldev UI</LogoText>
</Logo>
```

## Installation

```bash
npx shadcn@latest add @fulldev/logo
```

## Usage

```ts
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
import logoDark from "@/assets/logo-dark.svg"
import logoLight from "@/assets/logo-light.svg"
```

```astro
<Logo>
  <LogoImage srcLight={logoLight} srcDark={logoDark} alt="Logo" />
  <LogoText>Fulldev UI</LogoText>
</Logo>
```

## Notes

- `Logo` becomes an anchor automatically when you pass `href`.
- `LogoImage` is optional, which makes text-only marks straightforward.
- Use `src` for a single logo, or `srcLight` and `srcDark` when the logo changes
  by theme.
- Use `Logo` for compact brand marks and site headers, not for general-purpose
  hero artwork.

## Example

```astro live
---
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
import logoDark from "@/assets/logo-dark.svg"
import logoLight from "@/assets/logo-light.svg"
---

<Logo href="/">
  <LogoImage srcLight={logoLight} srcDark={logoDark} alt="Logo" />
  <LogoText>Fulldev UI</LogoText>
</Logo>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/logo) for more information on props.