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

  1. Before adding the new .svg file to the project, consider using a tool to compress and optimize the file.

  2. Upload your .svg to SVGtoJSX and copy the output.

  3. Prepare a PR by following the patterns in this example.

Icon List

Unfollow
AddCircleFillIcon
Follow
AddCircleIcon
Add
AddIcon
Submit your artwork
AddItemIcon
AlertCircleFillIcon
AlertCircleFillIcon
Alert
AlertIcon
Apple Icon
AppleIcon
Reveal more
ArrowDownCircleIcon
Reveal more
ArrowDownIcon
Navigate left
ArrowLeftCircleIcon
Navigate left
ArrowLeftIcon
Navigate right
ArrowRightCircleIcon
Navigate right
ArrowRightIcon
Reveal less
ArrowUpCircleIcon
Reveal less
ArrowUpIcon
Artsy
ArtsyLogoBlackIcon
Artsy
ArtsyLogoIcon
Artsy
ArtsyLogoWhiteIcon
Artsy
ArtsyMarkBlackIcon
Artsy
ArtsyMarkIcon
Artsy
ArtsyMarkWhiteIcon
Artwork
ArtworkIcon
Risk-free sales
ArtworkWithBadgeIcon
Match and sell
ArtworkWithCheckIcon
Auction
AuctionIcon
Unwatch lot
BellFillIcon
Watch lot
BellIcon
Blue chip status
BlueChipIcon
Publication
BookIcon
Briefcase
BriefcaseIcon
Calendar
CalendarIcon
Certificate
CertificateIcon
Uncheck
CheckCircleFillIcon
Check
CheckCircleIcon
Check
CheckIcon
Navigate right
ChevronIcon
Uncheck
CircleBlackCheckIcon
Check
CircleWhiteCheckIcon
Close
CloseCircleIcon
Close
CloseIcon
Hide
ClosedEyeIcon
Collapse
CollapseIcon
credit card
CreditCardIcon
Decrease
DecreaseIcon
View orders
DocumentIcon
Download
DownloadIcon
Drag
DragIcon
Earn More
EarnMoreIcon
Edit
EditIcon
Select
EnterIcon
Send email
EnvelopeIcon
Established
EstablishedIcon
Expand
ExpandIcon
Hide
EyeClosedIcon
View
EyeOpenedIcon
Facebook
FacebookIcon
Fair
FairIcon
Filter
FilterIcon
Genome
GenomeIcon
Google Icon
GoogleIcon
View dashboard
GraphIcon
Group
GroupIcon
Guarantee
GuaranteeIcon
Unsave
HeartFillIcon
Save
HeartIcon
More info
HelpIcon
Home
HomeIcon
Image Set
ImageSetIcon
Increase
IncreaseIcon
More info
InfoCircleIcon
Instagram
InstagramIcon
Institution
InstitutionIcon
Speed and efficiency
LightningBoltIcon
Loading
LoaderIcon
Location
LocationIcon
Locked
LockIcon
Account logout
LogoutIcon
Close
LosingBidIcon
Search
MagnifyingGlassIcon
Location
MapPinIcon
Menu
MenuIcon
Send message
MessageIcon
MoneyFillIcon
View more
MoreIcon
Receive multiple offers
MultipleOffersIcon
Institution
MuseumIcon
No artwork image
NoArtworkIcon
No image
NoImageIcon
View
OpenEyeIcon
Page
PageIcon
Payment
PaymentIcon
Pending
PendingCircleIcon
Pinterest
PinterestIcon
Unfollow
PlusIcon
Account logout
PowerIcon
Publication
PublicationIcon
More info
QuestionCircleIcon
Pending
ReceiptIcon
Refresh
ReloadIcon
Settings
SettingsIcon
Share
ShareIcon
User
SoloIcon
Page
TagIcon
Time remaining
TimerIcon
Top emerging
TopEmergingIcon
Established
TopEstablishedIcon
Trash
TrashIcon
Triangle Down
TriangleDownIcon
Tumblr
TumblrIcon
Twitter
TwitterIcon
Group
UserMultiIcon
User
UserSingleIcon
Insights-driven matching
UserWithChartIcon
Verified
VerifiedIcon
Watching
WatchingIcon
WeChat
WeChatIcon
Check
WinningBidIcon
Clear
XCircleIcon

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:

Reveal lessReveal moreNavigate leftNavigate 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:

amexdiscovermastercardcredit cardvisa
<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>
On this page
Adding New Icons
Icon List
ChevronIcon
CreditCardIcon