All Artsy icons can be found below. To use, import them from the main package
and invoke them as a React component:
import { CheckIcon } from "@artsy/palette"
const IsHighestBidder = () => {
return (
<Box>
<CheckIcon />
</Box>
)
}
Adding New Icons
Before adding the new .svg file to the project, consider using a tool to
compress and optimize the file.
Upload your .svg to SVGtoJSX and copy the output.
Prepare a PR by following the patterns in
this example.
Icon List
AddCircleFillIcon
AddItemIcon
AlertCircleFillIcon
ArrowDownCircleIcon
ArrowLeftCircleIcon
ArrowLeftIcon
ArrowRightCircleIcon
ArrowRightIcon
ArrowUpCircleIcon
ArtworkWithBadgeIcon
ArtworkWithCheckIcon
BlueChipIcon
CertificateIcon
CheckCircleFillIcon
ChevronIcon
CircleBlackCheckIcon
CircleWhiteCheckIcon
CreditCardIcon
EstablishedIcon
InstitutionIcon
LightningBoltIcon
MagnifyingGlassIcon
MultipleOffersIcon
NoArtworkIcon
PublicationIcon
QuestionCircleIcon
TopEmergingIcon
TopEstablishedIcon
TriangleDownIcon
UserWithChartIcon
ChevronIcon
This is a meta component that wraps the four directional arrows and accepts a
left, right, up, down direction. By default it uses right:
<Flex justifyContent="space-evenly" width="100%">
<ChevronIcon direction="up" height="40px" width="40px" />
<ChevronIcon direction="down" height="40px" width="40px" />
<ChevronIcon direction="left" height="40px" width="40px" />
<ChevronIcon direction="right" height="40px" width="40px" />
</Flex>
CreditCardIcon
This is a meta component that wraps the four designed credit card types and
provides a fallback when the type is unknown:
<Flex justifyContent="space-evenly" width="100%">
<CreditCardIcon type="American Express" height="40px" width="40px" />
<CreditCardIcon type="Discover" height="40px" width="40px" />
<CreditCardIcon type="MasterCard" height="40px" width="40px" />
<CreditCardIcon type="Unknown" height="40px" width="40px" />
<CreditCardIcon type="Visa" height="40px" width="40px" />
</Flex>