# DiaryCard.TaskIcon

Canonical page: https://docs.ovok.com/native-sdk/guide/components/diary/task-icon

The `DiaryCard.TaskIcon` component displays a measurement type icon. It is inherited from the Tile module's `TaskIcon` and exposed on `DiaryCard` for convenience.

## Basic Example [#basic-example]

```tsx
import { MeasurementTypeKey } from "@ovok/core/next";
import { DiaryCard } from "@ovok/native";
import * as React from "react";

const BasicDiaryCardTaskIconExample = () => {
  return (
    <DiaryCard.TaskIcon measurementTypeKey={MeasurementTypeKey.bodyWeight} />
  );
};

export default BasicDiaryCardTaskIconExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/diary` API reference](/native-sdk/reference/diary).

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.primary` - Default icon color when `color` is not provided

If the measurement key has no bundled SVG mapping, the component returns `null`; it
does not render a generic placeholder. The core key used for the urine-analysis icon
is `MeasurementTypeKey.uricAcid`; a separate `urineAnalysis` name is not mapped and
will therefore render nothing.

## Related Components [#related-components]

- [DiaryCard](/native-sdk/guide/components/diary/diary-card/)
- [DiaryCard.StartSection](/native-sdk/guide/components/diary/start-section/)
- [Tile.TaskIcon](/native-sdk/guide/components/tile/task-icon/)