HighlightIcon

Variant

The HighlightIcon comes with two main visual styles: status and decorative.

Status

<>
  <HighlightIcon name="hexagone-cross" size={32} variant="alert" />
  <HighlightIcon name="triangle-warning" size={32} variant="warning" />
  <HighlightIcon name="circle-information" size={32} variant="info" />
  <HighlightIcon name="circle-check" size={32} variant="success" />
  <HighlightIcon name="lock-close" size={32} variant="neutral" />
</>

Decorative

<>
  <HighlightIcon name="plane" size={32} variant="apricot" />
  <HighlightIcon name="plane" size={32} variant="blue" />
  <HighlightIcon name="plane" size={32} variant="carbon" />
  <HighlightIcon name="plane" size={32} variant="emerald" />
  <HighlightIcon name="plane" size={32} variant="forest" />
  <HighlightIcon name="plane" size={32} variant="grolive" />
  <HighlightIcon name="plane" size={32} variant="lemon" />
  <HighlightIcon name="plane" size={32} variant="ocean" />
  <HighlightIcon name="plane" size={32} variant="pink" />
  <HighlightIcon name="plane" size={32} variant="peach" />
  <HighlightIcon name="plane" size={32} variant="purple" />
</>

Size

The HighlightIcon comes with three sizes: 24, 32, 40 and 56 (default).

<>
  <HighlightIcon name="circle-information" size={24} variant="info" />
  <HighlightIcon name="circle-information" size={32} variant="info" />
  <HighlightIcon name="circle-information" size={40} variant="info" />
  <HighlightIcon name="circle-information" size={56} variant="info" />
</>