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.

Usage

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

Props

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.

enum

color size name
"attention" "small" See list of icons
"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 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.