Icons are symbols that can be used to provide meaning in addition to text labels. Clear and consistent icon usage could help people complete their tasks.

Open in new tab 
import { IconBasketAddTo } from "@kesko/iconography/react";

export default () => (
  <IconBasketAddTo size="xl" />
);
import { Button, Stack } from "@kesko/components";
import { IconBasketAddTo, IconExternalLink } from "@kesko/iconography/react";

export default () => (
  <Stack direction="row" gap="2xs" align="center">
    <Button>
      <IconBasketAddTo /> Primary
    </Button>
    <Button square>
      <IconBasketAddTo label="Add to basket" />
    </Button>
    <Button>
      Default <IconExternalLink />
    </Button>
    <Button disabled>
      Disabled <IconExternalLink />
    </Button>
    <Button appearance="plain">
      <IconBasketAddTo /> Plain
    </Button>
    <Button appearance="text">
      <IconBasketAddTo /> Text
    </Button>
  </Stack>
);
import { IconBasketAddTo } from "@kesko/iconography/react";

export default () => (
  <IconBasketAddTo color="var(--k-color-theme)" size="xl" />
);
import { Button } from "@kesko/components";
import { IconBasketAddTo } from "@kesko/iconography/react";

export default () => (
  <Button square>
    <IconBasketAddTo label="Add to basket" size="xl" />
  </Button>
);
import { Stack } from "@kesko/components";
import { IconBasketAddTo } from "@kesko/iconography/react";

export default () => (
  <Stack direction="row" align="center">
    <IconBasketAddTo size="xs" />
    <IconBasketAddTo size="sm" />
    <IconBasketAddTo size="md" />
    <IconBasketAddTo size="lg" />
    <IconBasketAddTo size="xl" />
  </Stack>
);

Properties

NameDescriptionTypeDefault
color

Any CSS color value or a design token. When omitted, inherits current text color via CSS cascade.

stringcurrentColor
label

Sets aria-label and role="img" to the icon. Omit for decorative icons (aria-hidden set by default).

string—
size

Size of the icon. Please see size tokens for more details.

"xs" | "sm" | "md" | "lg" | "xl" | number | string"md"

Usage #

Icons ship in @kesko/iconography, which @kesko/components installs for you. See iconography for installing the package on its own, picking icons and how to use them outside of React or Next.js.

Full guidelines