Icons and Logos

Yle Design System icons and graphical assets are distributed across three packages depending on use case.

---

What's available

• Regular Icons — icons for UI actions, navigation, media, and social platforms.
• Illustrative Icons — large expressive icons for empty states, onboarding, and confirmation moments.
• Logos & Assets — Yle service logos and graphical assets such as age-rating badges.

---

Package	Purpose
@yleisradio/yds-icons	TypeScript types for icon names and SVG icons.
@yleisradio/yds-icons-react	React SVG components for web.
@yleisradio/yds-icons-react-native	React Native SVG components for mobile.

---

Installation

React (web)

npm install @yleisradio/yds-icons-react

Peer dependencies:

npm install react react-dom @yleisradio/yds-core

React Native (mobile)

npm install @yleisradio/yds-icons-react-native

Peer dependencies:

npm install react react-native react-native-svg @yleisradio/yds-core

Types only

npm install @yleisradio/yds-icons

---

Usage

React

Import icons by their component name directly from the package:

import { Menu, Search, ArrowRight } from '@yleisradio/yds-icons-react';

<Menu />
<Search width={20} height={20} color="currentColor" />
<ArrowRight title="Go to next page" />

React Native

The API is identical — swap the package name:

import { Menu, Search, ArrowRight } from '@yleisradio/yds-icons-react-native';

<Menu />
<Search width={20} height={20} color="currentColor" />

Icon name types

Use @yleisradio/yds-icons when you need to pass or store icon names as strings, for example in a generic icon component:

import type { IconsIconName } from '@yleisradio/yds-icons';

interface Props {
  icon: IconsIconName;
}

Available type exports:

Type	Description
IconsIconName	All Yle icon names (e.g. 'menu', 'search', 'arrow-right').
PlayerIconName	Player-specific icon names (e.g. 'play', 'pause', 'volume-high').
ExternalServiceIconName	External service icon names (e.g. 'facebook', 'youtube').

---

Props

Regular icons (React)

All regular icon components extend the standard SVGProps<SVGSVGElement> interface with two additional props.

Prop	Type	Default	Description
width	string | number	'24'	Width of the icon.
height	string | number	'24'	Height of the icon.
color	string	'currentColor'	Fill colour. Inherits from CSS by default.
title	string	undefined	Accessible label. When set, the icon is not hidden from assistive technology.
titleId	string	undefined	id applied to the <title> element, used with aria-labelledby.

Icons without a title are rendered with aria-hidden="true". Provide a title when the icon carries meaning that is not conveyed by surrounding text.

Regular icons (React Native)

All regular icon components accept SvgProps from react-native-svg.

Prop	Type	Default	Description
width	string | number	'24'	Width of the icon.
height	string | number	'24'	Height of the icon.
color	string	'currentColor'	Fill colour.

Illustrative icons (React Native only)

Illustrative icons extend SvgProps with two additional props for theming.

Prop	Type	Default	Description
theme	'light' | 'dark' | undefined	undefined	Force a specific colour theme. When undefined, the icon uses its built-in colours. Prefer using the OnDark variant over setting theme="dark" manually.
colors	{ primary: string; secondary: string }	undefined	Override the primary and secondary colours directly.