# EuiHeaderLogoComponent

**Type:** component



Logo component for header placement, displaying organization branding with automatic theme and language adaptation.
Provides clickable logo linking to home page with support for custom or default European Commission logos.
Automatically switches between light and dark logo variants based on active theme.
Integrates with EuiAppShellService to register logo presence and with translation service for language-specific logos.
Supports custom logo URLs or defaults to ECL (Europa Component Library) logo assets.

```html
<!-- Default EC logo -->
<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-logo></eui-header-logo>
      <eui-header-environment>DEV</eui-header-environment>
      <eui-header-app appName="MyWorkplace"></eui-header-app>
    </eui-header>
  </eui-app-header>
</eui-app>

<!-- Custom logo -->
<eui-header-logo
  logoUrl="assets/custom-logo.svg"
  homeUrl="/home"
  logoHeight="48px"
  logoWidth="200px">
</eui-header-logo>
```

### Accessibility
- Logo is clickable and navigates to home page
- Provides visual branding and orientation
- Alt text provided via translation service
- Keyboard accessible via RouterLink
- Focus visible for keyboard navigation

### Notes
- Must be used within eui-header for proper layout
- Positioned at the start of the header (leftmost)
- Automatically adapts to active theme (light/dark)
- Language-specific logos loaded based on active language
- Default logos from ECL assets (logo-ec--en, logo-ec--fr, etc.)
- Custom logoUrl overrides default ECL logos for both themes
- homeUrl defaults to '..' for parent route navigation
- Logo dimensions customizable via logoHeight and logoWidth
- Registers/unregisters with EuiAppShellService on init/destroy
- SVG format recommended for scalability


**Selector:** `eui-header-logo`

## Inputs
- **homeUrl**: `string` - URL or route path for the home page navigation when logo is clicked. Supports both relative and absolute paths for Angular routing.
- **logoHeight**: `string` - CSS height value for the logo image. Accepts any valid CSS height unit (px, rem, %, etc.).
- **logoUrl**: `string` - Custom URL path to a logo image file. When provided, overrides the default ECL logo and uses the specified image for both light and dark themes. Optional - defaults to language-specific ECL logos when not provided.
- **logoWidth**: `string` - CSS width value for the logo image. Accepts any valid CSS width unit (px, rem, %, etc.).