Icon

Icon

import Airplane from "@kiwicom/orbit-components/lib/icons/Airplane";
<Airplane />

Props

NameTypeDefaultDescription
classNamestringThe optional className of Icon.
colorenumcurrentColorThe color of the Icon.
customColorstringThe customColor of the Icon, as valid CSS value. See Functional specs
dataTeststringOptional prop for testing purposes.
sizeenum"medium"The size of the Icon.
reverseOnRtlbooleanfalseIf true, the icon will be reversed if theme.rtl is set to true.
ariaHiddenbooleanAdds prop aria-hidden to an element, useful for screenreaders.
ariaLabelstringAdds prop aria-label to an element, useful for screenreaders.

enum

colorsize
"primary""small"
"secondary""medium"
"tertiary""large"
"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.

iconFont

import iconFont from "@kiwicom/orbit-components/orbit-icons-font/orbit-icons.woff2";