The HighlightIcon comes with two main visual styles: status and decorative.
<>
<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" />
</>
<>
<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" />
</>
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" />
</>