# Icon



> 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.

## Examples

### Default

```tsx
import { IconBasketAddTo } from "@kesko/iconography/react";

export default () => (
  <IconBasketAddTo size="xl" />
);
```

### Button

```tsx
import { Button, Stack } from "@kesko/components";
import { IconBasketAddTo, IconExternalLink } from "@kesko/iconography/react";

export default () => (
  <Stack direction="row" gap="2xs" align="center" wrap>
    <Button variant="primary">
      <IconBasketAddTo /> Primary
    </Button>
    <Button variant="primary" iconOnly>
      <IconBasketAddTo label="Add to basket" />
    </Button>
    <Button>
      Default <IconExternalLink />
    </Button>
    <Button disabled>
      Disabled <IconExternalLink />
    </Button>
    <Button variant="plain">
      <IconBasketAddTo /> Plain
    </Button>
    <Button variant="text">
      <IconBasketAddTo /> Text
    </Button>
  </Stack>
);
```

### Color

```tsx
import { IconBasketAddTo } from "@kesko/iconography/react";

export default () => (
  <IconBasketAddTo color="var(--k-color-accent)" size="xl" />
);
```

### Label

```tsx
import { Button } from "@kesko/components";
import { IconBasketAddTo } from "@kesko/iconography/react";

export default () => (
  <Button variant="primary" iconOnly>
    <IconBasketAddTo label="Add to basket" size="xl" />
  </Button>
);
```

### Sizes

```tsx
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>
);
```


## Props

- `color` — `string` (default: `currentColor`) Any CSS color value or a [design token](/tokens/). When omitted, inherits current text color via CSS cascade.
- `label` — `string` Sets `aria-label` and `role="img"` to the icon. Omit for decorative icons (`aria-hidden` set by default).
- `size` — `"xs" | "sm" | "md" | "lg" | "xl" | number | string` (default: `"md"`) Size of the icon. Please see [size tokens](/tokens/#sizes) for more details.