React Components

# Logo

## Overview

---

The **Logo** component is a visual representation of the official brand.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Logo</td></tr><tr><th scope="row">Also known as</th><td>-</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/branch/LC3NLyBG7rTBB4z2BrgFtx/ODS---UI-Kit?node-id=14404-2175&amp;t=hWEYBdYcCp9xXYYY-0" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/logo" target="_blank">Github<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

Use the **Logo** component to display the brand identity in key areas of the interface, such as headers, navigation bars, footers, or branded sections.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use the Logo component to represent the brand identity consistently across your interfaces |
| - Choose the appropriate variant based on available space and hierarchy |
| - Ensure adequate spacing around the logo so it remains clearly visible and legible |

| ❌ Don't |
| --- |
| - Do not change logo colors outside of the approved brand versions |
| - Do not use the Logo as an interactive element (button or link) unless explicitly wrapped by a dedicated navigation component |
| - Do not overcrowd the logo with surrounding content |

## Placement

---

The **Logo** component can be used in various layouts, including:

-   Application headers and top navigation bars
-   Sidebars
-   Footers
-   Splash screens or landing pages
-   Branded sections within a page

## Variation

---

### Variant

#### Emblem

Displays the logo emblem only. Best suited for compact spaces (e.g. collapsed navigation, mobile headers, favicon-like usage).

#### Default

Displays the logo emblem and wordmark horizontally.

Recommended for standard headers and navigation bars where horizontal space is available.

### Size

#### Small

Use in constrained spaces such as mobile headers, compact navigation bars, or secondary branding areas.

#### Medium

Default choice for standard application headers and footers.

#### Large

Use for high-visibility contexts such as landing pages, splash screens, or branded hero sections.

## Navigation

---

The **Logo** component is non-interactive and does not receive keyboard focus. It is used solely for displaying the brand identity and does not impact keyboard navigation.

If the logo needs to act as a link (e.g. redirect to the homepage), it must be wrapped in a separate interactive element that handles navigation and focus.

## Accessibility

---

When the logo is used within a navigational element (for example, as a link in a header), an `aria-label` on the link should reflect the intended action, such as:

-   "Navigate to the homepage"
-   "Return to the [Brand name] home page"

[](https://www.ovhcloud.com)

```jsx
<a
  aria-label="Return to the OVHcloud home page"
  href="https://www.ovhcloud.com"
>
  <Logo />
</a>
```

Screen readers will announce the `aria-label`.