# Kesko Design System > Kesko Design System is a modular design infrastructure for Kesko Oyj's internal product teams. It ships design tokens, a color palette generator, 345+ SVG icons (with React components), and the SkattaSansUI typeface — all as installable npm packages. The system is framework-agnostic, built on web standards, and treats LLM-friendliness as a first-class requirement alongside accessibility and code quality. ## Status Kesko Design System is in active alpha. APIs and token values may change before stable release. Icons and fonts packages are at release candidate stage and ready for piloting. ## Packages - `@kesko/iconography` — 345+ SVG icons as ES modules and React components. Install: `pnpm add @kesko/iconography` - `@kesko/tokens` — Design tokens (color, brand, font, layer, motion, opacity, radius, shadow, size, space) compiled from YAML via Style Dictionary to CSS, SCSS, LESS, JS, TS, JSON, iOS, Android. Install: `pnpm add @kesko/tokens` - `@kesko/color` — Contrast-based color palette generator. 9 families × 12 steps (100–1200). Feeds into `@kesko/tokens`. - `@kesko/fonts` — SkattaSansUI typeface as `@font-face` declarations (CSS, SCSS, LESS) with woff2/woff files. Install: `pnpm add @kesko/fonts` - `@kesko/components`, `@kesko/css`, `@kesko/themes` — Planned, not yet available. ## Naming conventions Everything uses the `k-` prefix. Lowercase ASCII and hyphens only. - CSS custom properties: `--k-{component}-{property}` (e.g. `--k-button-border-radius`) - Design tokens: `k-{category}-{name}-{variant}` (e.g. `k-color-text-accent`, `k-font-size-md`) - CSS classes: `.k-{name}-{modifier}` (e.g. `.k-button-outline`) - Components: `` (e.g. ``) - Sizes use the t-shirt scale: `3xs`, `2xs`, `xs`, `sm`, **`md`** (default), `lg`, `xl`, `2xl`, `3xl` ## Architecture - Component library ships React components for React and Next.js applications. Every component also includes a plain HTML version styled with our CSS framework making them compatible with any framework, or no framework at all. - CSS uses logical properties (`inline-size` not `width`, `block-size` not `height`). Colors, font sizes, and other values must use CSS custom properties — no raw values. - Versioning follows Semantic Versioning. See the [changelog](https://kesko.design/changelog.md) for release history. --- # Button > Button component for interface actions. Renders as a regular link when href is provided. Buttons should primarily be used to trigger events or actions. ## Examples ### Default ```tsx import { Button, Stack } from "@kesko/components"; import { IconBasketAddTo, IconExternalLink } from "@kesko/iconography/react"; export default () => ( ); ``` ```html
``` ### As link ```tsx import { Button, Stack } from "@kesko/components"; import { IconExternalLink, IconDownload } from "@kesko/iconography/react"; export default () => ( ); ``` ```html
Visit website Download PDF
``` ### Custom style ```tsx import type { CSSProperties } from "react"; import { Button, Stack } from "@kesko/components"; export default () => ( ); ``` ```html
``` ### Events ```tsx import { Button } from "@kesko/components"; export default () => ( ); ``` ```html ``` ### Expand (full width) ```tsx import { Button, Stack } from "@kesko/components"; import { IconArrowUp } from "@kesko/iconography/react"; export default () => ( ); ``` ```html
``` ### Inverted ```tsx import { Fragment } from "react"; import { Button, Stack } from "@kesko/components"; import { IconBasketAddTo } from "@kesko/iconography/react"; const sizes = [ { size: "sm" as const, label: "Small" }, { size: "md" as const, label: "Medium" }, { size: "lg" as const, label: "Large" }, ]; export default () => ( {sizes.map(s => ( ))} ); ``` ```html
``` ### Loading state ```tsx import { Button, Stack } from "@kesko/components"; export default () => ( ); ``` ```html
``` ### Sizes ```tsx import { Fragment } from "react"; import { Button, Stack } from "@kesko/components"; import { IconBasketAddTo } from "@kesko/iconography/react"; const variants = [ { key: "primary", label: "Primary", props: { variant: "primary" as const } }, { key: "secondary", label: "Secondary", props: { variant: "secondary" as const } }, { key: "default", label: "Default", props: {} }, { key: "plain", label: "Plain", props: { variant: "plain" as const } }, { key: "text", label: "Text", props: { variant: "text" as const } }, ]; const sizes = [ { size: "sm" as const, label: "Small" }, { size: "md" as const, label: "Medium" }, { size: "lg" as const, label: "Large" }, ]; export default () => ( {variants.map(row => ( {row.label} {sizes.map(s => ( ))} ))} ); ``` ```html
``` ### Sizes (loading) ```tsx import { Button, Stack } from "@kesko/components"; const variants = [ { key: "primary", label: "Primary", props: { variant: "primary" as const } }, { key: "secondary", label: "Secondary", props: { variant: "secondary" as const } }, { key: "default", label: "Default", props: {} }, { key: "plain", label: "Plain", props: { variant: "plain" as const } }, { key: "text", label: "Text", props: { variant: "text" as const } }, ]; const sizes = ["sm", "md", "lg"] as const; export default () => ( {variants.map(row => ( {row.label} {sizes.map(size => ( ))} ))} ); ``` ```html
``` ### Transparent ```tsx import { Fragment } from "react"; import { Button, Stack } from "@kesko/components"; import { IconBasketAddTo } from "@kesko/iconography/react"; const sizes = [ { size: "sm" as const, label: "Small" }, { size: "md" as const, label: "Medium" }, { size: "lg" as const, label: "Large" }, ]; export default () => ( {sizes.map(s => ( ))} ); ``` ```html
``` ### Variants ```tsx import { Button, Stack } from "@kesko/components"; import { IconBasketAddTo } from "@kesko/iconography/react"; export default () => ( ); ``` ```html
``` ## Props - `variant` — `"default" | "primary" | "secondary" | "plain" | "text" | "inverted"` (default: `"default"`) The style variant of the button. - `size` — `"sm" | "md" | "lg"` (default: `"md"`) The size of the button. - `expand` — `boolean` (default: `false`) Makes the button fit its container. - `transparent` — `boolean` (default: `false`) Removes the background from the default and plain variants. - `disabled` — `boolean` (default: `false`) Disables the component. Native `disabled` on buttons, `aria-disabled` on links. - `loading` — `boolean` (default: `false`) Shows loading state with spinner. - `aria-label` — `string` Accessible name. Required for icon-only buttons. - `aria-labelledby` — `string` `id` of an element that labels this button. - `aria-describedby` — `string` `id` of an element that describes this button. - `href` — `string` Renders as an anchor element. - `target` — `"_self" | "_blank" | "_parent" | "_top"` Where to open the linked URL. - `download` — `boolean | string` Triggers a file download. Pass `true` to use the server filename or a string to override it. - `routerOptions` — `RouterOptions` Options forwarded to the registered router's `navigate` function when clicked. Only effective inside a react-aria `RouterProvider`. Shape depends on your router (e.g. Next's `{ scroll: false }`). ## Events - `onPress` — `(event: PressEvent) => void` Handler called on press (mouse, touch, or keyboard). Replaces `onClick`. - `onPressStart` — `(event: PressEvent) => void` Handler called when a press interaction starts. - `onPressEnd` — `(event: PressEvent) => void` Handler called when a press interaction ends (success or cancel). - `onPressUp` — `(event: PressEvent) => void` Handler called when a press is released over the target. - `onPressChange` — `(isPressed: boolean) => void` Handler called when the press interaction state changes. - `onFocus` — `(event: FocusEvent) => void` Handler called when the element receives focus. - `onBlur` — `(event: FocusEvent) => void` Handler called when the element loses focus. ## CSS custom properties - `--k-button-bg` (default: `var(--k-color-bg)`) Overrides the background color. - `--k-button-text` (default: `var(--k-color-text-link)`) Overrides the text color. - `--k-button-border` (default: `var(--k-color-text-link)`) Overrides the border color. - `--k-button-radius` (default: `var(--k-radius-button)`) Overrides the border radius. - `--k-button-focus` (default: `var(--k-color-border-focus)`) Overrides the focus ring color. - `--k-button-bg-hover` (default: `var(--k-button-bg)`) Overrides the hover background color. - `--k-button-bg-active` (default: `var(--k-button-bg)`) Overrides the pressed background color. - `--k-button-text-hover` (default: `oklch(from var(--_k-button-text) calc(l + 0.115) calc(c + 0.019) calc(h + 2))`) Overrides the hover text color. - `--k-button-text-active` (default: `oklch(from var(--_k-button-text) calc(l + 0.125) calc(c + 0.019) calc(h + 2))`) Overrides the pressed text color. - `--k-button-ring-hover` (default: `oklch(from var(--_k-button-border) calc(l + 0.115) calc(c + 0.019) calc(h + 2))`) Overrides the grow-ring color on hover. - `--k-button-ring-active` (default: `oklch(from var(--_k-button-border) calc(l + 0.125) calc(c + 0.019) calc(h + 2))`) Overrides the grow-ring color when pressed. - `--k-button-height` (default: `calc(var(--k-font-leading-sm) + var(--k-space-button) * 2 + var(--k-size-border-button) * 2)`) Overrides the button height at the active size. --- # Spinner > Spinner component is an animated icon that lets users know content or result of an action is being loaded. ## Examples ### Default ```tsx import { Spinner } from "@kesko/components"; export default () => ; ``` ```html ``` ### Sizes ```tsx import { Spinner, Stack } from "@kesko/components"; export default () => ( ); ``` ```html
``` ## Props - `size` — `"sm" | "md" | "lg" | "xl" | "2xl"` (default: `"md"`) The size of the spinner. - `label` — `string` (default: `"Loading"`) Accessible label for the spinner. Defaults to "Loading". ## CSS custom properties - `--k-spinner-color` (default: `currentColor`) Overrides the spinner color. - `--k-spinner-size` (default: `var(--k-size-component-spinner)`) Overrides the spinner size. --- # Stack > Stack component manages the vertical or horizontal layout of direct children using flexbox and adjustable spacing. ## Examples ### Default ```tsx import { Stack } from "@kesko/components"; export default () => (
First
Second
Third
 ); ``` ```html
First
Second
Third
``` ### Column ```tsx import { Button, Stack } from "@kesko/components"; export default () => ( ); ``` ```html
``` ### Row ```tsx import { Button, Stack } from "@kesko/components"; export default () => ( ); ``` ```html
``` ## Props - `direction` — `"column" | "row"` (default: `"column"`) Layout direction. Defaults to "column". - `gap` — `"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"` (default: `"md"`) Gap between children, mapped to the `--k-space- ` scale. Defaults to "md". - `align` — `"start" | "center" | "end" | "stretch"` (default: `"start"`) Cross-axis alignment. Defaults to "start". - `wrap` — `boolean` (default: `false`) Allow items to wrap to a new line when they overflow the container. ## CSS custom properties - `--k-stack-gap` (default: `var(--k-space-md)`) Overrides the gap between children. --- # Visually hidden > Visually hidden component hides content visually while retaining readability by screen readers for accessibility. ## Examples ### Default ```tsx import { VisuallyHidden } from "@kesko/components"; export default () => (

The text below is visually hidden but accessible to screen readers: This text is only visible to assistive technology.

); ``` ```html

The text below is visually hidden but accessible to screen readers: This text is only visible to assistive technology.

``` --- # Components > Kesko’s component library ships React components for React and Next.js applications. Every component also includes a plain HTML version styled with our CSS framework, usable in any project. ## Available components (4) - [Button](/components/button/) (draft) — Button component for interface actions. Renders as a regular link when href is provided. Buttons should primarily be used to trigger events or actions. - [Spinner](/components/spinner/) (draft) — Spinner component is an animated icon that lets users know content or result of an action is being loaded. - [Stack](/components/stack/) (draft) — Stack component manages the vertical or horizontal layout of direct children using flexbox and adjustable spacing. - [Visually hidden](/components/visually-hidden/) (draft) — Visually hidden component hides content visually while retaining readability by screen readers for accessibility. --- # CSS framework > Kesko CSS framework ships the full set of the CSS custom properties, Skatta Sans UI typeface, and Tailwind-style utility classes, with optional component classes as an add-on. ## Installation To install the CSS framework as a dependency in your project, run: ```sh [npm] npm install @kesko/css ``` ```sh [pnpm] pnpm add @kesko/css ``` ```sh [yarn] yarn add @kesko/css ``` ```sh [bun] bun add @kesko/css ``` > Warning: Kesko CSS Framework is in active development and not yet ready for production use. APIs documented may change without notice. ## Usage Import the base stylesheet into your project: ```css @import "@kesko/css/dist/kesko.min.css"; ``` This gives you: 1. All `--k-*` custom properties on `:root` 2. `@font-face` declarations for SkattaSansUI (woff2 + woff) 3. Utility classes for colors, typography, spacing, borders, radius, and shadows ### Component classes (optional) The component classes that mirror `@kesko/components` ship as a separate stylesheet. Load it when you need those components in plain HTML: ```css @import "@kesko/css/dist/kesko.min.css"; @import "@kesko/css/dist/components.min.css"; ``` React consumers do not need this import. `@kesko/components` pulls in the matching CSS per component automatically. ### Applying a brand theme To apply a brand theme on top, add a theme override from `@kesko/themes`: ```css @import "@kesko/css/dist/kesko.min.css"; @import "@kesko/themes/dist/k-rauta.css"; ``` Because all utility classes reference design token custom properties via `var()`, they automatically adapt when a theme overrides those properties. There is no need for dark mode utility prefixes; swapping a theme file handles it transparently. ## Utility classes Utility class names follow Tailwind CSS conventions, prefixed with `k-`. All directional utilities use CSS logical properties for RTL support. ### Text colors Set `color` from semantic text tokens. ```html

Default text

Secondary text

Accent text

``` ### Background colors Set `background-color` from semantic background, status, fill, and surface tokens. ```html
Default background
Muted surface
Accent surface
``` ### Borders The base `.k-border` class applies a solid border using `--k-size-border` width and `--k-color-border` color. Directional variants use CSS logical properties. Color variants change only the `border-color`. ```html
All sides
Top only
Active border color
``` ### Font sizes Set `font-size` from font size tokens. Uses the `text-` prefix following Tailwind convention. ```html

Small text

Large text

Heading

``` ### Font weights ```html Normal Bold Black ``` ### Font families ```html

Sans-serif text

Monospace text ``` ### Line heights ```html

Tight leading

Comfortable leading

``` ### Padding Set `padding` from space tokens. Directional variants use CSS logical properties. ```html
16px padding on all sides
24px inline, 12px block
32px padding at block-start
``` Available suffixes: `k-p`, `k-px`, `k-py`, `k-ps`, `k-pe`, `k-pt`, `k-pb`. Available sizes: `4xs`, `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`. ### Margin Same directional pattern as padding (`k-m`, `k-mx`, `k-my`, `k-ms`, `k-me`, `k-mt`, `k-mb`), plus `auto` helpers for centering. ```html
16px margin on all sides
Centered block
``` ### Gap Set `gap` from space tokens, used with flexbox or grid layouts. ```html
A
B
C
``` ### Border radius Set `border-radius` from radius scale tokens. `k-rounded` with no size suffix maps to `md` (the system default). ```html
Default radius (md)
Large radius
Pill shape
``` ### Box shadows ```html
Subtle shadow
Floating card
Popover shadow
``` ## Component classes For every component in `@kesko/components`, the framework also ships a matching set of CSS classes, so non-React consumers can apply the same look and feel with plain HTML. Use these for static markup or server-rendered views; for interactive behavior (loading states, keyboard handling, ARIA wiring), reach for [`@kesko/components`](/components/) instead. ### Button Base class `.k-button`. Stack a variant and size modifier on top. - Variants: `.k-button-primary`, `.k-button-secondary`, `.k-button-plain`, `.k-button-text`, `.k-button-inverted` - Sizes: `.k-button-sm`, `.k-button-lg` (default is `md`) - Modifiers: `.k-button-expand`, `.k-button-transparent`, `.k-button-icon-only` ```html ``` Each button exposes a public theming API via `--k-button-*` custom properties (`-bg`, `-text`, `-border`, `-radius`, and matching `-hover` / `-active` variants). Set them on `:root` or any scoped selector to override defaults for a single instance, a section, or the whole app. ### Spinner `.k-spinner` wraps four `` children that animate as bouncing dots. Sizes: `.k-spinner-sm`, `.k-spinner-lg`, `.k-spinner-xl`, `.k-spinner-2xl`. The default size inherits from the current font size, which makes the spinner compose cleanly inside buttons and other text contexts. ```html ``` Theming: `--k-spinner-color`, `--k-spinner-size`. ### Stack `.k-stack` is a flex layout primitive with a `md` gap by default. - Direction: `.k-stack-row` - Wrap: `.k-stack-wrap` - Alignment: `.k-stack-align-center`, `.k-stack-align-end`, `.k-stack-align-stretch` - Gap: `.k-stack-gap-3xs` through `.k-stack-gap-3xl` (omit for the default `md`) ```html
``` ### Visually hidden `.k-visually-hidden` removes an element visually while keeping it available to assistive technologies. Used for screen-reader-only labels. ```html ``` ## Example Combining utilities and component classes to build a card: ```html

Card title

Supporting text with muted color and compact size.

``` --- # Button usage example: Default (React) --- # Button usage example: Default (Html) --- # Button usage example: As link (React) --- # Button usage example: As link (Html) --- # Button usage example: Custom style (React) --- # Button usage example: Custom style (Html) --- # Button usage example: Events (React) --- # Button usage example: Events (Html) --- # Button usage example: Expand (full width) (React) --- # Button usage example: Expand (full width) (Html) --- # Button usage example: Inverted (React) --- # Button usage example: Inverted (Html) --- # Button usage example: Loading state (React) --- # Button usage example: Loading state (Html) --- # Button usage example: Sizes (React) --- # Button usage example: Sizes (Html) --- # Button usage example: Sizes (loading) (React) --- # Button usage example: Sizes (loading) (Html) --- # Button usage example: Transparent (React) --- # Button usage example: Transparent (Html) --- # Button usage example: Variants (React) --- # Button usage example: Variants (Html) --- # Spinner usage example: Default (React) --- # Spinner usage example: Default (Html) --- # Spinner usage example: Sizes (React) --- # Spinner usage example: Sizes (Html) --- # Stack usage example: Default (React) --- # Stack usage example: Default (Html) --- # Stack usage example: Column (React) --- # Stack usage example: Column (Html) --- # Stack usage example: Row (React) --- # Stack usage example: Row (Html) --- # Visually-hidden usage example: Default (React) --- # Visually-hidden usage example: Default (Html) --- # FAQ ## Generic ### What is a design system? A “Design System” is a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences. Design systems solve the easy problems, so that products can solve hard problems more easily. ### What is the goal of a design system? The goal of a design system is to improve user interface consistency and quality, while making software design and development processes more efficient. A design system also helps to establish a common vocabulary between everyone in the organization and ease collabo­ration between different teams and disciplines. See [our goals](/principles/#our-goals) for more. ### Why is the design system public? Public documentation makes sharing and collaboration between different teams and third party vendors much easier as it increases the system’s visibility and accountability. This also makes us push towards higher quality content and enables us to be more transparent. Finally, this also serves as an amazing tool that we can leverage in recruiting. ### What’s on the roadmap? See our [Roadmap page](/roadmap/) for up to date plans. ### Who works on Kesko Design System? Kesko Design System is built and supported by a core team of designers and developers who work at Kesko. The team is currently being lead by [Ariel Salminen](https://arielsalminen.com). ## Usage ### Should we use the Kesko Design System? First of all, please note that it is still early days and we haven’t published any modules for usage just yet. Nevertheless, the short answer to the question is yes, you should use it as soon as possible. Kesko Design System improves UI consistency and quality, while making our software design and development processes more efficient. ### What if the design system doesn’t fill our team’s requirements? Our contribution model will allow product teams to add new features based on their product requirements. At the same time, it will allow us to keep an eye on the quality and consistency of the user experience. ### What’s the meaning of “draft” badges? These badges indicate whether something is ready to be used in production. Draft status means that it’s still under work and should be used with caution in production environments. ### Can I use these tools in any project? Kesko Design System is meant for building digital products and experiences for Kesko Oyj. Our terms of use don’t allow usage outside of this context. ### Are the tools open source? No, but feel free to browse our documentation to learn how we approach design and development at Kesko. ### How do I get started? See the [Getting started](/getting-started/) section in the documentation. ## Technical ### What browsers are supported? Kesko Design System is tested in the latest two versions of Chrome, Safari, Edge, Firefox and Opera. Our team addresses critical bug fixes in earlier versions based on their severity and impact. If you need to support IE11 or pre-Chromium Edge, this library isn’t for you. ### Can I use Kesko Design System with other frameworks? Yes. All selectors and similar are prefixed with `k-` to prevent collisions. ### How are the components built? Kesko’s component library ships React components for React and Next.js applications. Every component also includes a plain HTML version styled with our CSS framework making them compatible with any framework, or no framework at all. ### How do you version the design system? We follow “Semantic Versioning.” Under this scheme, version numbers and the way they change convey meaning about the underlying features and what has been modified from one version to the next. For more details, please see the [documentation](https://semver.org/). --- # Figma toolkit > Bring your Figma concepts to life using Kesko Design System’s Figma toolkit. Currently under development, shipping later this year. Check our roadmap for the latest status. > Note: We’ll reach out to product teams once the Figma toolkit is ready for testing and feedback. In the meantime, feel free to ask a question. --- # Getting started --- # Guidelines --- # Support > If you need help or support, please see further instructions below. We aim to include all product teams into the process to build trust, share understanding, and co-create solutions as much as possible. ## Frequently asked questions Answers to the most common questions about the Kesko Design System can be found in the [Frequently Asked Questions](/faq/) section. ## Slack channels Our team maintains the following Slack channels and provides support as time permits. - Generic discussion, support requests & updates: [#kdev-design-system](https://kesko.slack.com/archives/C081FBY2GK1) ## Office hours We organize bi-weekly design system “office hours” where you can show up with your design system questions, support requests, and feature ideas. - **Kampus 6B1**, 13:00–14:00, every other Thursday. - **Or join remotely** via Teams, [using this link](https://teams.microsoft.com/l/meetup-join/19%3ameeting_OTBkZTBkYzgtYmEwZC00NTQ1LWJlNGUtYjU2ZTQwYmE4MzE1%40thread.v2/0?context=%7b%22Tid%22%3a%22ae6e7baa-e1bf-4ef0-92a1-4eb28ec805c0%22%2c%22Oid%22%3a%2250b6ade8-610a-475f-85bc-649dc2b8aab0%22%7d). ## Monthly updates Our team provides monthly updates, [distributed via Slack](https://kesko.slack.com/archives/C081FBY2GK1), so that you can stay up to date on the latest features, releases, and [the future roadmap](/start/roadmap/). ## Email Messages sent to [support@kesko.design](mailto:support@kesko.design) will be addressed by the team as quickly as possible. ## Contributing We’re currently working on a revised contribution model for the product teams that will be introduced once the system foundations are stable. Please check back later for more information. ## Bug reports and feature requests We currently accept bug reports and feature requests via [GitHub](https://github.com/kesko-dev/design-system/issues/new/choose) and the dedicated [Slack channel](https://kesko.slack.com/archives/C081FBY2GK1). The GitHub UI, which is the preferred method to submit these, allows you to choose which type of issue you want to create: - **[Bug report](https://github.com/kesko-dev/design-system/issues/new?template=bug-report.yml)** - **[Feature request](https://github.com/kesko-dev/design-system/issues/new?template=feature-request.yml)** - **[Report a security vulnerability](https://github.com/kesko-dev/design-system/issues/new/choose)** --- # Icon library > Kesko’s iconography shares the same rounded, curved language as our typography and other UI elements. They are designed to work together as one cohesive system. ## Installation To install Kesko Design System icons as a dependency in your project, run: ```sh [npm] npm install @kesko/iconography ``` ```sh [pnpm] pnpm add @kesko/iconography ``` ```sh [yarn] yarn add @kesko/iconography ``` ```sh [bun] bun add @kesko/iconography ``` Then import an icon: ```js // Plain JavaScript import iconArrowDown from "@kesko/iconography/arrow-down.js"; // React import { IconArrowDown } from "@kesko/iconography/react"; ``` ## React usage Import individual icon components for optimal tree-shaking. Each component accepts `size`, `color`, and `label` props: ```tsx import { IconArrowDown, IconSearch } from "@kesko/iconography/react"; // Decorative icon (aria-hidden, no label needed) // Accessible icon (sets role="img" and aria-label) ``` You can also import by component name directly: ```tsx import IconArrowDown from "@kesko/iconography/react/IconArrowDown"; ; ``` When the icon name is dynamic (e.g. from data or props), use the `Icon` container component. Note that this imports all ~360 icons into your bundle: ```tsx import { Icon } from "@kesko/iconography/react"; ; ``` ### React Props All individual React icon components accept the following props: | Prop | Type | Default | Description | | ------- | ---------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `number` \| `string` | `"md"` | Size or a custom value. `xs` = 16 px, `sm` = 20 px, `md` = 24 px, `lg` = 32 px, `xl` = 48 px. Pass a number or CSS string (e.g. `"2rem"`) for custom sizing. | | `label` | `string` | — | Sets `aria-label` and `role="img"`. Omitting this will make the SVG hidden for assistive technologies. This is the [correct behavior](#accessibility) when an icon accompanies visible text. | | `color` | `string` | — | Any CSS color value, including design tokens (e.g. `"var(--k-color-accent)"`). When omitted, the icon inherits color via the CSS cascade. | The React `Icon` container component additionally requires a `name` prop typed as `KeskoIconName`: | Prop | Type | Description | | ------ | --------------- | ----------------------------------------------------------------------------------------------- | | `name` | `KeskoIconName` | Icon identifier, e.g. `"arrow-down"`. Provides autocomplete via the `KeskoIconName` union type. | All React components work with React 17, 18, 19, and Next.js (including App Router and React Server Components). ## JavaScript usage Each icon is also available as an individual ES module. The SVG string is the default export: ```js import svg, { title, tags } from "@kesko/iconography/arrow-down.js"; // Inject into the DOM const el = document.createElement("span"); el.innerHTML = svg; document.body.appendChild(el); ``` Or use in any string-based template engine (Lit, Nunjucks, etc.): ```js const html = ``; ``` ## SVG usage Each icon is also available as a raw `.svg` file. Use these when you need the actual SVG asset. For example in `` tags or build tools that process SVG files directly: ```html Arrow down ``` You can also copy or import them in bundlers that support SVG file loading: ```js // Webpack, Vite, etc. (with appropriate loader/plugin) import arrowDown from "@kesko/iconography/arrow-down.svg"; ``` Or read them on the server side: ```js import { readFileSync } from "node:fs"; import { createRequire } from "node:module"; const require = createRequire(import.meta.url); const svgPath = require.resolve("@kesko/iconography/arrow-down.svg"); const svg = readFileSync(svgPath, "utf-8"); ``` ## Figma usage > Warning: The Figma toolkit is still in active design phase and not yet ready for piloting. Please check back later. ## Accessibility Icons are decorative by default. This means that they render with `aria-hidden="true"` and are invisible to assistive technology. This is the correct behavior when an icon accompanies visible text (e.g. an icon inside a button with a label). When an icon conveys meaning on its own (e.g. a standalone icon button with no visible text), pass the `label` prop to make it accessible: ```tsx // Decorative: button has visible text // Meaningful: icon is the only content ``` ## TypeScript Type definitions are included. Import `IconProps` and `IconNameProps` from the package. ```ts import type { IconProps, IconNameProps } from "@kesko/iconography/react"; // IconProps: extends SVGProps, so all SVG/HTML attributes are accepted interface IconProps extends Omit, "ref"> { /** xs = 16px, sm = 20px, md = 24px (default), lg = 32px, xl = 48px, or a custom number/string */ size?: "xs" | "sm" | "md" | "lg" | "xl" | number | string; /** Sets aria-label and role="img". Omit for decorative (aria-hidden) icons */ label?: string; /** Any CSS color value or design token. When omitted, inherits via CSS cascade */ color?: string; } // IconNameProps: used by the container component interface IconNameProps extends IconProps { /** Icon identifier, e.g. "arrow-down". Typed as a union of all ~360 icon names */ name: KeskoIconName; } ``` The main `@kesko/iconography` entry point exports types for working with icon metadata directly: ```ts import type { KeskoIcon, KeskoIconName, KeskoIcons } from "@kesko/iconography"; // A single icon's metadata and SVG markup type KeskoIcon = { title: KeskoIconName; category: string; tags: string; svg: string; }; // Union of all ~360 icon name strings, e.g. "arrow-down" | "arrow-left" | ... type KeskoIconName = "arrow-down" | "arrow-left" | /* … */; // The full icon map: Record type KeskoIcons = Record; ``` ## Metadata Each icon in the package includes the following metadata: | Field | Type | Description | | ---------- | -------- | ------------------------------------------------------------------------------------------------ | | `title` | `string` | Filename of the SVG asset (e.g. `"arrow-down"`). | | `category` | `string` | One of the valid category values defined in `icons-schema.json` (see [categories](#categories)). | | `tags` | `string` | Space-separated keywords for search and filtering. | ## Categories All icons are grouped under the following categories: - **Action:** Generic UI actions: edit, delete, download, search. - **Attention:** Feedback states: info, warning, notice, availability. - **Car:** Car trade: vehicles, fuel types, EV charging. - **Common:** General-purpose icons used across multiple contexts. - **Communication:** Messaging, mail, phone, news, FAQ. - **Grocery:** Grocery trade: food, beverages, clothing, household and seasonal. - **Hardware:** Hardware trade: hardware, tools, home improvement. - **Kesko:** Kesko brand marks and store format identifiers. - **Location:** Map and place icons: location pin, world, building. - **Navigation:** Directional and wayfinding: arrows, chevrons, menu. - **People:** User and group representations. - **Shopping:** Commerce and checkout: cart, payment, delivery. - **Social:** Social media brand logos. - **Sustainability:** Eco labels, dietary markers, environmental icons. - **Time:** Clock, calendar, history, timer. > Warning: The icon categories may still evolve and change. But since this affects only the included metadata, it’s safe to use this package in production. ### Import error with `moduleResolution: "node"` The shorthand import paths like `@kesko/iconography/react` use the `exports` field in `package.json`, which requires `moduleResolution` set to `"bundler"`, `"node16"`, or `"nodenext"` in your `tsconfig.json`. If your project uses `"moduleResolution": "node"` and you cannot change it, use the full `dist/` paths instead: ```tsx // Individual components (tree-shakeable) import IconArrowDown from "@kesko/iconography/dist/react/IconArrowDown.js"; // Container component (imports all icons) import { Icon } from "@kesko/iconography/dist/react/index.js"; // Types import type { IconProps } from "@kesko/iconography/dist/react/index.js"; ``` ```js // Plain JavaScript import svg from "@kesko/iconography/dist/assets/arrow-down.js"; // Raw SVG file import arrowDown from "@kesko/iconography/dist/assets/arrow-down.svg"; // Full metadata import icons from "@kesko/iconography/dist/icons.js"; ``` These paths resolve to actual files in `node_modules` and work with any `moduleResolution` setting. ### Sizing raw SVG imports The SVG files in `@kesko/iconography` do not include `width` or `height` attributes, they only define a `viewBox`. This is intentional and allows the icons to be scaled to any size via CSS without having to override the hardcoded dimensions. This applies to both raw `.svg` file imports and the SVG strings from the ES module imports (`.js`). When using SVG imports outside of the [React components](/icons/#react-usage), you need to set the size yourself in CSS: ```css .icon { inline-size: 24px; block-size: 24px; } ``` The [React components](/icons/#react-usage) handle this automatically via the `size` prop. ## Requesting icon All Kesko shared icons should be added and used through this library. Please see our [support page](/help/) for more information on how to contact us. ## Available icons (372) | Icon | Category | Tags | React import | JS import | SVG path | |------|----------|------|-------------|-----------|----------| | adaptive-cruise | car | adaptive cruise control car vehicle auto speed driver assist safety ACC | `import IconAdaptiveCruise from "@kesko/iconography/react/IconAdaptiveCruise";` | `import iconAdaptiveCruise from "@kesko/iconography/adaptive-cruise.js";` | `@kesko/iconography/adaptive-cruise.svg` | | adjust | action | adjust tune settings control tweak slider knob | `import IconAdjust from "@kesko/iconography/react/IconAdjust";` | `import iconAdjust from "@kesko/iconography/adjust.js";` | `@kesko/iconography/adjust.svg` | | alcohol-free | sustainability | alcohol free no alcohol label dietary restriction beverage | `import IconAlcoholFree from "@kesko/iconography/react/IconAlcoholFree";` | `import iconAlcoholFree from "@kesko/iconography/alcohol-free.js";` | `@kesko/iconography/alcohol-free.svg` | | apple | social | apple fruit food produce fresh organic grocery | `import IconApple from "@kesko/iconography/react/IconApple";` | `import iconApple from "@kesko/iconography/apple.js";` | `@kesko/iconography/apple.svg` | | appliances | grocery | appliances home devices electronics household white goods | `import IconAppliances from "@kesko/iconography/react/IconAppliances";` | `import iconAppliances from "@kesko/iconography/appliances.js";` | `@kesko/iconography/appliances.svg` | | apron | grocery | apron chef cooking kitchen wear garment | `import IconApron from "@kesko/iconography/react/IconApron";` | `import iconApron from "@kesko/iconography/apron.js";` | `@kesko/iconography/apron.svg` | | arrow-down | navigation | arrow down direction pointing caret chevron navigate | `import IconArrowDown from "@kesko/iconography/react/IconArrowDown";` | `import iconArrowDown from "@kesko/iconography/arrow-down.js";` | `@kesko/iconography/arrow-down.svg` | | arrow-left | navigation | arrow left direction pointing caret chevron navigate back | `import IconArrowLeft from "@kesko/iconography/react/IconArrowLeft";` | `import iconArrowLeft from "@kesko/iconography/arrow-left.js";` | `@kesko/iconography/arrow-left.svg` | | arrow-right | navigation | arrow right direction pointing caret chevron navigate forward | `import IconArrowRight from "@kesko/iconography/react/IconArrowRight";` | `import iconArrowRight from "@kesko/iconography/arrow-right.js";` | `@kesko/iconography/arrow-right.svg` | | arrow-up | navigation | arrow up direction pointing caret chevron navigate | `import IconArrowUp from "@kesko/iconography/react/IconArrowUp";` | `import iconArrowUp from "@kesko/iconography/arrow-up.js";` | `@kesko/iconography/arrow-up.svg` | | ask-for-advice | hardware | ask advice help consultation guidance expert question store service | `import IconAskForAdvice from "@kesko/iconography/react/IconAskForAdvice";` | `import iconAskForAdvice from "@kesko/iconography/ask-for-advice.js";` | `@kesko/iconography/ask-for-advice.svg` | | assembly-service | hardware | assembly service build furniture mounting installation put together | `import IconAssemblyService from "@kesko/iconography/react/IconAssemblyService";` | `import iconAssemblyService from "@kesko/iconography/assembly-service.js";` | `@kesko/iconography/assembly-service.svg` | | at-sign | communication | at sign @ email address contact symbol | `import IconAtSign from "@kesko/iconography/react/IconAtSign";` | `import iconAtSign from "@kesko/iconography/at-sign.js";` | `@kesko/iconography/at-sign.svg` | | attention-extra | hardware | attention extra alert important notice exclamation highlight | `import IconAttentionExtra from "@kesko/iconography/react/IconAttentionExtra";` | `import iconAttentionExtra from "@kesko/iconography/attention-extra.js";` | `@kesko/iconography/attention-extra.svg` | | availability-no | shopping | unavailable not available no stock out of stock closed | `import IconAvailabilityNo from "@kesko/iconography/react/IconAvailabilityNo";` | `import iconAvailabilityNo from "@kesko/iconography/availability-no.js";` | `@kesko/iconography/availability-no.svg` | | availability-yes | shopping | available in stock yes open ready | `import IconAvailabilityYes from "@kesko/iconography/react/IconAvailabilityYes";` | `import iconAvailabilityYes from "@kesko/iconography/availability-yes.js";` | `@kesko/iconography/availability-yes.svg` | | award | kesko | award medal prize trophy recognition achievement star | `import IconAward from "@kesko/iconography/react/IconAward";` | `import iconAward from "@kesko/iconography/award.js";` | `@kesko/iconography/award.svg` | | b2b-sales | hardware | B2B sales business commercial wholesale professional trade | `import IconB2bSales from "@kesko/iconography/react/IconB2bSales";` | `import iconB2bSales from "@kesko/iconography/b2b-sales.js";` | `@kesko/iconography/b2b-sales.svg` | | b2b-sales-application | hardware | B2B sales application business form request commercial professional | `import IconB2bSalesApplication from "@kesko/iconography/react/IconB2bSalesApplication";` | `import iconB2bSalesApplication from "@kesko/iconography/b2b-sales-application.js";` | `@kesko/iconography/b2b-sales-application.svg` | | basket | shopping | basket shopping cart grocery items buy | `import IconBasket from "@kesko/iconography/react/IconBasket";` | `import iconBasket from "@kesko/iconography/basket.js";` | `@kesko/iconography/basket.svg` | | basket-add-to | shopping | add to basket shopping cart grocery plus add | `import IconBasketAddTo from "@kesko/iconography/react/IconBasketAddTo";` | `import iconBasketAddTo from "@kesko/iconography/basket-add-to.js";` | `@kesko/iconography/basket-add-to.svg` | | bathrooms | hardware | bathroom bath shower toilet sink washroom renovation | `import IconBathrooms from "@kesko/iconography/react/IconBathrooms";` | `import iconBathrooms from "@kesko/iconography/bathrooms.js";` | `@kesko/iconography/bathrooms.svg` | | bbq | hardware | barbecue BBQ grill outdoor cooking summer | `import IconBbq from "@kesko/iconography/react/IconBbq";` | `import iconBbq from "@kesko/iconography/bbq.js";` | `@kesko/iconography/bbq.svg` | | bell | attention | bell notification alert ring sound alarm | `import IconBell from "@kesko/iconography/react/IconBell";` | `import iconBell from "@kesko/iconography/bell.js";` | `@kesko/iconography/bell.svg` | | beverages | grocery | beverages drinks liquids juice water coffee tea soda | `import IconBeverages from "@kesko/iconography/react/IconBeverages";` | `import iconBeverages from "@kesko/iconography/beverages.js";` | `@kesko/iconography/beverages.svg` | | books | grocery | books reading literature education library | `import IconBooks from "@kesko/iconography/react/IconBooks";` | `import iconBooks from "@kesko/iconography/books.js";` | `@kesko/iconography/books.svg` | | bread | grocery | bread bakery food grocery fresh loaf | `import IconBread from "@kesko/iconography/react/IconBread";` | `import iconBread from "@kesko/iconography/bread.js";` | `@kesko/iconography/bread.svg` | | briefcase | common | briefcase bag work business professional portfolio | `import IconBriefcase from "@kesko/iconography/react/IconBriefcase";` | `import iconBriefcase from "@kesko/iconography/briefcase.js";` | `@kesko/iconography/briefcase.svg` | | building | hardware | building structure office location place landmark | `import IconBuilding from "@kesko/iconography/react/IconBuilding";` | `import iconBuilding from "@kesko/iconography/building.js";` | `@kesko/iconography/building.svg` | | building-accessories-installation | hardware | building accessories installation mounting fixtures fittings hardware | `import IconBuildingAccessoriesInstallation from "@kesko/iconography/react/IconBuildingAccessoriesInstallation";` | `import iconBuildingAccessoriesInstallation from "@kesko/iconography/building-accessories-installation.js";` | `@kesko/iconography/building-accessories-installation.svg` | | building-materials | hardware | building materials construction lumber supplies bricks cement | `import IconBuildingMaterials from "@kesko/iconography/react/IconBuildingMaterials";` | `import iconBuildingMaterials from "@kesko/iconography/building-materials.js";` | `@kesko/iconography/building-materials.svg` | | cables | hardware | cables wiring electrical wire connection cord plug | `import IconCables from "@kesko/iconography/react/IconCables";` | `import iconCables from "@kesko/iconography/cables.js";` | `@kesko/iconography/cables.svg` | | cafeteria | hardware | cafeteria cafe coffee restaurant food dining store | `import IconCafeteria from "@kesko/iconography/react/IconCafeteria";` | `import iconCafeteria from "@kesko/iconography/cafeteria.js";` | `@kesko/iconography/cafeteria.svg` | | calendar | time | calendar date schedule time day month year event | `import IconCalendar from "@kesko/iconography/react/IconCalendar";` | `import iconCalendar from "@kesko/iconography/calendar.js";` | `@kesko/iconography/calendar.svg` | | can | grocery | can tin canned food preserve grocery | `import IconCan from "@kesko/iconography/react/IconCan";` | `import iconCan from "@kesko/iconography/can.js";` | `@kesko/iconography/can.svg` | | car | car | car vehicle automobile transport sedan | `import IconCar from "@kesko/iconography/react/IconCar";` | `import iconCar from "@kesko/iconography/car.js";` | `@kesko/iconography/car.svg` | | car-truck | car | car truck vehicle automobile transport lorry freight cargo | `import IconCarTruck from "@kesko/iconography/react/IconCarTruck";` | `import iconCarTruck from "@kesko/iconography/car-truck.js";` | `@kesko/iconography/car-truck.svg` | | car-van | car | car van vehicle automobile transport minivan | `import IconCarVan from "@kesko/iconography/react/IconCarVan";` | `import iconCarVan from "@kesko/iconography/car-van.js";` | `@kesko/iconography/car-van.svg` | | carbon-footprint | sustainability | carbon footprint emissions CO2 environment climate green sustainability eco | `import IconCarbonFootprint from "@kesko/iconography/react/IconCarbonFootprint";` | `import iconCarbonFootprint from "@kesko/iconography/carbon-footprint.js";` | `@kesko/iconography/carbon-footprint.svg` | | cart | shopping | cart shopping trolley grocery buy checkout | `import IconCart from "@kesko/iconography/react/IconCart";` | `import iconCart from "@kesko/iconography/cart.js";` | `@kesko/iconography/cart.svg` | | cart-add | shopping | add to cart shopping trolley plus grocery buy | `import IconCartAdd from "@kesko/iconography/react/IconCartAdd";` | `import iconCartAdd from "@kesko/iconography/cart-add.js";` | `@kesko/iconography/cart-add.svg` | | carwash | grocery | carwash car wash cleaning vehicle service | `import IconCarwash from "@kesko/iconography/react/IconCarwash";` | `import iconCarwash from "@kesko/iconography/carwash.js";` | `@kesko/iconography/carwash.svg` | | center | location | center align text alignment middle format | `import IconCenter from "@kesko/iconography/react/IconCenter";` | `import iconCenter from "@kesko/iconography/center.js";` | `@kesko/iconography/center.svg` | | chat | communication | chat message speech bubble talk conversation | `import IconChat from "@kesko/iconography/react/IconChat";` | `import iconChat from "@kesko/iconography/chat.js";` | `@kesko/iconography/chat.svg` | | chef | grocery | chef cook hat kitchen food service | `import IconChef from "@kesko/iconography/react/IconChef";` | `import iconChef from "@kesko/iconography/chef.js";` | `@kesko/iconography/chef.svg` | | chemicals | hardware | chemicals hazardous liquid substance barrel container industrial | `import IconChemicals from "@kesko/iconography/react/IconChemicals";` | `import iconChemicals from "@kesko/iconography/chemicals.js";` | `@kesko/iconography/chemicals.svg` | | chevron-down | navigation | chevron down arrow caret direction pointing navigate | `import IconChevronDown from "@kesko/iconography/react/IconChevronDown";` | `import iconChevronDown from "@kesko/iconography/chevron-down.js";` | `@kesko/iconography/chevron-down.svg` | | chevron-left | navigation | chevron left arrow caret direction pointing navigate back | `import IconChevronLeft from "@kesko/iconography/react/IconChevronLeft";` | `import iconChevronLeft from "@kesko/iconography/chevron-left.js";` | `@kesko/iconography/chevron-left.svg` | | chevron-right | navigation | chevron right arrow caret direction pointing navigate forward | `import IconChevronRight from "@kesko/iconography/react/IconChevronRight";` | `import iconChevronRight from "@kesko/iconography/chevron-right.js";` | `@kesko/iconography/chevron-right.svg` | | chevron-up | navigation | chevron up arrow caret direction pointing navigate | `import IconChevronUp from "@kesko/iconography/react/IconChevronUp";` | `import iconChevronUp from "@kesko/iconography/chevron-up.js";` | `@kesko/iconography/chevron-up.svg` | | circular-economy | sustainability | circular economy recycling cycle environment sustainable eco green | `import IconCircularEconomy from "@kesko/iconography/react/IconCircularEconomy";` | `import iconCircularEconomy from "@kesko/iconography/circular-economy.js";` | `@kesko/iconography/circular-economy.svg` | | clear | action | clear remove erase clean wipe reset | `import IconClear from "@kesko/iconography/react/IconClear";` | `import iconClear from "@kesko/iconography/clear.js";` | `@kesko/iconography/clear.svg` | | clock | time | clock time watch hour minute schedule | `import IconClock from "@kesko/iconography/react/IconClock";` | `import iconClock from "@kesko/iconography/clock.js";` | `@kesko/iconography/clock.svg` | | close | action | close dismiss cancel remove X exit shut | `import IconClose from "@kesko/iconography/react/IconClose";` | `import iconClose from "@kesko/iconography/close.js";` | `@kesko/iconography/close.svg` | | clothes | grocery | clothes clothing apparel fashion garments wear | `import IconClothes from "@kesko/iconography/react/IconClothes";` | `import iconClothes from "@kesko/iconography/clothes.js";` | `@kesko/iconography/clothes.svg` | | code | common | code programming developer software angle brackets | `import IconCode from "@kesko/iconography/react/IconCode";` | `import iconCode from "@kesko/iconography/code.js";` | `@kesko/iconography/code.svg` | | comment | communication | comment reply feedback note message | `import IconComment from "@kesko/iconography/react/IconComment";` | `import iconComment from "@kesko/iconography/comment.js";` | `@kesko/iconography/comment.svg` | | contact | communication | contact person address reach phone connect | `import IconContact from "@kesko/iconography/react/IconContact";` | `import iconContact from "@kesko/iconography/contact.js";` | `@kesko/iconography/contact.svg` | | contactless | shopping | contactless payment NFC tap pay card wireless | `import IconContactless from "@kesko/iconography/react/IconContactless";` | `import iconContactless from "@kesko/iconography/contactless.js";` | `@kesko/iconography/contactless.svg` | | contract | common | contract document agreement legal paper sign | `import IconContract from "@kesko/iconography/react/IconContract";` | `import iconContract from "@kesko/iconography/contract.js";` | `@kesko/iconography/contract.svg` | | cooking-oils | grocery | cooking oil oils bottle fat frying food | `import IconCookingOils from "@kesko/iconography/react/IconCookingOils";` | `import iconCookingOils from "@kesko/iconography/cooking-oils.js";` | `@kesko/iconography/cooking-oils.svg` | | copy | action | copy duplicate paste clipboard layer | `import IconCopy from "@kesko/iconography/react/IconCopy";` | `import iconCopy from "@kesko/iconography/copy.js";` | `@kesko/iconography/copy.svg` | | core-product-availability | hardware | core product availability stock check inventory essential | `import IconCoreProductAvailability from "@kesko/iconography/react/IconCoreProductAvailability";` | `import iconCoreProductAvailability from "@kesko/iconography/core-product-availability.js";` | `@kesko/iconography/core-product-availability.svg` | | cosmetics | grocery | cosmetics beauty makeup skincare personal care | `import IconCosmetics from "@kesko/iconography/react/IconCosmetics";` | `import iconCosmetics from "@kesko/iconography/cosmetics.js";` | `@kesko/iconography/cosmetics.svg` | | curtain-sewing | hardware | curtain sewing tailoring fabric custom window textile | `import IconCurtainSewing from "@kesko/iconography/react/IconCurtainSewing";` | `import iconCurtainSewing from "@kesko/iconography/curtain-sewing.js";` | `@kesko/iconography/curtain-sewing.svg` | | customer-service-normal | people | customer service support agent headset call help person | `import IconCustomerServiceNormal from "@kesko/iconography/react/IconCustomerServiceNormal";` | `import iconCustomerServiceNormal from "@kesko/iconography/customer-service-normal.js";` | `@kesko/iconography/customer-service-normal.svg` | | cut | action | cut scissors crop remove trim | `import IconCut from "@kesko/iconography/react/IconCut";` | `import iconCut from "@kesko/iconography/cut.js";` | `@kesko/iconography/cut.svg` | | cut-to-lenght-service | hardware | cut to length service wood timber sizing measurement | `import IconCutToLenghtService from "@kesko/iconography/react/IconCutToLenghtService";` | `import iconCutToLenghtService from "@kesko/iconography/cut-to-lenght-service.js";` | `@kesko/iconography/cut-to-lenght-service.svg` | | delete | action | delete remove trash bin erase clear | `import IconDelete from "@kesko/iconography/react/IconDelete";` | `import iconDelete from "@kesko/iconography/delete.js";` | `@kesko/iconography/delete.svg` | | delivery-bike | shopping | delivery bike bicycle courier fast local shipping | `import IconDeliveryBike from "@kesko/iconography/react/IconDeliveryBike";` | `import iconDeliveryBike from "@kesko/iconography/delivery-bike.js";` | `@kesko/iconography/delivery-bike.svg` | | delivery-fast | shopping | delivery fast express quick shipping speed | `import IconDeliveryFast from "@kesko/iconography/react/IconDeliveryFast";` | `import iconDeliveryFast from "@kesko/iconography/delivery-fast.js";` | `@kesko/iconography/delivery-fast.svg` | | delivery-normal | shopping | delivery standard shipping truck transport normal | `import IconDeliveryNormal from "@kesko/iconography/react/IconDeliveryNormal";` | `import iconDeliveryNormal from "@kesko/iconography/delivery-normal.js";` | `@kesko/iconography/delivery-normal.svg` | | delivery-service | hardware | delivery service transport shipping logistics truck order | `import IconDeliveryService from "@kesko/iconography/react/IconDeliveryService";` | `import iconDeliveryService from "@kesko/iconography/delivery-service.js";` | `@kesko/iconography/delivery-service.svg` | | delivery-to-installation-point | hardware | delivery installation point address jobsite construction site location | `import IconDeliveryToInstallationPoint from "@kesko/iconography/react/IconDeliveryToInstallationPoint";` | `import iconDeliveryToInstallationPoint from "@kesko/iconography/delivery-to-installation-point.js";` | `@kesko/iconography/delivery-to-installation-point.svg` | | designer-service | hardware | designer service interior design consultation professional expert | `import IconDesignerService from "@kesko/iconography/react/IconDesignerService";` | `import iconDesignerService from "@kesko/iconography/designer-service.js";` | `@kesko/iconography/designer-service.svg` | | device-camera | common | camera device photo take picture photography | `import IconDeviceCamera from "@kesko/iconography/react/IconDeviceCamera";` | `import iconDeviceCamera from "@kesko/iconography/device-camera.js";` | `@kesko/iconography/device-camera.svg` | | device-desktop | common | desktop computer monitor screen PC device | `import IconDeviceDesktop from "@kesko/iconography/react/IconDeviceDesktop";` | `import iconDeviceDesktop from "@kesko/iconography/device-desktop.js";` | `@kesko/iconography/device-desktop.svg` | | device-mobile | common | mobile phone smartphone device screen | `import IconDeviceMobile from "@kesko/iconography/react/IconDeviceMobile";` | `import iconDeviceMobile from "@kesko/iconography/device-mobile.js";` | `@kesko/iconography/device-mobile.svg` | | device-tablet | common | tablet iPad device screen touch | `import IconDeviceTablet from "@kesko/iconography/react/IconDeviceTablet";` | `import iconDeviceTablet from "@kesko/iconography/device-tablet.js";` | `@kesko/iconography/device-tablet.svg` | | dishes | grocery | dishes plate bowl food restaurant meals tableware | `import IconDishes from "@kesko/iconography/react/IconDishes";` | `import iconDishes from "@kesko/iconography/dishes.js";` | `@kesko/iconography/dishes.svg` | | door | hardware | door entrance doorway entry exit opening interior | `import IconDoor from "@kesko/iconography/react/IconDoor";` | `import iconDoor from "@kesko/iconography/door.js";` | `@kesko/iconography/door.svg` | | download | action | download file save arrow down cloud | `import IconDownload from "@kesko/iconography/react/IconDownload";` | `import iconDownload from "@kesko/iconography/download.js";` | `@kesko/iconography/download.svg` | | drag | action | drag drop move reorder sort grab handle | `import IconDrag from "@kesko/iconography/react/IconDrag";` | `import iconDrag from "@kesko/iconography/drag.js";` | `@kesko/iconography/drag.svg` | | dried-goods | grocery | dried goods legumes beans lentils pasta rice bulk food | `import IconDriedGoods from "@kesko/iconography/react/IconDriedGoods";` | `import iconDriedGoods from "@kesko/iconography/dried-goods.js";` | `@kesko/iconography/dried-goods.svg` | | drive-type | car | drive type AWD FWD RWD drivetrain 4x4 all-wheel front rear | `import IconDriveType from "@kesko/iconography/react/IconDriveType";` | `import iconDriveType from "@kesko/iconography/drive-type.js";` | `@kesko/iconography/drive-type.svg` | | easter | grocery | Easter egg spring holiday seasonal celebration | `import IconEaster from "@kesko/iconography/react/IconEaster";` | `import iconEaster from "@kesko/iconography/easter.js";` | `@kesko/iconography/easter.svg` | | edit | action | edit pen pencil write modify change | `import IconEdit from "@kesko/iconography/react/IconEdit";` | `import iconEdit from "@kesko/iconography/edit.js";` | `@kesko/iconography/edit.svg` | | egg-free | sustainability | egg free no eggs allergen free label dietary | `import IconEggFree from "@kesko/iconography/react/IconEggFree";` | `import iconEggFree from "@kesko/iconography/egg-free.js";` | `@kesko/iconography/egg-free.svg` | | electricity-grid | hardware | electricity grid power network transmission pylon tower energy | `import IconElectricityGrid from "@kesko/iconography/react/IconElectricityGrid";` | `import iconElectricityGrid from "@kesko/iconography/electricity-grid.js";` | `@kesko/iconography/electricity-grid.svg` | | energy-efficiency | sustainability | energy efficiency rating label eco green saving power | `import IconEnergyEfficiency from "@kesko/iconography/react/IconEnergyEfficiency";` | `import iconEnergyEfficiency from "@kesko/iconography/energy-efficiency.js";` | `@kesko/iconography/energy-efficiency.svg` | | engine | car | engine motor power car vehicle horsepower | `import IconEngine from "@kesko/iconography/react/IconEngine";` | `import iconEngine from "@kesko/iconography/engine.js";` | `@kesko/iconography/engine.svg` | | enter | action | enter submit login sign in door | `import IconEnter from "@kesko/iconography/react/IconEnter";` | `import iconEnter from "@kesko/iconography/enter.js";` | `@kesko/iconography/enter.svg` | | environment-nature | sustainability | nature environment tree forest green eco outdoors | `import IconEnvironmentNature from "@kesko/iconography/react/IconEnvironmentNature";` | `import iconEnvironmentNature from "@kesko/iconography/environment-nature.js";` | `@kesko/iconography/environment-nature.svg` | | environment-urban | sustainability | urban city environment eco sustainability buildings | `import IconEnvironmentUrban from "@kesko/iconography/react/IconEnvironmentUrban";` | `import iconEnvironmentUrban from "@kesko/iconography/environment-urban.js";` | `@kesko/iconography/environment-urban.svg` | | eraser | action | eraser erase remove undo clear wipe | `import IconEraser from "@kesko/iconography/react/IconEraser";` | `import iconEraser from "@kesko/iconography/eraser.js";` | `@kesko/iconography/eraser.svg` | | exchange-and-returns | hardware | exchange returns refund swap replace policy customer | `import IconExchangeAndReturns from "@kesko/iconography/react/IconExchangeAndReturns";` | `import iconExchangeAndReturns from "@kesko/iconography/exchange-and-returns.js";` | `@kesko/iconography/exchange-and-returns.svg` | | exit | action | exit leave logout sign out door go | `import IconExit from "@kesko/iconography/react/IconExit";` | `import iconExit from "@kesko/iconography/exit.js";` | `@kesko/iconography/exit.svg` | | express-delivery | hardware | express delivery fast quick shipping urgent priority speed | `import IconExpressDelivery from "@kesko/iconography/react/IconExpressDelivery";` | `import iconExpressDelivery from "@kesko/iconography/express-delivery.js";` | `@kesko/iconography/express-delivery.svg` | | external-link | action | external link open new tab window arrow outside | `import IconExternalLink from "@kesko/iconography/react/IconExternalLink";` | `import iconExternalLink from "@kesko/iconography/external-link.js";` | `@kesko/iconography/external-link.svg` | | fabrics-curtains-carpets | hardware | fabrics curtains carpets textiles soft furnishing window floor | `import IconFabricsCurtainsCarpets from "@kesko/iconography/react/IconFabricsCurtainsCarpets";` | `import iconFabricsCurtainsCarpets from "@kesko/iconography/fabrics-curtains-carpets.js";` | `@kesko/iconography/fabrics-curtains-carpets.svg` | | facebook | social | Facebook social media brand logo network sharing | `import IconFacebook from "@kesko/iconography/react/IconFacebook";` | `import iconFacebook from "@kesko/iconography/facebook.js";` | `@kesko/iconography/facebook.svg` | | faq | communication | FAQ frequently asked questions help Q&A information support | `import IconFaq from "@kesko/iconography/react/IconFaq";` | `import iconFaq from "@kesko/iconography/faq.js";` | `@kesko/iconography/faq.svg` | | file | common | file document paper page attach | `import IconFile from "@kesko/iconography/react/IconFile";` | `import iconFile from "@kesko/iconography/file.js";` | `@kesko/iconography/file.svg` | | filter | action | filter sort refine narrow search criteria | `import IconFilter from "@kesko/iconography/react/IconFilter";` | `import iconFilter from "@kesko/iconography/filter.js";` | `@kesko/iconography/filter.svg` | | financing-service | hardware | financing service payment plan credit loan installment | `import IconFinancingService from "@kesko/iconography/react/IconFinancingService";` | `import iconFinancingService from "@kesko/iconography/financing-service.js";` | `@kesko/iconography/financing-service.svg` | | financing-service-rus | hardware | financing service Russia payment plan credit loan | `import IconFinancingServiceRus from "@kesko/iconography/react/IconFinancingServiceRus";` | `import iconFinancingServiceRus from "@kesko/iconography/financing-service-rus.js";` | `@kesko/iconography/financing-service-rus.svg` | | financing-service-swe | hardware | financing service Sweden payment plan credit loan | `import IconFinancingServiceSwe from "@kesko/iconography/react/IconFinancingServiceSwe";` | `import iconFinancingServiceSwe from "@kesko/iconography/financing-service-swe.js";` | `@kesko/iconography/financing-service-swe.svg` | | fish | grocery | fish seafood aquatic food grocery fresh | `import IconFish from "@kesko/iconography/react/IconFish";` | `import iconFish from "@kesko/iconography/fish.js";` | `@kesko/iconography/fish.svg` | | flag | common | flag mark bookmark note indicator signal | `import IconFlag from "@kesko/iconography/react/IconFlag";` | `import iconFlag from "@kesko/iconography/flag.js";` | `@kesko/iconography/flag.svg` | | flag-checkered | common | checkered flag finish complete race done end | `import IconFlagCheckered from "@kesko/iconography/react/IconFlagCheckered";` | `import iconFlagCheckered from "@kesko/iconography/flag-checkered.js";` | `@kesko/iconography/flag-checkered.svg` | | flash | common | flash lightning bolt fast quick power energy electric | `import IconFlash from "@kesko/iconography/react/IconFlash";` | `import iconFlash from "@kesko/iconography/flash.js";` | `@kesko/iconography/flash.svg` | | floors | hardware | floors flooring parquet laminate tiles surface renovation | `import IconFloors from "@kesko/iconography/react/IconFloors";` | `import iconFloors from "@kesko/iconography/floors.js";` | `@kesko/iconography/floors.svg` | | flower | grocery | flower plant bloom floral nature garden gift | `import IconFlower from "@kesko/iconography/react/IconFlower";` | `import iconFlower from "@kesko/iconography/flower.js";` | `@kesko/iconography/flower.svg` | | folders | common | folders directory files organize documents system | `import IconFolders from "@kesko/iconography/react/IconFolders";` | `import iconFolders from "@kesko/iconography/folders.js";` | `@kesko/iconography/folders.svg` | | for-kids | grocery | for kids children family baby products safe | `import IconForKids from "@kesko/iconography/react/IconForKids";` | `import iconForKids from "@kesko/iconography/for-kids.js";` | `@kesko/iconography/for-kids.svg` | | fork-knife | grocery | fork knife restaurant dining food eating utensils | `import IconForkKnife from "@kesko/iconography/react/IconForkKnife";` | `import iconForkKnife from "@kesko/iconography/fork-knife.js";` | `@kesko/iconography/fork-knife.svg` | | fork-knife-2 | grocery | fork knife restaurant dining food eating utensils | `import IconForkKnife2 from "@kesko/iconography/react/IconForkKnife2";` | `import iconForkKnife2 from "@kesko/iconography/fork-knife-2.js";` | `@kesko/iconography/fork-knife-2.svg` | | fresh | sustainability | fresh produce label quality food grocery organic natural | `import IconFresh from "@kesko/iconography/react/IconFresh";` | `import iconFresh from "@kesko/iconography/fresh.js";` | `@kesko/iconography/fresh.svg` | | from-finland | sustainability | from Finland Finnish origin domestic local product label | `import IconFromFinland from "@kesko/iconography/react/IconFromFinland";` | `import iconFromFinland from "@kesko/iconography/from-finland.js";` | `@kesko/iconography/from-finland.svg` | | from-local | sustainability | local origin product label nearby regional domestic | `import IconFromLocal from "@kesko/iconography/react/IconFromLocal";` | `import iconFromLocal from "@kesko/iconography/from-local.js";` | `@kesko/iconography/from-local.svg` | | fruit-vegetables | grocery | fruit vegetables produce fresh food grocery greens | `import IconFruitVegetables from "@kesko/iconography/react/IconFruitVegetables";` | `import iconFruitVegetables from "@kesko/iconography/fruit-vegetables.js";` | `@kesko/iconography/fruit-vegetables.svg` | | future | time | future forward time planning ahead forecast | `import IconFuture from "@kesko/iconography/react/IconFuture";` | `import iconFuture from "@kesko/iconography/future.js";` | `@kesko/iconography/future.svg` | | gear | common | gear settings cog options preferences configuration | `import IconGear from "@kesko/iconography/react/IconGear";` | `import iconGear from "@kesko/iconography/gear.js";` | `@kesko/iconography/gear.svg` | | gears-manual | car | manual gearbox transmission gear shift stick | `import IconGearsManual from "@kesko/iconography/react/IconGearsManual";` | `import iconGearsManual from "@kesko/iconography/gears-manual.js";` | `@kesko/iconography/gears-manual.svg` | | gluten-free | sustainability | gluten free no gluten label allergen dietary | `import IconGlutenFree from "@kesko/iconography/react/IconGlutenFree";` | `import iconGlutenFree from "@kesko/iconography/gluten-free.js";` | `@kesko/iconography/gluten-free.svg` | | google | social | Google social brand logo search service platform | `import IconGoogle from "@kesko/iconography/react/IconGoogle";` | `import iconGoogle from "@kesko/iconography/google.js";` | `@kesko/iconography/google.svg` | | grain | grocery | grain cereal wheat oat barley food grocery | `import IconGrain from "@kesko/iconography/react/IconGrain";` | `import iconGrain from "@kesko/iconography/grain.js";` | `@kesko/iconography/grain.svg` | | graph-bars | common | bar chart graph statistics data analytics bars | `import IconGraphBars from "@kesko/iconography/react/IconGraphBars";` | `import iconGraphBars from "@kesko/iconography/graph-bars.js";` | `@kesko/iconography/graph-bars.svg` | | graph-line | common | line chart graph trend statistics data analytics | `import IconGraphLine from "@kesko/iconography/react/IconGraphLine";` | `import iconGraphLine from "@kesko/iconography/graph-line.js";` | `@kesko/iconography/graph-line.svg` | | graph-meter | common | gauge meter graph speedometer dial performance | `import IconGraphMeter from "@kesko/iconography/react/IconGraphMeter";` | `import iconGraphMeter from "@kesko/iconography/graph-meter.js";` | `@kesko/iconography/graph-meter.svg` | | graph-pie | common | pie chart graph statistics distribution data analytics | `import IconGraphPie from "@kesko/iconography/react/IconGraphPie";` | `import iconGraphPie from "@kesko/iconography/graph-pie.js";` | `@kesko/iconography/graph-pie.svg` | | green-yard | hardware | green yard garden lawn outdoor landscape nature plants | `import IconGreenYard from "@kesko/iconography/react/IconGreenYard";` | `import iconGreenYard from "@kesko/iconography/green-yard.js";` | `@kesko/iconography/green-yard.svg` | | halloween | grocery | Halloween pumpkin spooky seasonal holiday October | `import IconHalloween from "@kesko/iconography/react/IconHalloween";` | `import iconHalloween from "@kesko/iconography/halloween.js";` | `@kesko/iconography/halloween.svg` | | hand-zoom | action | zoom magnify hand gesture pinch enlarge | `import IconHandZoom from "@kesko/iconography/react/IconHandZoom";` | `import iconHandZoom from "@kesko/iconography/hand-zoom.js";` | `@kesko/iconography/hand-zoom.svg` | | handshake | common | handshake agreement deal partnership cooperation greeting meeting | `import IconHandshake from "@kesko/iconography/react/IconHandshake";` | `import iconHandshake from "@kesko/iconography/handshake.js";` | `@kesko/iconography/handshake.svg` | | harvest | grocery | harvest autumn fall season crops produce food | `import IconHarvest from "@kesko/iconography/react/IconHarvest";` | `import iconHarvest from "@kesko/iconography/harvest.js";` | `@kesko/iconography/harvest.svg` | | healthy-facility | sustainability | healthy facility clinic veterinary hospital health check | `import IconHealthyFacility from "@kesko/iconography/react/IconHealthyFacility";` | `import iconHealthyFacility from "@kesko/iconography/healthy-facility.js";` | `@kesko/iconography/healthy-facility.svg` | | heart | common | heart love favorite like save wishlist | `import IconHeart from "@kesko/iconography/react/IconHeart";` | `import iconHeart from "@kesko/iconography/heart.js";` | `@kesko/iconography/heart.svg` | | heart-full | common | heart full love favorite filled like save wishlist | `import IconHeartFull from "@kesko/iconography/react/IconHeartFull";` | `import iconHeartFull from "@kesko/iconography/heart-full.js";` | `@kesko/iconography/heart-full.svg` | | heating | hardware | heating radiator warmth home system HVAC heat | `import IconHeating from "@kesko/iconography/react/IconHeating";` | `import iconHeating from "@kesko/iconography/heating.js";` | `@kesko/iconography/heating.svg` | | hide | action | show hide toggle visibility eye password | `import IconHide from "@kesko/iconography/react/IconHide";` | `import iconHide from "@kesko/iconography/hide.js";` | `@kesko/iconography/hide.svg` | | history | time | history past previous log timeline audit trail | `import IconHistory from "@kesko/iconography/react/IconHistory";` | `import iconHistory from "@kesko/iconography/history.js";` | `@kesko/iconography/history.svg` | | home | navigation | home house root main page return start | `import IconHome from "@kesko/iconography/react/IconHome";` | `import iconHome from "@kesko/iconography/home.js";` | `@kesko/iconography/home.svg` | | home-accessories | hardware | home accessories decor interior furnishing decoration items | `import IconHomeAccessories from "@kesko/iconography/react/IconHomeAccessories";` | `import iconHomeAccessories from "@kesko/iconography/home-accessories.js";` | `@kesko/iconography/home-accessories.svg` | | home-interior | grocery | home interior design decor room renovation | `import IconHomeInterior from "@kesko/iconography/react/IconHomeInterior";` | `import iconHomeInterior from "@kesko/iconography/home-interior.js";` | `@kesko/iconography/home-interior.svg` | | household | grocery | household home goods products cleaning domestic | `import IconHousehold from "@kesko/iconography/react/IconHousehold";` | `import iconHousehold from "@kesko/iconography/household.js";` | `@kesko/iconography/household.svg` | | idpassword | kesko | ID password credentials login badge identity security | `import IconIdpassword from "@kesko/iconography/react/IconIdpassword";` | `import iconIdpassword from "@kesko/iconography/idpassword.js";` | `@kesko/iconography/idpassword.svg` | | image | common | image photo picture gallery media visual | `import IconImage from "@kesko/iconography/react/IconImage";` | `import iconImage from "@kesko/iconography/image.js";` | `@kesko/iconography/image.svg` | | independence-day | grocery | independence day Finland December 6 national holiday | `import IconIndependenceDay from "@kesko/iconography/react/IconIndependenceDay";` | `import iconIndependenceDay from "@kesko/iconography/independence-day.js";` | `@kesko/iconography/independence-day.svg` | | info | attention | info information notice circle round help | `import IconInfo from "@kesko/iconography/react/IconInfo";` | `import iconInfo from "@kesko/iconography/info.js";` | `@kesko/iconography/info.svg` | | instagram | social | Instagram social media brand logo photo sharing network | `import IconInstagram from "@kesko/iconography/react/IconInstagram";` | `import iconInstagram from "@kesko/iconography/instagram.js";` | `@kesko/iconography/instagram.svg` | | installation-service | hardware | installation service mounting setup professional fitting build | `import IconInstallationService from "@kesko/iconography/react/IconInstallationService";` | `import iconInstallationService from "@kesko/iconography/installation-service.js";` | `@kesko/iconography/installation-service.svg` | | invoicing-service | hardware | invoicing service billing payment invoice receipt account | `import IconInvoicingService from "@kesko/iconography/react/IconInvoicingService";` | `import iconInvoicingService from "@kesko/iconography/invoicing-service.js";` | `@kesko/iconography/invoicing-service.svg` | | k-lataus | kesko | K-Lataus K-Charge electric charging EV station power | `import IconKLataus from "@kesko/iconography/react/IconKLataus";` | `import iconKLataus from "@kesko/iconography/k-lataus.js";` | `@kesko/iconography/k-lataus.svg` | | k-mark | kesko | K-mark Kesko brand logo K-Group identity | `import IconKMark from "@kesko/iconography/react/IconKMark";` | `import iconKMark from "@kesko/iconography/k-mark.js";` | `@kesko/iconography/k-mark.svg` | | k-ostokset | kesko | K-ostokset K-purchases shopping purchases history K-Plussa | `import IconKOstokset from "@kesko/iconography/react/IconKOstokset";` | `import iconKOstokset from "@kesko/iconography/k-ostokset.js";` | `@kesko/iconography/k-ostokset.svg` | | k-ostokset-2 | kesko | K-ostokset K-purchases shopping purchases K-Plussa variant | `import IconKOstokset2 from "@kesko/iconography/react/IconKOstokset2";` | `import iconKOstokset2 from "@kesko/iconography/k-ostokset-2.js";` | `@kesko/iconography/k-ostokset-2.svg` | | k-plussa | kesko | K-Plussa loyalty points program reward card | `import IconKPlussa from "@kesko/iconography/react/IconKPlussa";` | `import iconKPlussa from "@kesko/iconography/k-plussa.js";` | `@kesko/iconography/k-plussa.svg` | | k-plussa-opiskelija | kesko | K-Plussa opiskelija student loyalty program card young | `import IconKPlussaOpiskelija from "@kesko/iconography/react/IconKPlussaOpiskelija";` | `import iconKPlussaOpiskelija from "@kesko/iconography/k-plussa-opiskelija.js";` | `@kesko/iconography/k-plussa-opiskelija.svg` | | k-plussa-paras | kesko | K-Plussa Paras best premium loyalty tier program top | `import IconKPlussaParas from "@kesko/iconography/react/IconKPlussaParas";` | `import iconKPlussaParas from "@kesko/iconography/k-plussa-paras.js";` | `@kesko/iconography/k-plussa-paras.svg` | | k-profile | kesko | K-profile account user Kesko customer digital profile | `import IconKProfile from "@kesko/iconography/react/IconKProfile";` | `import iconKProfile from "@kesko/iconography/k-profile.js";` | `@kesko/iconography/k-profile.svg` | | key | common | key lock security unlock access credentials | `import IconKey from "@kesko/iconography/react/IconKey";` | `import iconKey from "@kesko/iconography/key.js";` | `@kesko/iconography/key.svg` | | key-car | common | car key vehicle start remote fob ignition | `import IconKeyCar from "@kesko/iconography/react/IconKeyCar";` | `import iconKeyCar from "@kesko/iconography/key-car.js";` | `@kesko/iconography/key-car.svg` | | kitchens | hardware | kitchen cooking renovation appliances cabinet countertop design | `import IconKitchens from "@kesko/iconography/react/IconKitchens";` | `import iconKitchens from "@kesko/iconography/kitchens.js";` | `@kesko/iconography/kitchens.svg` | | lactose-free | sustainability | lactose free dairy free no lactose label allergen dietary milk | `import IconLactoseFree from "@kesko/iconography/react/IconLactoseFree";` | `import iconLactoseFree from "@kesko/iconography/lactose-free.js";` | `@kesko/iconography/lactose-free.svg` | | large-account-service-point | hardware | large account service point VIP business commercial B2B | `import IconLargeAccountServicePoint from "@kesko/iconography/react/IconLargeAccountServicePoint";` | `import iconLargeAccountServicePoint from "@kesko/iconography/large-account-service-point.js";` | `@kesko/iconography/large-account-service-point.svg` | | light-bulb | common | light bulb idea innovation energy electricity lamp | `import IconLightBulb from "@kesko/iconography/react/IconLightBulb";` | `import iconLightBulb from "@kesko/iconography/light-bulb.js";` | `@kesko/iconography/light-bulb.svg` | | lightning | hardware | lightning electrical electricity wiring power energy bolt | `import IconLightning from "@kesko/iconography/react/IconLightning";` | `import iconLightning from "@kesko/iconography/lightning.js";` | `@kesko/iconography/lightning.svg` | | link | action | link chain URL connect hyperlink web | `import IconLink from "@kesko/iconography/react/IconLink";` | `import iconLink from "@kesko/iconography/link.js";` | `@kesko/iconography/link.svg` | | link-2 | action | link chain URL connect hyperlink web variant | `import IconLink2 from "@kesko/iconography/react/IconLink2";` | `import iconLink2 from "@kesko/iconography/link-2.js";` | `@kesko/iconography/link-2.svg` | | linkedin | social | LinkedIn professional social media brand logo networking | `import IconLinkedin from "@kesko/iconography/react/IconLinkedin";` | `import iconLinkedin from "@kesko/iconography/linkedin.js";` | `@kesko/iconography/linkedin.svg` | | list | common | list items rows text lines view | `import IconList from "@kesko/iconography/react/IconList";` | `import iconList from "@kesko/iconography/list.js";` | `@kesko/iconography/list.svg` | | list-2 | common | list items rows text lines view variant | `import IconList2 from "@kesko/iconography/react/IconList2";` | `import iconList2 from "@kesko/iconography/list-2.js";` | `@kesko/iconography/list-2.svg` | | list-add-to | common | add to list plus more items wishlist queue | `import IconListAddTo from "@kesko/iconography/react/IconListAddTo";` | `import iconListAddTo from "@kesko/iconography/list-add-to.js";` | `@kesko/iconography/list-add-to.svg` | | location | location | location pin map place address marker | `import IconLocation from "@kesko/iconography/react/IconLocation";` | `import iconLocation from "@kesko/iconography/location.js";` | `@kesko/iconography/location.svg` | | lock-closed | action | lock locked secure closed padlock security | `import IconLockClosed from "@kesko/iconography/react/IconLockClosed";` | `import iconLockClosed from "@kesko/iconography/lock-closed.js";` | `@kesko/iconography/lock-closed.svg` | | lock-open | action | lock open unlocked accessible padlock | `import IconLockOpen from "@kesko/iconography/react/IconLockOpen";` | `import iconLockOpen from "@kesko/iconography/lock-open.js";` | `@kesko/iconography/lock-open.svg` | | loyalty-program | hardware | loyalty program rewards points membership benefits card | `import IconLoyaltyProgram from "@kesko/iconography/react/IconLoyaltyProgram";` | `import iconLoyaltyProgram from "@kesko/iconography/loyalty-program.js";` | `@kesko/iconography/loyalty-program.svg` | | magazine | common | magazine publication press media reading news article | `import IconMagazine from "@kesko/iconography/react/IconMagazine";` | `import iconMagazine from "@kesko/iconography/magazine.js";` | `@kesko/iconography/magazine.svg` | | mail | communication | mail email envelope send message post | `import IconMail from "@kesko/iconography/react/IconMail";` | `import iconMail from "@kesko/iconography/mail.js";` | `@kesko/iconography/mail.svg` | | mayday | grocery | May Day vappu Finland spring holiday celebration | `import IconMayday from "@kesko/iconography/react/IconMayday";` | `import iconMayday from "@kesko/iconography/mayday.js";` | `@kesko/iconography/mayday.svg` | | meals | grocery | meals food dining eat restaurant plate | `import IconMeals from "@kesko/iconography/react/IconMeals";` | `import iconMeals from "@kesko/iconography/meals.js";` | `@kesko/iconography/meals.svg` | | meat-poultry | grocery | meat poultry chicken beef pork protein food grocery | `import IconMeatPoultry from "@kesko/iconography/react/IconMeatPoultry";` | `import iconMeatPoultry from "@kesko/iconography/meat-poultry.js";` | `@kesko/iconography/meat-poultry.svg` | | megafon | communication | megaphone loudspeaker announce broadcast alert message | `import IconMegafon from "@kesko/iconography/react/IconMegafon";` | `import iconMegafon from "@kesko/iconography/megafon.js";` | `@kesko/iconography/megafon.svg` | | membership-level | time | membership level tier status loyalty reward points | `import IconMembershipLevel from "@kesko/iconography/react/IconMembershipLevel";` | `import iconMembershipLevel from "@kesko/iconography/membership-level.js";` | `@kesko/iconography/membership-level.svg` | | menu | navigation | menu hamburger navigation sidebar toggle three lines | `import IconMenu from "@kesko/iconography/react/IconMenu";` | `import iconMenu from "@kesko/iconography/menu.js";` | `@kesko/iconography/menu.svg` | | menu-2 | navigation | menu navigation sidebar toggle lines variant | `import IconMenu2 from "@kesko/iconography/react/IconMenu2";` | `import iconMenu2 from "@kesko/iconography/menu-2.js";` | `@kesko/iconography/menu-2.svg` | | method-pickup | shopping | pickup click collect in-store method collect | `import IconMethodPickup from "@kesko/iconography/react/IconMethodPickup";` | `import iconMethodPickup from "@kesko/iconography/method-pickup.js";` | `@kesko/iconography/method-pickup.svg` | | method-pickup-2 | shopping | pickup in-store click collect method variant | `import IconMethodPickup2 from "@kesko/iconography/react/IconMethodPickup2";` | `import iconMethodPickup2 from "@kesko/iconography/method-pickup-2.js";` | `@kesko/iconography/method-pickup-2.svg` | | method-pickup-3 | shopping | pickup in-store click collect method variant | `import IconMethodPickup3 from "@kesko/iconography/react/IconMethodPickup3";` | `import iconMethodPickup3 from "@kesko/iconography/method-pickup-3.js";` | `@kesko/iconography/method-pickup-3.svg` | | method-pickup-4 | shopping | pickup in-store click collect method variant | `import IconMethodPickup4 from "@kesko/iconography/react/IconMethodPickup4";` | `import iconMethodPickup4 from "@kesko/iconography/method-pickup-4.js";` | `@kesko/iconography/method-pickup-4.svg` | | mic | action | microphone mic audio record voice sound input | `import IconMic from "@kesko/iconography/react/IconMic";` | `import iconMic from "@kesko/iconography/mic.js";` | `@kesko/iconography/mic.svg` | | midsummer | grocery | midsummer juhannus Finland June holiday summer celebration | `import IconMidsummer from "@kesko/iconography/react/IconMidsummer";` | `import iconMidsummer from "@kesko/iconography/midsummer.js";` | `@kesko/iconography/midsummer.svg` | | mileage | car | mileage odometer kilometers car vehicle distance travel | `import IconMileage from "@kesko/iconography/react/IconMileage";` | `import iconMileage from "@kesko/iconography/mileage.js";` | `@kesko/iconography/mileage.svg` | | milk | grocery | milk dairy drink food grocery carton | `import IconMilk from "@kesko/iconography/react/IconMilk";` | `import iconMilk from "@kesko/iconography/milk.js";` | `@kesko/iconography/milk.svg` | | milk-free | sustainability | milk free dairy free no milk label allergen dietary | `import IconMilkFree from "@kesko/iconography/react/IconMilkFree";` | `import iconMilkFree from "@kesko/iconography/milk-free.js";` | `@kesko/iconography/milk-free.svg` | | minus | action | minus subtract remove less collapse reduce | `import IconMinus from "@kesko/iconography/react/IconMinus";` | `import iconMinus from "@kesko/iconography/minus.js";` | `@kesko/iconography/minus.svg` | | mood-angry | people | mood angry mad furious upset rage frown face emoji expression | `import IconMoodAngry from "@kesko/iconography/react/IconMoodAngry";` | `import iconMoodAngry from "@kesko/iconography/mood-angry.js";` | `@kesko/iconography/mood-angry.svg` | | mood-funny | people | mood funny laugh laughing joke lol hilarious amused face emoji expression | `import IconMoodFunny from "@kesko/iconography/react/IconMoodFunny";` | `import iconMoodFunny from "@kesko/iconography/mood-funny.js";` | `@kesko/iconography/mood-funny.svg` | | mood-happy | people | mood happy smile joy cheerful glad pleased grin face emoji expression | `import IconMoodHappy from "@kesko/iconography/react/IconMoodHappy";` | `import iconMoodHappy from "@kesko/iconography/mood-happy.js";` | `@kesko/iconography/mood-happy.svg` | | mood-nerdy | people | mood nerdy nerd geek glasses smart intelligent face emoji expression | `import IconMoodNerdy from "@kesko/iconography/react/IconMoodNerdy";` | `import iconMoodNerdy from "@kesko/iconography/mood-nerdy.js";` | `@kesko/iconography/mood-nerdy.svg` | | mood-neutral | people | mood neutral indifferent plain calm blank meh face emoji expression | `import IconMoodNeutral from "@kesko/iconography/react/IconMoodNeutral";` | `import iconMoodNeutral from "@kesko/iconography/mood-neutral.js";` | `@kesko/iconography/mood-neutral.svg` | | mood-surprise | people | mood surprise surprised shock shocked wow amazed astonished face emoji expression | `import IconMoodSurprise from "@kesko/iconography/react/IconMoodSurprise";` | `import iconMoodSurprise from "@kesko/iconography/mood-surprise.js";` | `@kesko/iconography/mood-surprise.svg` | | mood-unhappy | people | mood unhappy sad frown upset down gloomy face emoji expression | `import IconMoodUnhappy from "@kesko/iconography/react/IconMoodUnhappy";` | `import iconMoodUnhappy from "@kesko/iconography/mood-unhappy.js";` | `@kesko/iconography/mood-unhappy.svg` | | mood-wink | people | mood wink winking flirt playful cheeky smile face emoji expression | `import IconMoodWink from "@kesko/iconography/react/IconMoodWink";` | `import iconMoodWink from "@kesko/iconography/mood-wink.js";` | `@kesko/iconography/mood-wink.svg` | | more-dots-filled | action | more dots menu options overflow actions filled | `import IconMoreDotsFilled from "@kesko/iconography/react/IconMoreDotsFilled";` | `import iconMoreDotsFilled from "@kesko/iconography/more-dots-filled.js";` | `@kesko/iconography/more-dots-filled.svg` | | more-dots-outline | action | more dots menu options overflow actions outline | `import IconMoreDotsOutline from "@kesko/iconography/react/IconMoreDotsOutline";` | `import iconMoreDotsOutline from "@kesko/iconography/more-dots-outline.js";` | `@kesko/iconography/more-dots-outline.svg` | | motor-diesel | car | diesel motor fuel type car vehicle engine | `import IconMotorDiesel from "@kesko/iconography/react/IconMotorDiesel";` | `import iconMotorDiesel from "@kesko/iconography/motor-diesel.js";` | `@kesko/iconography/motor-diesel.svg` | | motor-electric | car | electric motor EV battery power car vehicle | `import IconMotorElectric from "@kesko/iconography/react/IconMotorElectric";` | `import iconMotorElectric from "@kesko/iconography/motor-electric.js";` | `@kesko/iconography/motor-electric.svg` | | motor-gas | car | gasoline petrol motor fuel type car vehicle | `import IconMotorGas from "@kesko/iconography/react/IconMotorGas";` | `import iconMotorGas from "@kesko/iconography/motor-gas.js";` | `@kesko/iconography/motor-gas.svg` | | motor-natural-gas | car | natural gas CNG motor fuel type car vehicle | `import IconMotorNaturalGas from "@kesko/iconography/react/IconMotorNaturalGas";` | `import iconMotorNaturalGas from "@kesko/iconography/motor-natural-gas.js";` | `@kesko/iconography/motor-natural-gas.svg` | | msg-reply | action | reply message respond chat arrow | `import IconMsgReply from "@kesko/iconography/react/IconMsgReply";` | `import iconMsgReply from "@kesko/iconography/msg-reply.js";` | `@kesko/iconography/msg-reply.svg` | | msg-send | action | send message dispatch chat submit arrow | `import IconMsgSend from "@kesko/iconography/react/IconMsgSend";` | `import iconMsgSend from "@kesko/iconography/msg-send.js";` | `@kesko/iconography/msg-send.svg` | | navigate-to | action | navigate to go directions route destination pointer | `import IconNavigateTo from "@kesko/iconography/react/IconNavigateTo";` | `import iconNavigateTo from "@kesko/iconography/navigate-to.js";` | `@kesko/iconography/navigate-to.svg` | | new | attention | new badge label indicator fresh recently added | `import IconNew from "@kesko/iconography/react/IconNew";` | `import iconNew from "@kesko/iconography/new.js";` | `@kesko/iconography/new.svg` | | new-year | grocery | new year celebration January holiday seasonal fireworks | `import IconNewYear from "@kesko/iconography/react/IconNewYear";` | `import iconNewYear from "@kesko/iconography/new-year.js";` | `@kesko/iconography/new-year.svg` | | news | common | news article press media publication headline | `import IconNews from "@kesko/iconography/react/IconNews";` | `import iconNews from "@kesko/iconography/news.js";` | `@kesko/iconography/news.svg` | | news-letter | communication | newsletter email subscription mailing list updates | `import IconNewsLetter from "@kesko/iconography/react/IconNewsLetter";` | `import iconNewsLetter from "@kesko/iconography/news-letter.js";` | `@kesko/iconography/news-letter.svg` | | notice | attention | notice notification alert important flag | `import IconNotice from "@kesko/iconography/react/IconNotice";` | `import iconNotice from "@kesko/iconography/notice.js";` | `@kesko/iconography/notice.svg` | | ny | attention | new year ny celebration holiday seasonal | `import IconNy from "@kesko/iconography/react/IconNy";` | `import iconNy from "@kesko/iconography/ny.js";` | `@kesko/iconography/ny.svg` | | offer | attention | offer discount deal promotion sale price reduction | `import IconOffer from "@kesko/iconography/react/IconOffer";` | `import iconOffer from "@kesko/iconography/offer.js";` | `@kesko/iconography/offer.svg` | | online-booking-service | hardware | online booking service reservation appointment schedule digital | `import IconOnlineBookingService from "@kesko/iconography/react/IconOnlineBookingService";` | `import iconOnlineBookingService from "@kesko/iconography/online-booking-service.js";` | `@kesko/iconography/online-booking-service.svg` | | order-collections | hardware | order collection pickup ready store retrieve gather | `import IconOrderCollections from "@kesko/iconography/react/IconOrderCollections";` | `import iconOrderCollections from "@kesko/iconography/order-collections.js";` | `@kesko/iconography/order-collections.svg` | | organic | sustainability | organic eco green natural certified label food | `import IconOrganic from "@kesko/iconography/react/IconOrganic";` | `import iconOrganic from "@kesko/iconography/organic.js";` | `@kesko/iconography/organic.svg` | | outlet | attention | offer discount deal promotion outlet shop store sale price reduction | `import IconOutlet from "@kesko/iconography/react/IconOutlet";` | `import iconOutlet from "@kesko/iconography/outlet.js";` | `@kesko/iconography/outlet.svg` | | paint-tinting | hardware | paint tinting color mixing custom shade pigment | `import IconPaintTinting from "@kesko/iconography/react/IconPaintTinting";` | `import iconPaintTinting from "@kesko/iconography/paint-tinting.js";` | `@kesko/iconography/paint-tinting.svg` | | paints | hardware | paints painting colour wall brush roller coating | `import IconPaints from "@kesko/iconography/react/IconPaints";` | `import iconPaints from "@kesko/iconography/paints.js";` | `@kesko/iconography/paints.svg` | | paperclip | common | paperclip attachment file attach clip document | `import IconPaperclip from "@kesko/iconography/react/IconPaperclip";` | `import iconPaperclip from "@kesko/iconography/paperclip.js";` | `@kesko/iconography/paperclip.svg` | | parking | hardware | parking car vehicle lot garage space | `import IconParking from "@kesko/iconography/react/IconParking";` | `import iconParking from "@kesko/iconography/parking.js";` | `@kesko/iconography/parking.svg` | | paste | action | paste clipboard insert copy text | `import IconPaste from "@kesko/iconography/react/IconPaste";` | `import iconPaste from "@kesko/iconography/paste.js";` | `@kesko/iconography/paste.svg` | | payment-cash | shopping | cash payment money coins bills banknotes pay | `import IconPaymentCash from "@kesko/iconography/react/IconPaymentCash";` | `import iconPaymentCash from "@kesko/iconography/payment-cash.js";` | `@kesko/iconography/payment-cash.svg` | | payment-credit-card | shopping | credit card payment debit card pay bank card | `import IconPaymentCreditCard from "@kesko/iconography/react/IconPaymentCreditCard";` | `import iconPaymentCreditCard from "@kesko/iconography/payment-credit-card.js";` | `@kesko/iconography/payment-credit-card.svg` | | payment-gift-card | shopping | gift card payment voucher prepaid purchase | `import IconPaymentGiftCard from "@kesko/iconography/react/IconPaymentGiftCard";` | `import iconPaymentGiftCard from "@kesko/iconography/payment-gift-card.js";` | `@kesko/iconography/payment-gift-card.svg` | | payment-stamp-card | shopping | stamp card loyalty card collect points reward | `import IconPaymentStampCard from "@kesko/iconography/react/IconPaymentStampCard";` | `import iconPaymentStampCard from "@kesko/iconography/payment-stamp-card.js";` | `@kesko/iconography/payment-stamp-card.svg` | | pets | grocery | pets animals cat dog bird fish care grooming | `import IconPets from "@kesko/iconography/react/IconPets";` | `import iconPets from "@kesko/iconography/pets.js";` | `@kesko/iconography/pets.svg` | | phone | communication | phone call telephone contact ring mobile | `import IconPhone from "@kesko/iconography/react/IconPhone";` | `import iconPhone from "@kesko/iconography/phone.js";` | `@kesko/iconography/phone.svg` | | piggy-bank | common | piggy bank savings money budget finance economy | `import IconPiggyBank from "@kesko/iconography/react/IconPiggyBank";` | `import iconPiggyBank from "@kesko/iconography/piggy-bank.js";` | `@kesko/iconography/piggy-bank.svg` | | pinterest | social | Pinterest social media brand logo pin visual sharing | `import IconPinterest from "@kesko/iconography/react/IconPinterest";` | `import iconPinterest from "@kesko/iconography/pinterest.js";` | `@kesko/iconography/pinterest.svg` | | planning-service | hardware | planning service consultation project design layout blueprint | `import IconPlanningService from "@kesko/iconography/react/IconPlanningService";` | `import iconPlanningService from "@kesko/iconography/planning-service.js";` | `@kesko/iconography/planning-service.svg` | | plastic-bag | grocery | plastic bag shopping carrier carry grocery groceries handle disposable single-use packaging | `import IconPlasticBag from "@kesko/iconography/react/IconPlasticBag";` | `import iconPlasticBag from "@kesko/iconography/plastic-bag.js";` | `@kesko/iconography/plastic-bag.svg` | | play | common | play video audio media start control triangle button | `import IconPlay from "@kesko/iconography/react/IconPlay";` | `import iconPlay from "@kesko/iconography/play.js";` | `@kesko/iconography/play.svg` | | plug-ccs | car | CCS plug charging connector EV electric car standard | `import IconPlugCcs from "@kesko/iconography/react/IconPlugCcs";` | `import iconPlugCcs from "@kesko/iconography/plug-ccs.js";` | `@kesko/iconography/plug-ccs.svg` | | plug-chademo | car | CHAdeMO plug charging connector EV electric car standard | `import IconPlugChademo from "@kesko/iconography/react/IconPlugChademo";` | `import iconPlugChademo from "@kesko/iconography/plug-chademo.js";` | `@kesko/iconography/plug-chademo.svg` | | plug-schuko | car | Schuko plug charging connector EV electric car standard | `import IconPlugSchuko from "@kesko/iconography/react/IconPlugSchuko";` | `import iconPlugSchuko from "@kesko/iconography/plug-schuko.js";` | `@kesko/iconography/plug-schuko.svg` | | plug-type1 | car | Type 1 plug charging connector EV electric car J1772 | `import IconPlugType1 from "@kesko/iconography/react/IconPlugType1";` | `import iconPlugType1 from "@kesko/iconography/plug-type1.js";` | `@kesko/iconography/plug-type1.svg` | | plug-type2 | car | Type 2 plug charging connector EV electric car Mennekes | `import IconPlugType2 from "@kesko/iconography/react/IconPlugType2";` | `import iconPlugType2 from "@kesko/iconography/plug-type2.js";` | `@kesko/iconography/plug-type2.svg` | | plumbing | hardware | plumbing pipes water faucet fixtures bathroom kitchen | `import IconPlumbing from "@kesko/iconography/react/IconPlumbing";` | `import iconPlumbing from "@kesko/iconography/plumbing.js";` | `@kesko/iconography/plumbing.svg` | | plus | action | plus add more create new increase expand | `import IconPlus from "@kesko/iconography/react/IconPlus";` | `import iconPlus from "@kesko/iconography/plus.js";` | `@kesko/iconography/plus.svg` | | plussa | kesko | Plussa K-Plussa loyalty program reward points | `import IconPlussa from "@kesko/iconography/react/IconPlussa";` | `import iconPlussa from "@kesko/iconography/plussa.js";` | `@kesko/iconography/plussa.svg` | | power | car | power on off button switch energy control | `import IconPower from "@kesko/iconography/react/IconPower";` | `import iconPower from "@kesko/iconography/power.js";` | `@kesko/iconography/power.svg` | | powertool-testing | hardware | power tool testing try demo drill saw equipment | `import IconPowertoolTesting from "@kesko/iconography/react/IconPowertoolTesting";` | `import iconPowertoolTesting from "@kesko/iconography/powertool-testing.js";` | `@kesko/iconography/powertool-testing.svg` | | precise-delivery | hardware | precise delivery accurate scheduled time-window exact appointment | `import IconPreciseDelivery from "@kesko/iconography/react/IconPreciseDelivery";` | `import iconPreciseDelivery from "@kesko/iconography/precise-delivery.js";` | `@kesko/iconography/precise-delivery.svg` | | precollection-service | hardware | precollection service advance order pre-order reserve gather | `import IconPrecollectionService from "@kesko/iconography/react/IconPrecollectionService";` | `import iconPrecollectionService from "@kesko/iconography/precollection-service.js";` | `@kesko/iconography/precollection-service.svg` | | prefabricated-houses | hardware | prefabricated houses modular home building construction ready-made | `import IconPrefabricatedHouses from "@kesko/iconography/react/IconPrefabricatedHouses";` | `import iconPrefabricatedHouses from "@kesko/iconography/prefabricated-houses.js";` | `@kesko/iconography/prefabricated-houses.svg` | | preview | action | preview eye view show look see | `import IconPreview from "@kesko/iconography/react/IconPreview";` | `import iconPreview from "@kesko/iconography/preview.js";` | `@kesko/iconography/preview.svg` | | price | shopping | price cost money amount tag value pay | `import IconPrice from "@kesko/iconography/react/IconPrice";` | `import iconPrice from "@kesko/iconography/price.js";` | `@kesko/iconography/price.svg` | | print | action | print printer output paper document hardware | `import IconPrint from "@kesko/iconography/react/IconPrint";` | `import iconPrint from "@kesko/iconography/print.js";` | `@kesko/iconography/print.svg` | | privacy | time | privacy policy secure data protection confidential | `import IconPrivacy from "@kesko/iconography/react/IconPrivacy";` | `import iconPrivacy from "@kesko/iconography/privacy.js";` | `@kesko/iconography/privacy.svg` | | pro-center | hardware | pro center professional trade hub expert builder | `import IconProCenter from "@kesko/iconography/react/IconProCenter";` | `import iconProCenter from "@kesko/iconography/pro-center.js";` | `@kesko/iconography/pro-center.svg` | | products | common | products items goods merchandise assortment catalog | `import IconProducts from "@kesko/iconography/react/IconProducts";` | `import iconProducts from "@kesko/iconography/products.js";` | `@kesko/iconography/products.svg` | | profile | navigation | profile user account person photo avatar circle | `import IconProfile from "@kesko/iconography/react/IconProfile";` | `import iconProfile from "@kesko/iconography/profile.js";` | `@kesko/iconography/profile.svg` | | project-quotation-service | hardware | project quotation service estimate quote bid pricing offer | `import IconProjectQuotationService from "@kesko/iconography/react/IconProjectQuotationService";` | `import iconProjectQuotationService from "@kesko/iconography/project-quotation-service.js";` | `@kesko/iconography/project-quotation-service.svg` | | pump-diesel | car | diesel fuel pump station gas station fueling | `import IconPumpDiesel from "@kesko/iconography/react/IconPumpDiesel";` | `import iconPumpDiesel from "@kesko/iconography/pump-diesel.js";` | `@kesko/iconography/pump-diesel.svg` | | pump-electricity | car | electric charging pump station EV power fueling | `import IconPumpElectricity from "@kesko/iconography/react/IconPumpElectricity";` | `import iconPumpElectricity from "@kesko/iconography/pump-electricity.js";` | `@kesko/iconography/pump-electricity.svg` | | pump-gas | car | gasoline petrol fuel pump station fueling | `import IconPumpGas from "@kesko/iconography/react/IconPumpGas";` | `import iconPumpGas from "@kesko/iconography/pump-gas.js";` | `@kesko/iconography/pump-gas.svg` | | pump-natural-gas | car | natural gas CNG fuel pump station fueling | `import IconPumpNaturalGas from "@kesko/iconography/react/IconPumpNaturalGas";` | `import iconPumpNaturalGas from "@kesko/iconography/pump-natural-gas.js";` | `@kesko/iconography/pump-natural-gas.svg` | | push-down | action | push down collapse fold scroll arrow down | `import IconPushDown from "@kesko/iconography/react/IconPushDown";` | `import iconPushDown from "@kesko/iconography/push-down.js";` | `@kesko/iconography/push-down.svg` | | push-up | action | push up expand unfold scroll arrow up | `import IconPushUp from "@kesko/iconography/react/IconPushUp";` | `import iconPushUp from "@kesko/iconography/push-up.js";` | `@kesko/iconography/push-up.svg` | | question | attention | question mark help unknown info support | `import IconQuestion from "@kesko/iconography/react/IconQuestion";` | `import iconQuestion from "@kesko/iconography/question.js";` | `@kesko/iconography/question.svg` | | receipt | common | receipt bill invoice purchase confirmation payment | `import IconReceipt from "@kesko/iconography/react/IconReceipt";` | `import iconReceipt from "@kesko/iconography/receipt.js";` | `@kesko/iconography/receipt.svg` | | receipt-euro | shopping | receipt bill euro EUR currency invoice payment | `import IconReceiptEuro from "@kesko/iconography/react/IconReceiptEuro";` | `import iconReceiptEuro from "@kesko/iconography/receipt-euro.js";` | `@kesko/iconography/receipt-euro.svg` | | receipt-kr | shopping | receipt bill krona kr SEK NOK currency invoice payment | `import IconReceiptKr from "@kesko/iconography/react/IconReceiptKr";` | `import iconReceiptKr from "@kesko/iconography/receipt-kr.js";` | `@kesko/iconography/receipt-kr.svg` | | recycle-bottle | sustainability | recycle recycling recyclable bottle container glass plastic deposit return reuse arrows loop pantti | `import IconRecycleBottle from "@kesko/iconography/react/IconRecycleBottle";` | `import iconRecycleBottle from "@kesko/iconography/recycle-bottle.js";` | `@kesko/iconography/recycle-bottle.svg` | | refresh | action | refresh reload update sync rotate arrow circle | `import IconRefresh from "@kesko/iconography/react/IconRefresh";` | `import iconRefresh from "@kesko/iconography/refresh.js";` | `@kesko/iconography/refresh.svg` | | refrigeration | hardware | refrigeration cooling cold freezer HVAC temperature climate control | `import IconRefrigeration from "@kesko/iconography/react/IconRefrigeration";` | `import iconRefrigeration from "@kesko/iconography/refrigeration.js";` | `@kesko/iconography/refrigeration.svg` | | renovation-master | hardware | renovation master expert builder contractor professional remodel | `import IconRenovationMaster from "@kesko/iconography/react/IconRenovationMaster";` | `import iconRenovationMaster from "@kesko/iconography/renovation-master.js";` | `@kesko/iconography/renovation-master.svg` | | renovation-master-plan | hardware | renovation master plan design blueprint home improvement project | `import IconRenovationMasterPlan from "@kesko/iconography/react/IconRenovationMasterPlan";` | `import iconRenovationMasterPlan from "@kesko/iconography/renovation-master-plan.js";` | `@kesko/iconography/renovation-master-plan.svg` | | renovation-master-progress | hardware | renovation master progress tracking timeline status update | `import IconRenovationMasterProgress from "@kesko/iconography/react/IconRenovationMasterProgress";` | `import iconRenovationMasterProgress from "@kesko/iconography/renovation-master-progress.js";` | `@kesko/iconography/renovation-master-progress.svg` | | renovation-service | hardware | renovation service remodel upgrade improve refurbish home | `import IconRenovationService from "@kesko/iconography/react/IconRenovationService";` | `import iconRenovationService from "@kesko/iconography/renovation-service.js";` | `@kesko/iconography/renovation-service.svg` | | robot | common | robot AI automation machine artificial intelligence | `import IconRobot from "@kesko/iconography/react/IconRobot";` | `import iconRobot from "@kesko/iconography/robot.js";` | `@kesko/iconography/robot.svg` | | robot-2 | common | robot AI automation machine artificial intelligence variant | `import IconRobot2 from "@kesko/iconography/react/IconRobot2";` | `import iconRobot2 from "@kesko/iconography/robot-2.js";` | `@kesko/iconography/robot-2.svg` | | runeberg | grocery | Runeberg Day Finland February holiday culture celebration | `import IconRuneberg from "@kesko/iconography/react/IconRuneberg";` | `import iconRuneberg from "@kesko/iconography/runeberg.js";` | `@kesko/iconography/runeberg.svg` | | sale-tag | shopping | sale tag price discount promotion label deal | `import IconSaleTag from "@kesko/iconography/react/IconSaleTag";` | `import iconSaleTag from "@kesko/iconography/sale-tag.js";` | `@kesko/iconography/sale-tag.svg` | | sales-b2b | people | B2B sales business to business commercial wholesale | `import IconSalesB2b from "@kesko/iconography/react/IconSalesB2b";` | `import iconSalesB2b from "@kesko/iconography/sales-b2b.js";` | `@kesko/iconography/sales-b2b.svg` | | sales-normal | people | sales retail store regular commerce sell | `import IconSalesNormal from "@kesko/iconography/react/IconSalesNormal";` | `import iconSalesNormal from "@kesko/iconography/sales-normal.js";` | `@kesko/iconography/sales-normal.svg` | | saunas-and-fireplaces | hardware | sauna fireplace spa heat stove relaxation warmth | `import IconSaunasAndFireplaces from "@kesko/iconography/react/IconSaunasAndFireplaces";` | `import iconSaunasAndFireplaces from "@kesko/iconography/saunas-and-fireplaces.js";` | `@kesko/iconography/saunas-and-fireplaces.svg` | | scan | action | scan barcode QR code camera read product | `import IconScan from "@kesko/iconography/react/IconScan";` | `import iconScan from "@kesko/iconography/scan.js";` | `@kesko/iconography/scan.svg` | | search | action | search find magnifying glass look query | `import IconSearch from "@kesko/iconography/react/IconSearch";` | `import iconSearch from "@kesko/iconography/search.js";` | `@kesko/iconography/search.svg` | | secured-service | hardware | secured service safe protection security trust guarantee | `import IconSecuredService from "@kesko/iconography/react/IconSecuredService";` | `import iconSecuredService from "@kesko/iconography/secured-service.js";` | `@kesko/iconography/secured-service.svg` | | services | time | services tools wrench options configuration support | `import IconServices from "@kesko/iconography/react/IconServices";` | `import iconServices from "@kesko/iconography/services.js";` | `@kesko/iconography/services.svg` | | settings | navigation | settings preferences gear options configure | `import IconSettings from "@kesko/iconography/react/IconSettings";` | `import iconSettings from "@kesko/iconography/settings.js";` | `@kesko/iconography/settings.svg` | | share | action | share export send post social media spread | `import IconShare from "@kesko/iconography/react/IconShare";` | `import iconShare from "@kesko/iconography/share.js";` | `@kesko/iconography/share.svg` | | share-ios | action | share iOS Apple upload send post social export | `import IconShareIos from "@kesko/iconography/react/IconShareIos";` | `import iconShareIos from "@kesko/iconography/share-ios.js";` | `@kesko/iconography/share-ios.svg` | | shoes | grocery | shoes footwear boots sneakers sandals clothing | `import IconShoes from "@kesko/iconography/react/IconShoes";` | `import iconShoes from "@kesko/iconography/shoes.js";` | `@kesko/iconography/shoes.svg` | | shopping-bag-xl | shopping | shopping bag large carry buy fashion retail | `import IconShoppingBagXl from "@kesko/iconography/react/IconShoppingBagXl";` | `import iconShoppingBagXl from "@kesko/iconography/shopping-bag-xl.js";` | `@kesko/iconography/shopping-bag-xl.svg` | | show | action | show hide toggle visibility eye password variant | `import IconShow from "@kesko/iconography/react/IconShow";` | `import iconShow from "@kesko/iconography/show.js";` | `@kesko/iconography/show.svg` | | sleep | action | sleep rest zzz moon night idle inactive standby | `import IconSleep from "@kesko/iconography/react/IconSleep";` | `import iconSleep from "@kesko/iconography/sleep.js";` | `@kesko/iconography/sleep.svg` | | small-hardwares | hardware | small hardware screws nails bolts fasteners fittings accessories | `import IconSmallHardwares from "@kesko/iconography/react/IconSmallHardwares";` | `import iconSmallHardwares from "@kesko/iconography/small-hardwares.js";` | `@kesko/iconography/small-hardwares.svg` | | snowflake | common | snow winter frozen cold ice freezer temperature laskiainen shrovetide tuesday seasonal holiday air conditioning ac climate cooling | `import IconSnowflake from "@kesko/iconography/react/IconSnowflake";` | `import iconSnowflake from "@kesko/iconography/snowflake.js";` | `@kesko/iconography/snowflake.svg` | | solar-energy | hardware | solar energy panel photovoltaic renewable sun power green | `import IconSolarEnergy from "@kesko/iconography/react/IconSolarEnergy";` | `import iconSolarEnergy from "@kesko/iconography/solar-energy.js";` | `@kesko/iconography/solar-energy.svg` | | sort | action | sort order arrange list filter table | `import IconSort from "@kesko/iconography/react/IconSort";` | `import iconSort from "@kesko/iconography/sort.js";` | `@kesko/iconography/sort.svg` | | sort-ascending | action | sort ascending order up low to high A-Z list | `import IconSortAscending from "@kesko/iconography/react/IconSortAscending";` | `import iconSortAscending from "@kesko/iconography/sort-ascending.js";` | `@kesko/iconography/sort-ascending.svg` | | sort-descending | action | sort descending order down high to low Z-A list | `import IconSortDescending from "@kesko/iconography/react/IconSortDescending";` | `import iconSortDescending from "@kesko/iconography/sort-descending.js";` | `@kesko/iconography/sort-descending.svg` | | spices | grocery | spices herbs seasoning food flavor cooking | `import IconSpices from "@kesko/iconography/react/IconSpices";` | `import iconSpices from "@kesko/iconography/spices.js";` | `@kesko/iconography/spices.svg` | | sports | grocery | sports fitness active outdoor exercise equipment | `import IconSports from "@kesko/iconography/react/IconSports";` | `import iconSports from "@kesko/iconography/sports.js";` | `@kesko/iconography/sports.svg` | | stamp | common | stamp loyalty collect reward card press | `import IconStamp from "@kesko/iconography/react/IconStamp";` | `import iconStamp from "@kesko/iconography/stamp.js";` | `@kesko/iconography/stamp.svg` | | star-empty | common | star empty rating review favorite outline | `import IconStarEmpty from "@kesko/iconography/react/IconStarEmpty";` | `import iconStarEmpty from "@kesko/iconography/star-empty.js";` | `@kesko/iconography/star-empty.svg` | | star-filled | common | star filled rating review favorite solid gold | `import IconStarFilled from "@kesko/iconography/react/IconStarFilled";` | `import iconStarFilled from "@kesko/iconography/star-filled.js";` | `@kesko/iconography/star-filled.svg` | | star-half | common | star half rating review partial | `import IconStarHalf from "@kesko/iconography/react/IconStarHalf";` | `import iconStarHalf from "@kesko/iconography/star-half.js";` | `@kesko/iconography/star-half.svg` | | star-line | common | star outline border rating review favorite | `import IconStarLine from "@kesko/iconography/react/IconStarLine";` | `import iconStarLine from "@kesko/iconography/star-line.js";` | `@kesko/iconography/star-line.svg` | | steering-wheel | car | steering wheel car drive vehicle control | `import IconSteeringWheel from "@kesko/iconography/react/IconSteeringWheel";` | `import iconSteeringWheel from "@kesko/iconography/steering-wheel.js";` | `@kesko/iconography/steering-wheel.svg` | | stop | attention | stop halt block forbidden end pause cancel | `import IconStop from "@kesko/iconography/react/IconStop";` | `import iconStop from "@kesko/iconography/stop.js";` | `@kesko/iconography/stop.svg` | | storage | hardware | storage warehouse space room cabinet shelf keeping | `import IconStorage from "@kesko/iconography/react/IconStorage";` | `import iconStorage from "@kesko/iconography/storage.js";` | `@kesko/iconography/storage.svg` | | store-btt | shopping | store BtT K-Group store format small convenience | `import IconStoreBtt from "@kesko/iconography/react/IconStoreBtt";` | `import iconStoreBtt from "@kesko/iconography/store-btt.js";` | `@kesko/iconography/store-btt.svg` | | store-change | shopping | store change switch K-Group store select | `import IconStoreChange from "@kesko/iconography/react/IconStoreChange";` | `import iconStoreChange from "@kesko/iconography/store-change.js";` | `@kesko/iconography/store-change.svg` | | store-ct | shopping | store Citymarket CityT hypermarket K-Group format | `import IconStoreCt from "@kesko/iconography/react/IconStoreCt";` | `import iconStoreCt from "@kesko/iconography/store-ct.js";` | `@kesko/iconography/store-ct.svg` | | store-gt | shopping | store K-Supermarket GT K-Group format grocery | `import IconStoreGt from "@kesko/iconography/react/IconStoreGt";` | `import iconStoreGt from "@kesko/iconography/store-gt.js";` | `@kesko/iconography/store-gt.svg` | | sun | common | sun sunshine weather light bright day outdoor warm | `import IconSun from "@kesko/iconography/react/IconSun";` | `import iconSun from "@kesko/iconography/sun.js";` | `@kesko/iconography/sun.svg` | | sustainable-nature | sustainability | sustainable nature eco green environment trees forest | `import IconSustainableNature from "@kesko/iconography/react/IconSustainableNature";` | `import iconSustainableNature from "@kesko/iconography/sustainable-nature.js";` | `@kesko/iconography/sustainable-nature.svg` | | sweets | grocery | sweets candy chocolate confectionery sugar treats | `import IconSweets from "@kesko/iconography/react/IconSweets";` | `import iconSweets from "@kesko/iconography/sweets.js";` | `@kesko/iconography/sweets.svg` | | switch | action | switch toggle on off change flip | `import IconSwitch from "@kesko/iconography/react/IconSwitch";` | `import iconSwitch from "@kesko/iconography/switch.js";` | `@kesko/iconography/switch.svg` | | tag | shopping | tag label price product category marker | `import IconTag from "@kesko/iconography/react/IconTag";` | `import iconTag from "@kesko/iconography/tag.js";` | `@kesko/iconography/tag.svg` | | telecom | hardware | telecom telecommunications network signal antenna tower communication | `import IconTelecom from "@kesko/iconography/react/IconTelecom";` | `import iconTelecom from "@kesko/iconography/telecom.js";` | `@kesko/iconography/telecom.svg` | | thumb-down | common | thumb down dislike disapprove feedback negative | `import IconThumbDown from "@kesko/iconography/react/IconThumbDown";` | `import iconThumbDown from "@kesko/iconography/thumb-down.js";` | `@kesko/iconography/thumb-down.svg` | | thumb-up | common | thumb up like approve feedback positive vote | `import IconThumbUp from "@kesko/iconography/react/IconThumbUp";` | `import iconThumbUp from "@kesko/iconography/thumb-up.js";` | `@kesko/iconography/thumb-up.svg` | | tick | common | tick check mark done complete verified confirm | `import IconTick from "@kesko/iconography/react/IconTick";` | `import iconTick from "@kesko/iconography/tick.js";` | `@kesko/iconography/tick.svg` | | tiktok | social | TikTok social media video brand logo sharing short | `import IconTiktok from "@kesko/iconography/react/IconTiktok";` | `import iconTiktok from "@kesko/iconography/tiktok.js";` | `@kesko/iconography/tiktok.svg` | | tiles | hardware | tiles tiling ceramic wall floor bathroom kitchen | `import IconTiles from "@kesko/iconography/react/IconTiles";` | `import iconTiles from "@kesko/iconography/tiles.js";` | `@kesko/iconography/tiles.svg` | | timber | hardware | timber wood lumber log construction building material | `import IconTimber from "@kesko/iconography/react/IconTimber";` | `import iconTimber from "@kesko/iconography/timber.js";` | `@kesko/iconography/timber.svg` | | time-end | time | end time stop deadline close finish schedule | `import IconTimeEnd from "@kesko/iconography/react/IconTimeEnd";` | `import iconTimeEnd from "@kesko/iconography/time-end.js";` | `@kesko/iconography/time-end.svg` | | time-start | time | start time begin open from schedule clock | `import IconTimeStart from "@kesko/iconography/react/IconTimeStart";` | `import iconTimeStart from "@kesko/iconography/time-start.js";` | `@kesko/iconography/time-start.svg` | | timer | time | timer countdown stopwatch clock time limit | `import IconTimer from "@kesko/iconography/react/IconTimer";` | `import iconTimer from "@kesko/iconography/timer.js";` | `@kesko/iconography/timer.svg` | | tires | car | tires tyres wheels car vehicle rubber | `import IconTires from "@kesko/iconography/react/IconTires";` | `import iconTires from "@kesko/iconography/tires.js";` | `@kesko/iconography/tires.svg` | | tobacco | grocery | tobacco cigarettes smoking products age restricted | `import IconTobacco from "@kesko/iconography/react/IconTobacco";` | `import iconTobacco from "@kesko/iconography/tobacco.js";` | `@kesko/iconography/tobacco.svg` | | tool-rental | hardware | tool rental borrow hire equipment temporary loan | `import IconToolRental from "@kesko/iconography/react/IconToolRental";` | `import iconToolRental from "@kesko/iconography/tool-rental.js";` | `@kesko/iconography/tool-rental.svg` | | tools | hardware | tools hardware equipment hand power wrench hammer | `import IconTools from "@kesko/iconography/react/IconTools";` | `import iconTools from "@kesko/iconography/tools.js";` | `@kesko/iconography/tools.svg` | | tow | car | tow truck roadside assistance vehicle hitch trailer | `import IconTow from "@kesko/iconography/react/IconTow";` | `import iconTow from "@kesko/iconography/tow.js";` | `@kesko/iconography/tow.svg` | | toys | grocery | toys children play games kids fun products | `import IconToys from "@kesko/iconography/react/IconToys";` | `import iconToys from "@kesko/iconography/toys.js";` | `@kesko/iconography/toys.svg` | | trailer-rental | hardware | trailer rental transport hire borrow vehicle haul move | `import IconTrailerRental from "@kesko/iconography/react/IconTrailerRental";` | `import iconTrailerRental from "@kesko/iconography/trailer-rental.js";` | `@kesko/iconography/trailer-rental.svg` | | twitter | social | Twitter X social media brand logo microblogging network | `import IconTwitter from "@kesko/iconography/react/IconTwitter";` | `import iconTwitter from "@kesko/iconography/twitter.js";` | `@kesko/iconography/twitter.svg` | | undo | action | undo reverse back step previous action | `import IconUndo from "@kesko/iconography/react/IconUndo";` | `import iconUndo from "@kesko/iconography/undo.js";` | `@kesko/iconography/undo.svg` | | upload | action | upload file cloud arrow up share transfer | `import IconUpload from "@kesko/iconography/react/IconUpload";` | `import iconUpload from "@kesko/iconography/upload.js";` | `@kesko/iconography/upload.svg` | | user-b2b | people | B2B user business client company professional account | `import IconUserB2b from "@kesko/iconography/react/IconUserB2b";` | `import iconUserB2b from "@kesko/iconography/user-b2b.js";` | `@kesko/iconography/user-b2b.svg` | | user-group | people | group users team people multiple accounts | `import IconUserGroup from "@kesko/iconography/react/IconUserGroup";` | `import iconUserGroup from "@kesko/iconography/user-group.js";` | `@kesko/iconography/user-group.svg` | | user-normal | people | user person individual account profile human | `import IconUserNormal from "@kesko/iconography/react/IconUserNormal";` | `import iconUserNormal from "@kesko/iconography/user-normal.js";` | `@kesko/iconography/user-normal.svg` | | utility-automotive | car | automotive utility service vehicle car accessory | `import IconUtilityAutomotive from "@kesko/iconography/react/IconUtilityAutomotive";` | `import iconUtilityAutomotive from "@kesko/iconography/utility-automotive.js";` | `@kesko/iconography/utility-automotive.svg` | | valentines | grocery | Valentines Day February love heart celebration seasonal | `import IconValentines from "@kesko/iconography/react/IconValentines";` | `import iconValentines from "@kesko/iconography/valentines.js";` | `@kesko/iconography/valentines.svg` | | vegan | sustainability | vegan plant-based no animal products label dietary | `import IconVegan from "@kesko/iconography/react/IconVegan";` | `import iconVegan from "@kesko/iconography/vegan.js";` | `@kesko/iconography/vegan.svg` | | vege-lakto-ovo | sustainability | vegetarian lacto ovo vegetarian eggs dairy label dietary | `import IconVegeLaktoOvo from "@kesko/iconography/react/IconVegeLaktoOvo";` | `import iconVegeLaktoOvo from "@kesko/iconography/vege-lakto-ovo.js";` | `@kesko/iconography/vege-lakto-ovo.svg` | | versatile-delivery-options | hardware | versatile delivery options flexible shipping multiple methods | `import IconVersatileDeliveryOptions from "@kesko/iconography/react/IconVersatileDeliveryOptions";` | `import iconVersatileDeliveryOptions from "@kesko/iconography/versatile-delivery-options.js";` | `@kesko/iconography/versatile-delivery-options.svg` | | vest | hardware | vest safety high-visibility reflective workwear protective clothing | `import IconVest from "@kesko/iconography/react/IconVest";` | `import iconVest from "@kesko/iconography/vest.js";` | `@kesko/iconography/vest.svg` | | view-grid | action | grid view layout tiles mosaic display mode | `import IconViewGrid from "@kesko/iconography/react/IconViewGrid";` | `import iconViewGrid from "@kesko/iconography/view-grid.js";` | `@kesko/iconography/view-grid.svg` | | view-list | action | list view layout rows linear display mode | `import IconViewList from "@kesko/iconography/react/IconViewList";` | `import iconViewList from "@kesko/iconography/view-list.js";` | `@kesko/iconography/view-list.svg` | | volume-down | action | volume down low sound audio speaker quiet softer | `import IconVolumeDown from "@kesko/iconography/react/IconVolumeDown";` | `import iconVolumeDown from "@kesko/iconography/volume-down.js";` | `@kesko/iconography/volume-down.svg` | | volume-full | action | volume full max loud sound audio speaker maximum | `import IconVolumeFull from "@kesko/iconography/react/IconVolumeFull";` | `import iconVolumeFull from "@kesko/iconography/volume-full.js";` | `@kesko/iconography/volume-full.svg` | | volume-mute | action | volume mute silent no sound audio speaker off | `import IconVolumeMute from "@kesko/iconography/react/IconVolumeMute";` | `import iconVolumeMute from "@kesko/iconography/volume-mute.js";` | `@kesko/iconography/volume-mute.svg` | | volume-up | action | volume up high sound audio speaker louder increase | `import IconVolumeUp from "@kesko/iconography/react/IconVolumeUp";` | `import iconVolumeUp from "@kesko/iconography/volume-up.js";` | `@kesko/iconography/volume-up.svg` | | wallpapers | hardware | wallpaper wall covering decoration interior design pattern | `import IconWallpapers from "@kesko/iconography/react/IconWallpapers";` | `import iconWallpapers from "@kesko/iconography/wallpapers.js";` | `@kesko/iconography/wallpapers.svg` | | warehouse | shopping | warehouse storage inventory stock logistics supply | `import IconWarehouse from "@kesko/iconography/react/IconWarehouse";` | `import iconWarehouse from "@kesko/iconography/warehouse.js";` | `@kesko/iconography/warehouse.svg` | | warning | attention | warning alert danger caution exclamation triangle | `import IconWarning from "@kesko/iconography/react/IconWarning";` | `import iconWarning from "@kesko/iconography/warning.js";` | `@kesko/iconography/warning.svg` | | water-saving | sustainability | water saving conservation eco sustainable environment | `import IconWaterSaving from "@kesko/iconography/react/IconWaterSaving";` | `import iconWaterSaving from "@kesko/iconography/water-saving.js";` | `@kesko/iconography/water-saving.svg` | | water-sewage | hardware | water sewage plumbing pipe drainage utility infrastructure | `import IconWaterSewage from "@kesko/iconography/react/IconWaterSewage";` | `import iconWaterSewage from "@kesko/iconography/water-sewage.js";` | `@kesko/iconography/water-sewage.svg` | | web-store | hardware | web store online shop ecommerce digital retail internet | `import IconWebStore from "@kesko/iconography/react/IconWebStore";` | `import iconWebStore from "@kesko/iconography/web-store.js";` | `@kesko/iconography/web-store.svg` | | whats-app | social | WhatsApp messaging social media brand logo chat | `import IconWhatsApp from "@kesko/iconography/react/IconWhatsApp";` | `import iconWhatsApp from "@kesko/iconography/whats-app.js";` | `@kesko/iconography/whats-app.svg` | | work-and-protectice-clothing | hardware | work protective clothing safety gear workwear uniform garment | `import IconWorkAndProtecticeClothing from "@kesko/iconography/react/IconWorkAndProtecticeClothing";` | `import iconWorkAndProtecticeClothing from "@kesko/iconography/work-and-protectice-clothing.js";` | `@kesko/iconography/work-and-protectice-clothing.svg` | | world | location | world global globe earth international language | `import IconWorld from "@kesko/iconography/react/IconWorld";` | `import iconWorld from "@kesko/iconography/world.js";` | `@kesko/iconography/world.svg` | | wrench | common | wrench tool spanner repair fix hardware | `import IconWrench from "@kesko/iconography/react/IconWrench";` | `import iconWrench from "@kesko/iconography/wrench.js";` | `@kesko/iconography/wrench.svg` | | www | communication | WWW web website URL internet address globe | `import IconWww from "@kesko/iconography/react/IconWww";` | `import iconWww from "@kesko/iconography/www.js";` | `@kesko/iconography/www.svg` | | x | social | x twitter social network | `import IconX from "@kesko/iconography/react/IconX";` | `import iconX from "@kesko/iconography/x.js";` | `@kesko/iconography/x.svg` | | xmas | grocery | Christmas Xmas holiday December seasonal tree | `import IconXmas from "@kesko/iconography/react/IconXmas";` | `import iconXmas from "@kesko/iconography/xmas.js";` | `@kesko/iconography/xmas.svg` | | yard-and-garden | hardware | yard garden outdoor landscape plants lawn greenery backyard | `import IconYardAndGarden from "@kesko/iconography/react/IconYardAndGarden";` | `import iconYardAndGarden from "@kesko/iconography/yard-and-garden.js";` | `@kesko/iconography/yard-and-garden.svg` | | youtube | social | YouTube video social media brand logo streaming platform | `import IconYoutube from "@kesko/iconography/react/IconYoutube";` | `import iconYoutube from "@kesko/iconography/youtube.js";` | `@kesko/iconography/youtube.svg` | --- # System overview > Kesko Design System is a set of @kesko/* packages that Kesko product teams install into their apps. Below is a compact map of what each package does and which one to reach for first. ## What you’re working with A set of `@kesko/*` packages you install into your Kesko product. All public identifiers share the `k-` prefix. Sizes follow a T-shirt scale (`4xs`, `3xs`, `2xs`, `xs`, `sm`, **`md` is default**, `lg`, `xl`, `2xl`, `3xl`). Accessibility and machine-readability come first. The system is still in alpha, so some APIs will change. ## Packages | Package | What you get | Deeper skill | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | | `@kesko/color` | A contrast-based color palette. 10 families, 12 steps each, plus a dedicated `neutral-dark` palette for dark mode. | `kesko-colors` | | `@kesko/tokens` | Design tokens for color, typography, spacing, motion, radius, shadow, z-index, opacity, and size. Available as CSS, SCSS, LESS, JavaScript, TypeScript, JSON, iOS Swift, and Android XML. | `kesko-tokens` | | `@kesko/fonts` | The SkattaSansUI typeface as `@font-face` declarations plus `.woff2`, `.woff`, and `.ttf` files. 8 variants, with a `system-ui` fallback tuned to match SkattaSansUI’s metrics. | `kesko-fonts` | | `@kesko/iconography` | 372 SVG icons on a 24×24 grid, organized by category and tag. Pick a tree-shakeable React component, the `Icon` wrapper, a plain ES module, or the raw `.svg` file. | `kesko-iconography` | | `@kesko/css` | A lightweight CSS framework. `kesko.min.css` bundles tokens, the typeface, and `k-`prefixed utility classes. An optional add-on, `components.min.css`, mirrors `@kesko/components` styles for plain-HTML projects. | `kesko-styles` | | `@kesko/themes` | Per-brand CSS overrides on top of `@kesko/tokens`, with auto-generated dark mode. Covers 8 Kesko brands: `kesko`, `k-ruoka`, `k-rauta`, `kespro`, `k-business`, `k-tools`, `k-auto`, and `onninen`. | `kesko-themes` | | `@kesko/components` | A React component library with paired plain-HTML examples styled by `@kesko/css`. Currently ships `Button`, `Spinner`, `Stack`, and `VisuallyHidden`. Still in early alpha. | `kesko-components` | ## Picking the right package for a task - **Looking up a token value or CSS custom property name.** Reach for `@kesko/tokens`. - **Extending a palette, or asking how dark mode is derived.** Reach for `@kesko/color`. - **Styling plain HTML or a non-React project.** Start with `@kesko/css`. Add `components.min.css` only if you need `.k-button`, `.k-stack`, and other component classes without React. - **Building a React app.** Install `@kesko/components` and import `@kesko/css/dist/kesko.min.css`. Do not also load `components.min.css`: `@kesko/components` already ships its component CSS per-component, so the two would duplicate rules. - **Loading the typeface.** It is normally included through `@kesko/css`. Reach for `@kesko/fonts` standalone only when you do not want the tokens and utilities that `@kesko/css` bundles. - **Switching brand, or adding a new brand.** Use `@kesko/themes`. Brand definitions live in `@kesko/tokens/themes/`, and the generated CSS ships in `@kesko/themes`. - **Picking an icon, or labeling one for screen readers.** Reach for `@kesko/iconography`. ## Naming conventions recap - Everything public uses the `k-` prefix (CSS classes, custom properties, design tokens). Private or internal custom properties use `--_k-*`. - React components are `PascalCase` nouns (for example, `Button`, `VisuallyHidden`). Their root class is `.k-{name}`. - Semantic color tokens: `k-color-{role}-{modifier}` (for example, `k-color-text-accent`). Primitive palette: `k-color-{family}-{step}`, with steps from 100 to 1200. - Sizes always use the short T-shirt form. The `-md` suffix is the default (`k-font-size-md` is the base font size, not an alias to another token). For the full rules, load `kesko-naming`. ## Where to go next - Rules for adding or renaming anything: `kesko-naming`. - Design variables (colors, spacing, typography, motion, and more): `kesko-tokens`. - Palette theory, contrast steps, and dark-mode derivation: `kesko-colors`. - Typeface setup: `kesko-fonts`. - Brand theming: `kesko-themes`. - Icons: `kesko-iconography`. - React components and HTML examples with full APIs: `kesko-components`. - The utility-class CSS framework: `kesko-styles`. --- # Playground --- # Core principles > These principles form the foundation of our design system. They guide our team when working on different parts of the system and help us do better and more informed decisions. ### Include people We include people into the process to build trust, share understanding, and co-create solutions. We want everyone using our system to become a design system champion. ### Promote consistency Consistency enhances clarity and makes our system more predictable and easy to use. We use the same language and patterns wherever possible. ### Embrace accessibility Accessibility is in the core of the World Wide Web. We embrace it by making our system available to, and accessible by, everyone. ### Reduce complexity Modularity reduces complexity and improves our design system’s reusability by breaking it into small, easy to consume parts. ### Support adaptability Our design system adapts to product teams’ changing goals and contexts, enabling multiple pathways instead of enforcing a single way to work. ### Empower with AI We build AI features for every part of the design and development journey. From expert guidance on our system, to generating user interfaces of the future. --- ### Design as infrastructure Our goal isn’t just building better tools or products, it’s about creating the infrastructure for an entire ecosystem of design and frontend innovation at Kesko. ### Scalable, consistent outcomes We provide the core foundation across teams and projects, enabling scalable, consistent outcomes. This is a long-term investment that supports Kesko’s ability to innovate and compete at scale. ### Reduced development costs Design system enables faster development, higher-quality experiences, and reduced maintenance costs. This gives us the opportunity to allocate more time for innovating on new features. ### Improved collaboration Design system helps establish a common vocabulary between everyone at Kesko and improves collaboration between different teams and disciplines. ### Foundation for AI adoption As AI transforms our workflows, design systems are becoming the foundation for rapid prototyping and feature creation. Investing in this infrastructure ensures we deliver at the speed the market demands. --- # Quick start > Get up and running in minutes. Install the packages you need, pull in our tokens and fonts, and start shipping intuitive, accessible interfaces that feel consistent across every Kesko product. ## How designers use the system Until the Figma libraries ship, treat this site as the source of truth. The [colors](/colors/), [icon library](/icons/), and [naming guidelines](/naming/) can already be referenced and tested today. ### Access on Figma Bring your Figma concepts to life using Kesko Design System’s Figma toolkit. Currently under development, shipping later this year. Check [our roadmap](/roadmap/) for the latest status. > Note: We’ll reach out to product teams once the Figma toolkit is ready for testing and feedback. In the meantime, feel free to ask a question. --- ## How engineers use the system Kesko Design System is distributed as a set of npm packages under the `@kesko` scope. Install the packages you need, import them into your project, and you get the same tokens, fonts, and assets every other Kesko product uses. ### Packages you can use today Two packages are stable and ready to use in production: - **[Icon library](/icons/)** (`@kesko/iconography`). ~400 vector icons, available as SVG files, ES modules, or tree-shakeable React components. - **[Webfonts](/webfonts/)** (`@kesko/fonts`). The Skatta Sans UI typeface, shipped as `@font-face` declarations in CSS, SCSS, or LESS. In active development, expected later this year: - **[Design tokens](/tokens/)** (`@kesko/tokens`) - **[Color palette](/colors/)** (`@kesko/color`) - **[Themes](/themes/)** (`@kesko/themes`) - **[CSS framework](/css/)** (`@kesko/css`) - **[Components](/components/)** (`@kesko/components`) See the [roadmap](/roadmap/) for status updates and [releases](/releases/) for the change history. ### Install packages Install with your preferred package manager: ```sh [npm] npm install @kesko/iconography @kesko/fonts ``` ```sh [pnpm] pnpm add @kesko/iconography @kesko/fonts ``` ```sh [yarn] yarn add @kesko/iconography @kesko/fonts ``` ```sh [bun] bun add @kesko/iconography @kesko/fonts ``` ### Your first integration Load the typeface and render an icon: ```tsx import "@kesko/fonts/dist/fonts.css"; import { IconHome } from "@kesko/iconography/react"; export default function App() { return (

Hello world!

); } ``` See the [Webfonts](/webfonts/) and [Icon library](/icons/) pages for per-package setup, import paths, and more examples. ### Set up your AI assistant If you use an AI coding assistant, install our agent skills so it picks up Kesko Design System’s conventions on naming, tokens, themes, components, iconography, and styles automatically: ```sh npx skills add https://kesko.design ``` See [AI features](/ai/) for the full guidelines, including hosted `llms.txt` endpoints, hand-off to Claude or ChatGPT, and a drop-in instructions file for agentic IDEs. ### Staying up to date Each package tracks its own version, so you can upgrade one piece without bumping the rest. Watch the [releases](/releases/) page for the full change history and join our [Slack channel](/help/#slack-channels) to get notified when new major features ship. --- ## Resources Essential tooling for Kesko Design System: Figma libraries, illustrations, typefaces, brand manuals, and more. --- ## Contact us Have a question about integration, or want to request something that isn’t here yet? - Browse the [FAQ](/faq/) for common topics. - Open an issue or start a discussion on [GitHub](https://github.com/kesko-dev/design-system). - See the [Help](/help/) page for all support channels. --- # Roadmap > The roadmap of Kesko Design System, based on our future planned design and development path. Subject to change based on user needs and feedback. ## Q3 2025 - ~~Done: Kespro support~~ - ~~Done: Initial project planning~~ - ~~Done: Initial background research~~ - ~~Done: Initial user research~~ - ~~Done: Technical research and audits~~ ## Q4 2025 - ~~Done: Architecture and API design~~ - ~~Done: [Roadmap and scope](/roadmap/)~~ - ~~Done: [Design system goals](/principles/#our-goals)~~ - ~~Done: [Design system principles](/principles/)~~ - ~~Done: Live previews for GitHub pull requests~~ - ~~Done: Build, test & deploy automation on CI~~ - ~~Done: [LLMs.txt](/llms.txt) for AI models~~ - ~~Done: [Markdown content](/principles.md) for AI models~~ - ~~Done: Getting buy-in and support~~ - ~~Done: Custom Elements proof of concepts & ADRs~~ - ~~Done: Initial documentation platform~~ - ~~Done: Initial infrastructure foundations~~ ## Q1 2026 - ~~Done: Kicking off weekly updates~~ - ~~Done: Adjusted roadmap for 2026 and beyond~~ - ~~Done: [Naming conventions](/naming/)~~ - ~~Done: Kicking off bi-weekly office hours~~ - ~~Done: Improved LLMs support for the docs platform~~ - ~~Done: Improved support for different content types in docs~~ - ~~Done: Foundational design token infrastructure~~ - ~~Done: Foundational color palette infrastructure~~ - ~~Done: Created new [@kesko/tokens](https://github.com/kesko-dev/design-system/tree/main/packages/tokens) package~~ - ~~Done: Created new [@kesko/color](https://github.com/kesko-dev/design-system/tree/main/packages/color) package~~ - ~~Done: Created new [@kesko/fonts](https://github.com/kesko-dev/design-system/tree/main/packages/fonts) package~~ - ~~Done: System [instructions](https://github.com/kesko-dev/design-system/blob/main/CLAUDE.md) for Copilot and Claude agents~~ - ~~Done: [Design Tokens documentation](/tokens/) features~~ - ~~Done: Code and contributing conventions~~ - ~~Done: Release process and [changelog](/releases/) for the docs platform~~ - ~~Done: Icons library with ES modules and React components~~ - ~~Done: [Usage guidelines](/icons/) for `@kesko/icons` package~~ - ~~Done: Bug report and feature request workflow~~ - ~~Done: [Usage guidelines](/webfonts/) for `@kesko/fonts` package~~ - ~~Done: Product team support with `@kesko/icons` migration~~ - ~~Done: Start hiring a Design Engineer for the systems team~~ - ~~Done: Piloting the new icons and fonts with product teams~~ - ~~Done: Analytics platform to track the adoption of the design system~~ ## Q2 2026 - ~~Done: Piloting the new icons and fonts with product teams~~ - ~~Done: Publish first stable production release of [icons](/icons/), `v1.0.0`~~ - ~~Done: Hiring a [Design Engineer](https://arielsalminen.com/2026/hiring-a-design-engineer-for-kesko-design-system/) for the systems team~~ - ~~Done: [Usage guidelines](/colors/) for `@kesko/color` package~~ - ~~Done: [Usage guidelines](/tokens/#usage) for `@kesko/tokens` package~~ - ~~Done: Internal Design System APIs~~ - ~~Done: Gathering and documenting the existing design tokens~~ - ~~Done: Beta release of design tokens~~ - ~~Done: Improved color palettes~~ - ~~Done: Publish first stable production release of [webfonts](/webfonts/), `v1.0.0`~~ - ~~Done: Alpha release of the themes package~~ - ~~Done: Themeable design tokens~~ - ~~Done: Theme dark mode support~~ - ~~Done: Design tokens [documentation](/tokens/)~~ - ~~Done: [Design token visualizer](/tokens/#design-token-visualizer) tool~~ - ~~Done: Alpha release of the CSS framework package~~ - ~~Done: Automated accessibility and visual diff tests~~ - ~~Done: Docker setup for running visual diff tests~~ - ~~Done: User editable [component usage examples](/components/button/)~~ - ~~Done: Theming support for documentation platform~~ - ~~Done: Onninen and K-Ruoka themes~~ - ~~Done: [Usage guidelines](/css/) for `@kesko/css` package~~ - ~~Done: JSON Manifest generation from component JSdoc annotations~~ - ~~Done: Auto generation of vanilla HTML component utilities~~ - ~~Done: Auto generation of [components documentation](/components/) and subpages~~ - ~~Done: Developing the first set of React+HTML components~~ - ~~Done: Alpha/beta releases of the new npm packages~~ - ~~Done: [Usage guidelines](/themes/) for `@kesko/themes` package~~ - ~~Done: [Resources page](/resources/) with tools and downloads~~ - ~~Done: [Interactive code playground](/playground/) for editing examples live in the browser~~ - ~~Done: Improved mobile version of the documentation platform~~ - ~~Done: Design token naming and consistency.~~ - ~~Done: Re-designed documentation search experience~~ - ~~Done: [AI features](/ai/) documentation~~ - ~~Done: Design system agent skills that you can install~~ - **In progress:** Theming API and NPM package - **In progress:** Component library - **In progress:** CSS Framework - Usage guidelines for `@kesko/components` package - Kicking off monthly updates - On-boarding new team members - Set up a framework for tracking design system KPIs - Figma Toolkit work begins - Piloting the new features with product teams ## Q3 2026 - Design system CDN (Content Delivery Network) - Components work continues - Figma Toolkit work continues - Continued work on improving the docs platform - Piloting new features with the product teams - Continued design system research - Design system workshops ## Q4 2026 - Work on components continues - Technical writing for the documentation - Continued work on improving the docs platform - Content and accessibility guidelines - Piloting the new features with product teams ## Q1 2027 - Improving existing tools, new features & bug fixes - Migration support and tools for product teams - Introducing wider contribution model - Onboarding wider developer community - Publishing production ready modules - Rollout to production environments - Model Context Protocol Server - Design systems support ## Q2 2027 - Improved automation between Figma & code - Improving existing tools, new features & bug fixes - Support with migration & related tools - Ramping down old design systems - Design system support - Public release ## Q3 2027 - Improving existing tools, new features & bug fixes - Work on components continues - Work on Figma Toolkit continues - Continued research & workshops - Design system support --- # AI features > Good design systems make the next thing easier to build. Good AI tools should do the same, so Kesko Design System is built for both people and the AI tools they work with. That means every page is readable both ways. [Hand any page](#llmstxt) to Claude, ChatGPT, or Copilot in one click, or install our [agent skills](#agent-skills) so your AI tools pick up the Kesko Design System conventions automatically. ## LLMs.txt To streamline development with AI, Kesko Design System publishes its documentation as machine-readable text files that AI assistants and LLMs can consume directly: | URL | Description | | ------------------------------------------------------ | ---------------------------------------------------------- | | [`/llms.txt`](https://kesko.design/llms.txt) | Page index with descriptions for every documentation page. | | [`/llms-full.txt`](https://kesko.design/llms-full.txt) | Full documentation content in a single file. | | `/{any-page}.md` | Any docs page as Markdown. Append `.md` to the URL. | These files are generated automatically at build time and always reflect the latest published docs. Use them when you need to give an LLM more context on Kesko Design System without installing any packages. ## Usage with AI assistants AI-powered coding tools can interpret these files to deliver tailored suggestions, code snippets, and answers grounded in Kesko Design System’s actual APIs. There are three common ways to bring the content into a chat: - **Upload the file.** Most assistants accept plain-text file uploads. Grab `llms-full.txt` and attach it. - **Copy and paste.** Open any page’s `.md` URL and paste the content into the assistant's input area. - **Point to the URL.** Tools that can fetch URLs (for example Claude, ChatGPT, or Cursor) can read [https://kesko.design/llms-full.txt](https://kesko.design/llms-full.txt) directly. Every page with a visible copy menu next to its heading makes the hand-off one click. Pick “Open in Claude” or “Open in ChatGPT” and the assistant opens with a pre-filled prompt pointing at that page’s Markdown. ### Ask high-level questions With the context loaded, broad questions work well: - _“What components does Kesko Design System offer for form input?"_ - _“Which semantic color tokens should I use for an error message?"_ - _“How does Kesko Design System handle dark mode?"_ ### Generate code examples For quick snippets, try prompts like: - _“Show a Kesko Design System `