Icons
SVG icon
setup
Import the Icons and iconValue in a script tag.
Basic usage
Basic usage Icons component
Icon List
addShoppingCartIcon
alertInfoFilledIcon
alertWarningFilledIcon
alignCenterIcon
alignJustifyIcon
alignLeftIcon
alignRightIcon
allPlatformsAppsIcon
amazonColorIcon
amazonColorIconSquare
amazonIcon
amazonIconSquare
amexBgColorIcon
amexBgIcon
amexColorIcon
amexColorIconSquare
amexIcon
amexIconSquare
anchorColorIcon
appleIcon
arrowBackIcon
arrowDownIcon
arrowDownLeftIcon
arrowDownRightIcon
arrowDownwardFilledIcon
arrowDownwardIcon
arrowDropDownIcon
arrowDropUpIcon
arrowLeftIcon
arrowLeftSmIcon
arrowRightFilledIcon
arrowRightIcon
arrowRightSmIcon
arrowUpDownIcon
arrowUpIcon
arrowUpLeftIcon
arrowUpRightIcon
arrowUpwardFilledIcon
arrowUpwardIcon
arrowforwardIcon
audioIcon
backspaceFilledIcon
backspaceIcon
backwardFilledIcon
backwardIcon
barChartIcon
barsFilledIcon
blockIcon
boldIcon
bookmarkIcon
bulletListTapIcon
buttonIcon
calendarFilledIcon
callFilledIcon
callIcon
cameraIcon
chatIcon
checkCircleIcon
checkFilledIcon
checkIcon
chevronsRightIcon
circleIcon
clickerIcon
closeCircleIcon
codeIcon
collapseIcon
columnsHorizontalIcon
columnsVerticalIcon
columnsVerticalRemoveIcon
columnsortingIcon
crossFilledIcon
crossIcon
cursorFilledIcon
dataTableIcon
deleteFilledIcon
dinersColorIconSquare
dinersIconSquare
discoverColorIcon
discoverColorIconSquare
discoverIcon
discoverIconSquare
docIcon
dollarIcon
downIcon
downloadCloudIcon
downloadIcon
dragIcon
dragIndicatorIcon
editFilledIcon
editSlashFilledIcon
enterIcon
environmentIcon
errorFilledIcon
errorImageIcon
errorVideoIcon
expand2Icon
expandIcon
externalLinkIcon
eyeIcon
eyeSlashIcon
facebookColorIcon
facebookIcon
facebookSquareColorIcon
favoriteFilledIcon
favoriteIcon
fileIcon
fileTypeIcon
filmIcon
filterFilledIcon
folderIcon
forwardFilledIcon
forwardIcon
googlePayColorIconSquare
googlePayIconSquare
googlePlayIcon
gridFilledIcon
gridIcon
hamburgerMenuIcon
heading1Icon
heading2Icon
heading3Icon
heading4Icon
helpOutlineIcon
homeFilledIcon
homeIcon
imageIcon
infoFilledIcon
infoIcon
inlineLoadingIcon
insertImageIcon
insertLinkIcon
instagramColorIcon
instagramIcon
italicIcon
jcbColorIconSquare
jcbIconSquare
linkedInColorIcon
linkedInIcon
listGeneral
listIcon
listNumberIcon
listingFilledIcon
listingIcon
loadingOnBlackIcon
loadingOnWhiteIcon
locationIcon
lockFilledIcon
lockIcon
logInIcon
logOutIcon
mailIcon
masterColorIcon
masterColorIconSquare
masterIcon
masterIconSquare
maximize2Icon
minusIcon
moreHorizontal
moreVertical
noFilterFilledIcon
notesIcon
notificationBellFilledIcon
notificationBellIcon
notificationBellUnreadFilledIcon
orderedListTapIcon
paragraphFormatIcon
pauseFilledIcon
pauseIcon
paymentIcon
paypalColorIcon
paypalColorIconSquare
paypalIcon
paypalIconSquare
pdfAdobeIcon
pdfIcon
pinterestColorIcon
pinterestIcon
playFilledIcon
playIcon
plusIcon
pptIcon
printIcon
productIcon
quoteLeftFilledIcon
quoteRightFilledIcon
rectangleIcon
redoIcon
refreshIcon
refreshLoadIcon
rightIcon
rumbleColorIcon
searchIcon
sendMessageFilledIcon
separatorIcon
settingsFilledIcon
settingsIcon
shareFilledIcon
shareIcon
shareIcon2
shoppingCartFilledIcon
shoppingCartIcon
shortcutIcon
starFilledIcon
starIcon
strikeThroughIcon
successFilledIcon
tableSettingFilledIcon
tagIcon
taskListIcon
telegramIcon
textAreaResizeIcon
textColorIcon
ticketIcon
tiktokColorIcon
tiktokIcon
timeIcon
tipFilledIcon
truckIcon
twitterIcon
twitterOldColorIcon
twitterOldIcon
underlineIcon
undoIcon
unlockIcon
upDownFilledIcon
uploadCloudIcon
uploadIcon
userFilledIcon
userIcon
verifiedUserIcon
verticalSeparatorIcon
videoIcon
visaColorIcon
visaColoredIconSquare
visaIcon
visaIconSquare
vkColorIcon
vlistFilledIcon
vlistIcon
volume1Icon
volume2Icon
volumeIcon
volumeXIcon
warningFilledIcon
webIcon
webpageIcon
xlsIcon
youtubeColorIcon
youtubeIcon
Component Data
- props
- slots
| Name | Description | Type | Default |
|---|---|---|---|
| iconValue | Icon to use in the design system. | json | null |
| classList | list of CSS class to apply in <svg> tag | string | empty |
| width | Width of <svg> | string | 16 |
| height | Height of <svg> | string | 16 |
| fills | fill color of <svg> in pultiple path | string[] | empty |
| hasSameFills | If a page uses the same icon multiple times, use it to avoid ada errors | boolean | false |
| id | Id of icon | string | random |
| ariaHidden | Aria-hidden attribute | boolean | true |