Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoPrinciplesAccessibilityUsageDemos & APINavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Logo

StableAccessible

Logo is used to identify the site or application as an official City of Helsinki service.

See the logo visual asset documentation for more information about principles of using the City of Helsinki logo.

Principles

  • Logo is automatically included in HDS Navigation and HDS Footer (not yet released) components. Use the Logo component sparingly in other parts of the service.
  • You should include the service name next to the logo. This helps the user more easily identify which city service they are currently using.
  • HDS Logo component includes translations for both Finnish and Swedish. Use translation depending on the locale the user has chosen. Swedish and Scandinavian languages use the sv variant while other languages use fi variant.
  • The Logo component should act as a link to the main page of the service.
  • This component is solely for the City of Helsinki logo. Do not use this component for logos of other parties.

Accessibility

  • A text alternative must always be provided for logos using the WAI-ARIA definition aria-label. See WCAG 2.1 Text Alternatives guideline for more information.
    • When using the logo alone without a service name, provide a localised aria-label "City of Helsinki".
    • When using the logo with the service name, provide a localised aria-label "City of Helsinki: [Name of the service]".
  • The colour contrast between the logo and its background must comply with AA Level contrast ratios. You can find more information about accessible color combinations in Colour design token documentation.

Usage

Default

React code example:

<Logo language="fi" size="large" />
<Logo language="sv" size="large" />

Logo sizes

React code example:

<Logo language="fi" size="small" />
<Logo language="fi" size="medium" />
<Logo language="fi" size="large" />
<Logo language="sv" size="small" />
<Logo language="sv" size="medium" />
<Logo language="sv" size="large" />

Demos & API

Core

Not included in hds-core!

React

Logo in hds-react