# Icon

Multiple Orbit components for displaying iconography.

To import the `Icon` (or eg: `Airplane`) component to your project:

```jsx
import { Icon } from '@kiwicom/orbit-react-native';
// or
import { icons } from '@kiwicom/orbit-react-native';
```

You can find a list of [all possible icons](https://kiwicom.github.io/orbit-components/?selectedKind=Icon&selectedStory=List%20of%20all%20icons).

## Usage

```jsx
<Icon name="airplane" >/
{* or *}
<icons.Airplane />
```

## Props

Table below contains all types of the props available for icons in general.

| Name               | Type            | Default        | Description                                                                                                                                      |
| :----------------- | :-------------- | :------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| name               | [`enum`](#enum) |                | The actual icon to use. [See list of icons](https://kiwicom.github.io/orbit-components/?selectedKind=Icon&selectedStory=List%20of%20all%20icons) |
| color              | [`enum`](#enum) | `currentColor` | The color of the Icon.                                                                                                                           |
| customColor        | `string`        |                | The customColor of the Icon. [See Functional specs](#functional-specs)                                                                           |
| testID             | `string`        |                | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!)                                   |
| **size**           | [`enum`](#enum) | `"medium"`     | The size of the Icon. (This disables the 'layout-only view removal' optimization for this view!)                                                 |
| reverseOnRtl       | `boolean`       | `false`        | If `true`, the icon will be reversed if `theme.rtl` is set to `true`.                                                                            |
| accessibilityLabel | `string`        |                | Adds `accessibilityLabel`                                                                                                                        |

### enum

| color         | size       | name                                                                                                                     |
| :------------ | :--------- | :----------------------------------------------------------------------------------------------------------------------- |
| `"attention"` | `"small"`  | [See list of icons](https://kiwicom.github.io/orbit-components/?selectedKind=Icon&selectedStory=List%20of%20all%20icons) |
| `"primary"`   | `"medium"` |                                                                                                                          |
| `"secondary"` | `"large"`  |                                                                                                                          |
| `"tertiary"`  |            |                                                                                                                          |
| `"info"`      |            |                                                                                                                          |
| `"success"`   |            |                                                                                                                          |
| `"warning"`   |            |                                                                                                                          |
| `"critical"`  |            |                                                                                                                          |

## Functional specs

- If you don't pass `customColor` or `color` prop to Icon, it will inherit color from parent container with `currentColor` by default.

## Accessibility

- If an icon is used standalone meaning it conveys information by itself use `accessibilityLabel` to help screen readers understand the content.