Design System - Icons

Icons

Icons currently have a set size of 24x24 pixels.

caret

<CaretIcon  />

Copy

cart

<CartIcon  />

Copy

plus

<PlusIcon  />

Copy

minus

<MinusIcon  />

Copy

bag empty

<BagEmptyIcon  />

Copy

alarm on

<AlarmOnIcon  />

Copy

<CloseIcon style={{
  "padding": 8
}} />

Copy

close (thick)

<CloseIcon style={{
  "padding": 8
}} type={"thick"} />

Copy

reload

<CloseIcon style={{
  "padding": 8
}} />

Copy

realod (thick)

<CloseIcon style={{
  "padding": 8
}} type={"thick"} />

Copy

Props can be added to customize the icon color.

buffy orange cart

<CartIcon color={"buffyOrange"} />

Copy

eucalyptus plus

<PlusIcon color={"eucalyptus"} />

Copy

Additionally, a prop for click handler can be provided.

click the cart icon!

<CartIcon onClick={()=>alert("click on cart")} />

Copy

Icon Properties
Name	Description	Type	Required	Default
color	Design system color of icon.	string	false	"defaultText"
width	Icon width in pixels.	number	false	32
onClick	Function that executes when clicked.	function	false	()=>{}
className	List of classes for this element.	string \| array	false	""