Production icons
The 59 icons the product uses, generated path-for-path from apps/frontend/src/shared/components/icons.tsx with production's names. Like production's Chakra icons they are 1em square and follow the text colour, except where production fixes a colour (card logos, the white marks inside filled circles). Decorative by default — pass an aria-label to announce one.
Arrows and chevrons
ChevronLeftIcon
ChevronRightIcon
ChevronUpIcon
ChevronDownIcon
ArrowLeftIcon
ArrowRightIcon
ArrowLeftCircleIcon
ArrowRightCircleIcon
ArrowDownCircleIcon
Status
TickCircularIcon
TickCircularInverseIcon
TickVerifiedIcon
CrossCircularIcon
InfoIcon
InfoFilledIcon
WarningFilledIcon
StatusIcon
InProgressIcon
ActiveIcon
CircleIcon
CircleLinesLoaderIcon
NotificationIcon
Actions
CloseIcon
CrossIcon
SearchIcon
MenuIcon
DownloadIcon
DownloadFilledIcon
UploadIcon
CopyIcon
CopyClipboardIcon
LinkIcon
LinkDeactivatedIcon
RefreshIcon
SyncIcon
SplitIcon
TrashIcon
StarFilledIcon
BoldImageIcon
Contact
MailCircleIcon
PhoneCallCircleIcon
Travel
PlaneTakeOffIcon
PlaneLandingIcon
BedIcon
CarIcon
GlobeIcon
TreeIcon
Payments and card brands
PaymentIcon
WireTransferIcon
NewCard
VisaBrandIcon
MasterCardBrandWithTextIcon
DiscoverBrandIcon
AmexBrandIcon
Portal navigation
DiscoveryFilledIcon
MoaiFilledIcon
MoaiWithBgIcon
FinanceIcon
GSMIcon
On a dark surface
The carousel arrows are drawn in white for production's dark image carousels, so they disappear on the light tiles above.
Colour
Icons take currentColor, so they follow the text colour role they sit in. Size them with the size prop where production sets a size — for example size="2.4rem" for the sidebar contact icons.