# Tile.TaskIcon

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

Displays healthcare measurement type icons using SVG graphics with theme integration and support for various medical device types.

## Quick Example [#quick-example]

```tsx
import React from "react";
import { Tile, useAppTheme } from "@ovok/native";
import { MeasurementTypeKey } from "@ovok/core/next";

export const TaskIconExample = () => {
  const theme = useAppTheme();

  return (
    <Tile>
      <Tile.StartSection
        isCompleted={false}
        left={() => (
          <Tile.TaskIcon
            measurementTypeKey={MeasurementTypeKey.bloodPressure}
            size={24}
            color={theme.colors.primary}
            testID="blood-pressure-icon"
          />
        )}
      />
    </Tile>
  );
};
```

## Props [#props]

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

## Component Behavior [#component-behavior]

The TaskIcon component:

1. **Icon Selection**: Uses `measurementTypeKey` to select the appropriate SVG icon
2. **Color Application**: Applies the specified color (or theme primary) to the SVG fill
3. **Size Control**: Sets both width and height to the same value for square icons
4. **Fallback**: Returns null if no icon is found for the measurement type
5. **Memoization**: Uses React.useMemo to optimize SVG generation

## Localization [#localization]

This component does not use localization directly as it displays visual icons. However, it's often used alongside localized text:

```tsx
import { useTranslation } from "react-i18next";

export const LocalizedIconExample = () => {
  const { t } = useTranslation();

  return (
    <Tile>
      <Tile.StartSection
        isCompleted={false}
        left={() => (
          <Tile.TaskIcon
            measurementTypeKey={MeasurementTypeKey.bloodPressure}
          />
        )}
      />
      <Tile.Title>{t("tile.bloodPressure.label")}</Tile.Title>
    </Tile>
  );
};
```

## Styling [#styling]

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

- `theme.colors.primary` - Default icon fill color when no custom color is provided

## Technical Implementation [#technical-implementation]

The component uses:

- **react-native-svg**: For SVG rendering
- **Memoization**: Performance optimization for icon generation
- **Dynamic SVG**: Icons are generated as SVG strings with dynamic color injection

## Related Components [#related-components]

- [Tile.StartSection](/native-sdk/guide/components/tile/start-section/) - Common container for TaskIcon
- [Tile.Title](/native-sdk/guide/components/tile/title/) - Often used together to identify measurement type
- [Tile.Status](/native-sdk/guide/components/tile/status/) - Alternative status display for device states