Your bookmarks

Icon / React Native

Icon draws attention to specific actions in our products.

Multiple Orbit components for displaying iconography.

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

@TODO build separate files in addition to the complete bundle

import { Icon } from '@kiwicom/orbit-react-native';
// or
import { Airplane } from '@kiwicom/orbit-react-native';

You can find a list of all possible icons.


<Icon name="airplane" >/
{* or *}
<Airplane />


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

Name Type Platform Default Description
name enum web/native The actual icon to use. See list of icons
color enum web/native currentColor The color of the Icon.
customColor string web/native The customColor of the Icon. See Functional specs
dataTest string web/native Optional prop for testing purposes.
size enum web/native "medium" The size of the Icon.
reverseOnRtl boolean web/native false If true, the icon will be reversed if theme.rtl is set to true.


color size name
"attention" "small" See list of icons
"primary" "medium"
"secondary" "large"

Functional specs

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


  • If an icon is used standalone meaning it conveys information by itself use ariaLabel to help screen readers understand the content.
  • If an icon is marked or already labeled by surrounding content, use ariaHiddento hide icon from screen readers.