Cüte Logo

Iconography

Cüte draws with Tabler's outline set: a 24px grid and a 2px round stroke. Where Tabler has nothing that fits, we draw our own on the same grid.

Custom icons

IconParcelDropOff

Ship to pick-up point, in the item page's delivery estimate

packages/ui-web/components/icons/icon-parcel-drop-off.tsx

A custom icon is built with Tabler's own createReactComponent, so it takes the same size, stroke and colour props as every other icon.

Icon sizes

16px
20px
24px
32px

Standard icon sizes are 16px, 20px, 24px, and 32px. Choose the size that best fits your context and maintains visual hierarchy.

In context

Each part of the product, first as its real components ship, then every icon it imports, Tabler's and our own. 189 icons in all, read from the code at build time; an icon used in several places shows up under each. Icons lead a row or a button, sit at 16 or 20px beside text, and go gray when they label rather than act. Admin and prototypes are not counted.

Browse and search26 icons

Inspect
Inspect
Ai search cardpackages/features/search/components/search-dialog/browse/ai-search-card.tsx
  • Sparkles
Applied filterspackages/features/search/components/filters-bar/applied-filters.tsx
  • X
Ask panepackages/features/search/components/search-dialog/ask/ask-pane.tsx
  • Arrow Up Right
Autocomplete panepackages/features/search/components/search-dialog/autocomplete/autocomplete-pane.tsx
  • Category
  • Search
  • Tag
  • User
  • Users Group
Brand panelpackages/features/search/components/panels/brand-panel.tsx
  • Search
Browse origin dialogpackages/features/search/components/home-feed/browse-origin-dialog/browse-origin-dialog.tsx
  • Map Pin
  • Search
  • X
Browse panepackages/features/search/components/search-dialog/browse/browse-pane.tsx
  • Category
  • Tag
Browse railpackages/features/search/components/search-dialog/browse/browse-rail.tsx
  • Category
  • Tag
  • Trending Up
Button favorite heartpackages/features/listings/components/button-favorite-heart.tsx
  • Heart
Category cardpackages/features/categories/components/category-card.tsx
  • Tag
Category carousel cardpackages/features/categories/components/category-carousel-card.tsx
  • Tag
Category carousel up cardpackages/features/categories/components/category-carousel-up-card.tsx
  • Corner Left Up
Category catalogpackages/features/categories/components/category-catalog.tsx
  • Tag
Category panelpackages/features/search/components/panels/category-panel.tsx
  • Arrow Left
Filters barpackages/features/search/components/filters-bar/filters-bar.tsx
  • Adjustments Horizontal
  • Chevron Down
Filters emptypackages/features/search/components/filters-empty.tsx
  • Arrow Up Right
Listing cardpackages/features/listings/components/listing-card/index.tsx
  • Box Multiple Filled
  • Map Pin
  • Trash
  • Users
Listing card handover: ships, or meetup onlypackages/features/listings/listings-fulfillment-config.ts
  • Map Pin
  • Truck
Listing rowpackages/features/listings/components/listing-row/index.tsx
  • Eye
  • Heart
Listing row deletepackages/features/listings/components/listing-row/listing-row-delete.tsx
  • Trash
Listing statuses: one icon per statepackages/features/listings/listings-status-config.ts
  • Lock
  • Tag Off
Location panelpackages/features/search/components/panels/location-panel.tsx
  • Search
Recent chippackages/features/search/components/search-dialog/recent/recent-chip.tsx
  • Circle XFilled
  • History
Report listing buttonpackages/features/listings/components/report-listing/report-listing-button.tsx
  • Flag
Search dialog fieldpackages/features/search/components/search-dialog/search-dialog-field.tsx
  • Arrow Left
  • Arrow Up
  • X
Search inputpackages/features/brands/components/search-input.tsx
  • Search
  • X
Search triggerpackages/features/search/components/search-trigger/index.tsx
  • Search

Item page22 icons

Inspect
Cart countpackages/features/listing-detail/components/listing-detail/listing-details/social-proof/cart-count.tsx
  • Shopping Bag
Category back linkpackages/features/listing-detail/components/listing-detail/listing-breadcrumb/category-back-link.tsx
  • Arrow Left
Listing detail attributespackages/features/listing-detail/components/listing-detail/listing-details/listing-detail-attributes.tsx
  • Map Pin
Listing detail condition dialogpackages/features/listing-detail/components/listing-detail/listing-details/listing-detail-condition-dialog.tsx
  • Info Circle
Listing detail description bodypackages/features/listing-detail/components/listing-detail/listing-details/listing-detail-description-body.tsx
  • Language
Listing detail groupspackages/features/listing-detail/components/listing-detail/listing-details/listing-detail-groups.tsx
  • Users
Listing detail groups pickerpackages/features/listing-detail/components/listing-detail/listing-details/listing-detail-groups-picker.tsx
  • Users
Listing detail mobile actionspackages/features/listing-detail/components/listing-detail/listing-detail-mobile-actions.tsx
  • Bookmark Off
  • Edit
  • Eye
  • Eye Off
  • Tag
Listing detail place mappackages/features/listing-detail/components/listing-detail/listing-details/listing-detail-place-map.tsx
  • Chevron Right
  • Map Pin
Listing detail pricepackages/features/listing-detail/components/listing-detail/listing-details/listing-detail-price.tsx
  • Shopping Bag
Listing detail price dialogpackages/features/listing-detail/components/listing-detail/listing-details/listing-detail-price-dialog.tsx
  • Info Circle
  • Lock
  • Message Circle2
  • Receipt Refund
  • Shield Check
  • Truck Delivery
Listing detailspackages/features/listing-detail/components/listing-detail/listing-details/index.tsx
  • Info Circle
  • Map Pin
Listing performance statspackages/features/listing-detail/components/listing-detail/listing-details/listing-performance-stats.tsx
  • Eye
  • Heart
  • Shopping Bag
  • Tag
Listing shipping estimatepackages/features/listing-detail/components/listing-detail/listing-shipping-estimate/index.tsx
  • Bike
  • Truck Delivery
Listing shipping estimate postal code changerpackages/features/listing-detail/components/listing-detail/listing-shipping-estimate/listing-shipping-estimate-postal-code-changer.tsx
  • Chevron Down
Listing shipping estimate rowspackages/features/listing-detail/components/listing-detail/listing-shipping-estimate/listing-shipping-estimate-rows.tsx
  • Map Pin
  • Parcel Drop OffCustom
  • Truck Delivery
  • Users
Listing status cardpackages/features/listing-detail/components/listing-status-card.tsx
  • Arrow Right
Offer countpackages/features/listing-detail/components/listing-detail/listing-details/social-proof/offer-count.tsx
  • Tag

Buying and checkout31 icons

Inspect
Inspect
Address add buttonpackages/features/addresses/components/address-add-button.tsx
  • Circle Plus
Address cardspackages/features/addresses/components/address-cards.tsx
  • Map Pin
  • Pencil
  • Plus
  • Star
  • Trash
Address dialog listpackages/features/addresses/components/address-dialog/address-dialog-list.tsx
  • Map Pin
  • Pencil
  • Star
  • Trash
Address selectorpackages/features/addresses/components/address-selector.tsx
  • Pencil
Bundle review dialogpackages/features/bundles/components/bundle-dock/bundle-review-dialog.tsx
  • Shield Check
Bundle toggle buttonpackages/features/bundles/components/bundle-builder/bundle-toggle-button.tsx
  • Check
  • Plus
Card brand iconpackages/features/payments/components/card-brand-icon.tsx
  • Credit Card
Card dialogpackages/features/payments/components/card-dialog.tsx
  • Lock
Card formpackages/features/payments/components/card-form.tsx
  • Credit Card
  • Lock
Cart bundle rowspackages/features/cart/components/cart-bundle-card/cart-bundle-rows.tsx
  • Shopping Bag
  • Trash
Cart bundle unavailable noticepackages/features/cart/components/cart-bundle-card/cart-bundle-unavailable-notice.tsx
  • Alert Triangle Filled
Cart sheetpackages/features/cart/components/cart-sheet/index.tsx
  • Circle Check Filled
Cart sheet emptypackages/features/cart/components/cart-sheet/cart-sheet-empty.tsx
  • Shopping Bag
Checkout delivery option listpackages/features/checkout/components/delivery/checkout-delivery-option-list.tsx
  • Users
Checkout error dialogpackages/features/checkout/components/rejection/checkout-error-dialog.tsx
  • Alert Circle
  • External Link
Checkout payment method cardpackages/features/checkout/components/payment/checkout-payment-method-card.tsx
  • Credit Card
  • Qrcode
Checkout payment methodspackages/features/checkout/components/payment/checkout-payment-methods.tsx
  • Brand Apple
  • Brand Google
  • Brand Paypal
  • Building Bank
  • Credit Card
  • Plus
  • Props
  • Qrcode
  • Wallet
Checkout payment pickerpackages/features/checkout/components/payment/checkout-payment-picker.tsx
  • Arrow Left
Checkout qr payment dialogpackages/features/checkout/components/payment/checkout-qr-payment-dialog.tsx
  • Check
  • Circle Check
  • Clock
  • Copy
Dev test cardspackages/features/payments/components/dev-test-cards.tsx
  • Check
  • Copy
  • X
Favorite brands listpackages/features/favorites/components/favorite-brands-list.tsx
  • Building Store
Favorites gridpackages/features/favorites/components/favorites-grid.tsx
  • Heart
Following listpackages/features/favorites/components/following-list.tsx
  • Users
Make offer dialogpackages/features/offers/components/make-offer-dialog.tsx
  • Shopping Bag
Page cart bundle cardpackages/features/cart/components/cart-bundle-card/page-cart-bundle-card.tsx
  • Plus
Profile bundle bannerpackages/features/bundles/components/profile-bundle-banner.tsx
  • Arrow Right

Delivery15 icons

Inspect
Carrier linepackages/features/fulfillment/components/service-point-picker/carrier-line.tsx
  • Truck Delivery
Opening hourspackages/features/fulfillment/components/service-point-picker/opening-hours.tsx
  • Chevron Down
Point markpackages/features/fulfillment/components/service-point-picker/point-mark.tsx
  • Building Store
  • Lock
Rate listpackages/features/fulfillment/components/rate-list.tsx
  • Clock
  • Truck Delivery
Service point listpackages/features/fulfillment/components/service-point-picker/service-point-list.tsx
  • Clock
  • Map Pin
Service point mappackages/features/fulfillment/components/service-point-picker/service-point-map.tsx
  • Current Location
  • Home Filled
  • Minus
  • Plus
  • Search
  • X
Service point pickerpackages/features/fulfillment/components/service-point-picker/index.tsx
  • Clock
  • Map Pin
  • Pencil
  • Tag
Shipping option listpackages/features/fulfillment/components/shipping-option-list.tsx
  • Home
  • Map Pin

Orders32 icons

Inspect
Inspect
Inspect
Dispute photo pickerpackages/features/orders/components/dispute-photo-picker.tsx
  • Camera Plus
  • Plus
  • X
Handoff code cardpackages/features/orders/components/order-detail/order-tracking-timeline/handoff-code-card.tsx
  • Check
  • Lock
Meetup proposal bubblepackages/features/orders/components/meetup-proposal-bubble.tsx
  • Calendar Event
  • Circle Check
  • Circle X
  • Map Pin
Order action barpackages/features/orders/components/order-detail/order-tracking-timeline/order-action-bar.tsx
  • Alert Circle
Order address cardpackages/features/orders/components/order-detail/order-address-card.tsx
  • Building Store
  • Map Pin
Order bundle cardpackages/features/orders/components/order-bundle-card/index.tsx
  • Pencil
Order card itemspackages/features/orders/components/order-card/order-card-items.tsx
  • Shopping Bag
Order card message buttonpackages/features/orders/components/order-card/order-card-message-button.tsx
  • Message
Order detail back linkpackages/features/orders/components/order-detail/order-detail-back-link.tsx
  • Arrow Left
Order details bundlepackages/features/orders/components/order-detail/order-details/order-details-bundle.tsx
  • Chevron Down
  • Photo
Order label actionspackages/features/orders/components/order-detail/order-tracking-timeline/order-label-actions.tsx
  • Printer
Order label carrier headerpackages/features/orders/components/order-detail/order-tracking-timeline/order-label-carrier-header.tsx
  • Clock
Order meetup cardpackages/features/orders/components/order-meetup-card.tsx
  • Calendar Event
  • Map Pin
Order party cardpackages/features/orders/components/order-detail/order-party-card.tsx
  • Arrow Right
Order shipping cardpackages/features/orders/components/order-detail/order-shipping-card.tsx
  • External Link
Order statuses: one icon per statepackages/features/orders/orders-status-config.tsx
  • Alert Triangle
  • Circle Check
  • Clock Hour3
  • Map Pin
  • Motorbike
  • Package
  • Receipt Refund
  • Scan
  • Truck Delivery
  • User Check
  • X
Order successpackages/features/orders/components/order-success/index.tsx
  • Circle Check
  • Circle X
  • Clock Hour3
Order tracking timelinepackages/features/orders/components/order-detail/order-tracking-timeline/index.tsx
  • Check
Orders listpackages/features/orders/components/orders-list.tsx
  • Shopping Bag
Return stepspackages/features/orders/components/return-steps.tsx
  • Check
Review formpackages/features/reviews/components/review-form.tsx
  • Star Filled
Sync my shipments buttonpackages/features/orders/components/sync-my-shipments-button.tsx
  • Refresh
Tracking dialogpackages/features/orders/components/order-card/tracking-dialog.tsx
  • Check
  • Chevron Right

Selling36 icons

Inspect
Inspect
1 ship frompackages/features/listing-form/components/6-delivery/delivery-options/1-ship-from/index.tsx
  • Map Pin
2 packagepackages/features/listing-form/components/6-delivery/delivery-options/2-package/index.tsx
  • Box
  • Forklift
  • Package
  • Packages
  • Truck Delivery
3 meetuppackages/features/listing-form/components/6-delivery/delivery-options/3-meetup/index.tsx
  • Clock
7 visibilitypackages/features/listing-form/components/7-visibility/index.tsx
  • Info Circle
  • Users
Boost dialogpackages/features/boost/components/boost-dialog.tsx
  • Bolt
  • Rocket
  • Star
Brand comboboxpackages/features/listing-form/components/4-details/brand-combobox/index.tsx
  • Tag
  • Tag Off
Brand listpackages/features/listing-form/components/4-details/brand-combobox/components/brand-list.tsx
  • Tag
Category comboboxpackages/features/listing-form/components/3-category/category-combobox/index.tsx
  • Category2
Category combobox navpackages/features/listing-form/components/3-category/category-combobox/components/category-combobox-nav.tsx
  • Chevron Left
Color multi selectpackages/features/listing-form/components/4-details/color-multi-select/index.tsx
  • Palette
Condition comboboxpackages/features/listing-form/components/4-details/condition-combobox/index.tsx
  • Heart Check
Delete listingpackages/features/listing-form/components/delete-listing/index.tsx
  • Trash
Dynamic attribute fieldpackages/features/listing-form/components/4-details/dynamic-attribute-field.tsx
  • Hanger
  • List
  • Ruler
Form menupackages/features/listing-form/components/form-menu/index.tsx
  • Bulb
  • Folder
  • Restore
Image editor dialogpackages/features/listing-form/components/1-add-photos/image-crop/image-editor-dialog.tsx
  • Refresh
  • Rotate Clockwise
Listingsapps/web/app/[locale]/(site)/(with-footer)/(authenticated)/(my-profile)/my/listings/layout.tsx
  • Plus
Material multi selectpackages/features/listing-form/components/4-details/material-multi-select/index.tsx
  • Layers Subtract
Postage options dialogpackages/features/listing-form/components/6-delivery/delivery-options/2-package/postage-options-dialog.tsx
  • Home
  • Info Circle
  • Map Pin
  • Printer
  • Shield Check
Seller desk overviewpackages/features/seller-desk/components/seller-desk-overview.tsx
  • Building Store
  • Eye
  • Message Circle
  • Star
  • Tag
  • Truck Delivery
  • User Plus

Messages23 icons

Inspect
Inspect
Chat containerpackages/features/chat/components/chat-conversation/chat-container.tsx
  • Message Off
Chat conversation menupackages/features/chat/components/chat-conversation-menu.tsx
  • Archive
  • Flag
Chat headerpackages/features/chat/components/chat-conversation/chat-header.tsx
  • Archive
  • Flag
Chat inputpackages/features/chat/components/chat-input/chat-input.tsx
  • Arrow Up
  • Paperclip
Chat list barpackages/features/chat/components/chat-list-bar.tsx
  • Archive
Chat message bubble defaultpackages/features/chat/components/chat-message-bubbles/chat-message-bubble-default.tsx
  • Alert Circle
  • Check
  • Checks
Chat message bubble notificationpackages/features/chat/components/chat-message-bubbles/chat-message-bubble-notification.tsx
  • External Link
Chat message bubble orderpackages/features/chat/components/chat-message-bubbles/chat-message-bubble-order.tsx
  • Alert Triangle
  • Circle Check
  • Circle X
  • Package
  • Scale
  • Star Filled
  • Truck Delivery
  • Wallet
Chat message bubble systempackages/features/chat/components/chat-message-bubbles/chat-message-bubble-system.tsx
  • External Link
Chat message previewpackages/features/chat/components/chat-sidebar/chat-message-preview.tsx
  • Camera Filled
  • Video Filled
Chat redirectpackages/features/chat/components/chat-redirect.tsx
  • Archive
  • Message
Chat scroll buttonpackages/features/chat/components/chat-conversation/chat-scroll-button.tsx
  • Arrow Down
  • Arrow Up
Chat sidebarpackages/features/chat/components/chat-sidebar/chat-sidebar.tsx
  • Archive
  • Arrow Left
Inbox amountspackages/features/chat/components/inbox-amounts.tsx
  • Message Circle Filled
  • Package
System messages listpackages/features/chat/components/system-messages-list.tsx
  • External Link

Profiles and groups48 icons

Inspect
Inspect
Admin requests tablepackages/features/groups/components/group-admin-dialog/admin-requests-table.tsx
  • Check
  • X
Avatar photo dialogpackages/features/users/components/avatar-photo-dialog.tsx
  • Cloud Upload
Deactivate account dialogpackages/features/users/components/deactivate-account-dialog.tsx
  • Alert Triangle
Delete account dialogpackages/features/users/components/delete-account-dialog.tsx
  • Alert Triangle
Discover groups indexpackages/features/groups/components/discover/discover-groups-index.tsx
  • Lock
  • Search
  • Search Off
Forgot password formpackages/features/users/components/forgot-password-form.tsx
  • Mail
Grouppackages/features/groups/components/group/index.tsx
  • Lock
Group admin dialogpackages/features/groups/components/group-admin-dialog/index.tsx
  • Settings
Group cardpackages/features/groups/components/group-card.tsx
  • Map Pin
  • Package
  • Users
Group marks: the symbols a group without a photo picks frompackages/features/groups/groups-marks-config.ts
  • Armchair
  • Baby Carriage
  • Ball Football
  • Bike
  • Book
  • Building
  • Hanger
  • Heart
  • Home
  • Music
  • Paw
  • Plant
  • Tools Kitchen2
  • Users
Group memberspackages/features/groups/components/group/group-members.tsx
  • Lock
Group photo dialogpackages/features/groups/components/group-admin-dialog/group-photo-dialog.tsx
  • Cloud Upload
Group profilepackages/features/groups/components/group-profile/group-header/group-profile.tsx
  • Map Pin
  • Package
Groupsapps/web/app/[locale]/(site)/(with-footer)/(authenticated)/(my-profile)/my/groups/layout.tsx
  • Compass
Groups heropackages/features/groups/components/groups-hero.tsx
  • Plus
Invite friends dialogpackages/features/invites/components/invite-friends-dialog.tsx
  • Plus
  • Send
  • Trash
Invite rowpackages/features/invites/components/invite-row.tsx
  • Circle X
  • Dots
  • Send
Invites listpackages/features/invites/components/invites-list.tsx
  • Send
Login formpackages/features/users/components/login-form.tsx
  • Device Mobile
  • Mail
My groups emptypackages/features/groups/components/my-groups/my-groups-empty.tsx
  • Plus
My groups feedpackages/features/groups/components/my-groups/my-groups-feed.tsx
  • Search Off
  • Users
My groups railpackages/features/groups/components/my-groups/my-groups-rail.tsx
  • Compass
Pending invitationspackages/features/groups/components/membership/pending-invitations.tsx
  • Check
  • X
Phone verificationpackages/features/users/components/phone-verification.tsx
  • Clock
  • Refresh
Profile heropackages/features/profile/components/profile-header/profile-hero.tsx
  • Beach
Profile menupackages/features/profile/components/profile-header/profile-menu.tsx
  • Dots
Reset password formpackages/features/users/components/reset-password-form.tsx
  • Lock
Seller last seenpackages/features/profile/components/profile-header/seller-last-seen.tsx
  • Clock
Seller signalspackages/features/profile/components/profile-header/seller-signals.tsx
  • Library Plus
  • Message Circle
  • Shield Check
  • Truck Delivery
Share profile dialogpackages/features/profile/components/share-profile-dialog.tsx
  • Brand Facebook
  • Brand Whatsapp
  • Brand X
  • Link
  • Mail
  • Qrcode
Signup formpackages/features/users/components/signup-form.tsx
  • Mail
Usernamepackages/features/users/components/username.tsx
  • Flame Filled
  • Rosette Discount Check Filled
Username fieldpackages/features/users/components/edit-profile/fields/username-field.tsx
  • Circle Check
  • Circle X
Verified infopackages/features/users/components/verified-info.tsx
  • Circle Check Filled
Verify otp formpackages/features/users/components/verify-otp-form.tsx
  • Clock
  • Refresh

Account, wallet and settings55 icons

Inspect
Inspect
Account balancepackages/features/settings/components/account-hub/account-balance.tsx
  • Arrow Right
  • Wallet
Account menupackages/features/settings/components/account-hub/account-menu.tsx
  • Bookmark
  • Help Circle
  • Layout Dashboard
  • Lifebuoy
  • Logout
  • Message Circle
  • Star
  • User Plus
Account profilepackages/features/settings/components/account-hub/account-profile.tsx
  • Arrow Right
Add card buttonpackages/features/settings/components/payments/add-card-button.tsx
  • Circle Plus
Balance heropackages/features/wallet/components/my-wallet/balance-hero.tsx
  • Arrow Up Right
  • Clock
  • Info Circle
Download data cardpackages/features/settings/components/privacy/download-data-card.tsx
  • Download
Email fieldpackages/features/settings/components/account-and-login/email-field.tsx
  • Lock
Email verification cardpackages/features/settings/components/verifications/email-verification-card.tsx
  • Circle Check
Location fieldspackages/features/onboarding/components/location-fields.tsx
  • Check
  • Map Pin
Otp loginapps/web/app/[locale]/(auth)/otp-login/page.tsx
  • Arrow Left
Password fieldpackages/features/settings/components/account-and-login/password-field.tsx
  • Lock
Payout destination button clientpackages/features/wallet/components/payout-destination-button-client.tsx
  • Pencil
  • Plus
Payout destination sectionpackages/features/wallet/components/settings/payout-destination-section.tsx
  • Building
Phone verification cardpackages/features/settings/components/verifications/phone-verification-card.tsx
  • Circle Check
Preferences formpackages/features/settings/components/preferences/preferences-form.tsx
  • Eye
  • Eye Off
  • Info Circle
Sales chartpackages/features/wallet/components/sales-chart.tsx
  • Arrow Down Right
  • Arrow Up Right
Saved cards listpackages/features/settings/components/payments/saved-cards-list.tsx
  • Check
  • Plus
  • Trash
Security item cardpackages/features/settings/components/security/security-item-card.tsx
  • Props
Security settings listpackages/features/settings/components/security/security-settings-list.tsx
  • Device Mobile
  • Key
  • Mail
  • Props
  • Shield
Settings nav itemspackages/features/settings/components/settings-navigation/settings-nav-items.ts
  • Beach
  • Bell
  • Credit Card
  • Lock
  • Map Pin
  • Ruler
  • Shield Lock
  • Tags
  • User Circle
  • World
Social connections cardpackages/features/settings/components/verifications/social-connections-card.tsx
  • Brand Facebook
  • Brand Google
  • Circle Check
Transactions listpackages/features/wallet/components/transactions-list.tsx
  • Adjustments
  • Arrow Back Up
  • Building Bank
  • Package Off
  • Shopping Bag
  • Tag
Use you rowspackages/features/settings/components/account-hub/use-you-rows.ts
  • Building Store
  • Settings
  • Shopping Bag
  • Users Group
Vacation mode formpackages/features/settings/components/vacation-mode/vacation-mode-form.tsx
  • Beach
Verify emailapps/web/app/[locale]/(auth)/verify-email/page.tsx
  • Mail
Verify otpapps/web/app/[locale]/(auth)/verify-otp/page.tsx
  • Arrow Left
Visibility matrixpackages/features/settings/components/privacy/visibility-matrix.tsx
  • Lock
  • Users
  • World
Wallet navigationpackages/features/wallet/components/wallet-navigation.tsx
  • Chart Bar
  • File Invoice
  • History
  • Settings
  • Wallet
Withdraw dialogpackages/features/wallet/components/withdraw-dialog.tsx
  • Arrow Up Right
  • Building

Help24 icons

Inspect
Account standing alertpackages/features/support/components/account-standing-alert.tsx
  • Alert Triangle Filled
Ask catalogue answerpackages/features/ask/components/ask-thread/ask-catalogue-answer.tsx
  • Arrow Right
Ask help answerpackages/features/ask/components/ask-thread/ask-help-answer.tsx
  • Book
Ask threadpackages/features/ask/components/ask-thread/ask-thread.tsx
  • Sparkles
Help article feedbackpackages/features/help/components/help-article-feedback.tsx
  • Mood Empty
  • Mood Happy
  • Mood Sad
  • Mood Sad Squint
  • Mood Smile
Help back linkpackages/features/help/components/help-back-link.tsx
  • Chevron Left
Help chatpackages/features/ask/components/help-chat/help-chat.tsx
  • Sparkles
Help chat sheetpackages/features/ask/components/help-chat/help-chat-sheet.tsx
  • Sparkles
Help contact bandpackages/features/help/components/help-contact-band.tsx
  • Brand Whatsapp
  • Mail
Help contact footerpackages/features/help/components/help-contact-footer.tsx
  • Brand Whatsapp
Help entry groupspackages/features/help/components/help-entry-groups.tsx
  • Shield Check
  • Truck Delivery
  • Wallet
Help searchpackages/features/help/components/help-search/help-search.tsx
  • Search
Help search rowpackages/features/help/components/help-search/help-search-row.tsx
  • File Text
Help topic indexpackages/features/help/components/help-topic-index.tsx
  • Book
  • Credit Card
  • Leaf
  • Package
  • Rocket
  • Settings
  • Shield Check
  • Shopping Bag
  • Tag

Navigation and errors10 icons

Inspect
Button favoritespackages/features/navigation/components/button-favorites.tsx
  • Heart
Button searchpackages/features/navigation/components/header-right/button-search.tsx
  • Search
Button settingspackages/features/navigation/components/button-settings.tsx
  • Settings
Errorapps/web/app/[locale]/error.tsx
  • Home
  • Refresh
Mobile tab barpackages/features/navigation/components/mobile-tab-bar/index.tsx
  • Brand Line
  • Heart
  • Home
  • Plus
  • User Circle
Profile sheetpackages/features/navigation/components/header-right/button-profile/profile-sheet.tsx
  • Arrow Left
  • Wallet

Marketing pages27 icons

Circular economyapps/web/app/[locale]/(site)/(with-footer)/(marketing)/circular-economy/page.tsx
  • Heart
  • Shield
Contactapps/web/app/[locale]/(site)/(with-footer)/(marketing)/contact/page.tsx
  • Headphones
  • Speakerphone
  • Users
Contact 1packages/ui-web/blocks/contact-1/index.tsx
  • Headphones
  • Speakerphone
  • Users
Contact 2packages/ui-web/blocks/contact-2/index.tsx
  • Circle XFilled
Cta 2packages/ui-web/blocks/cta-2/index.tsx
  • Arrow Right
Expanding video cardpackages/ui-web/blocks/feature-14/expanding-video-card.tsx
  • X
Feature 11packages/ui-web/blocks/feature-11/index.tsx
  • Arrow Right
Feature 14packages/ui-web/blocks/feature-14/index.tsx
  • Arrow Left
  • Arrow Right
Feature 2packages/ui-web/blocks/feature-2/index.tsx
  • Recycle
  • Shield Check
Feature 7packages/ui-web/blocks/feature-7/index.tsx
  • Arrow Right
Help 1packages/ui-web/blocks/help-1/index.tsx
  • Brand Whatsapp
  • Check
  • Mail
Help 2packages/ui-web/blocks/help-2/index.tsx
  • Lock
  • Shield Check
  • Wifi
Help 3packages/ui-web/blocks/help-3/index.tsx
  • Book
  • Credit Card
  • Leaf
  • Package
  • Rocket
  • Settings
  • Shield Check
  • Shopping Bag
  • Tag
Hero 7packages/ui-web/blocks/hero-7/index.tsx
  • Adjustments
  • Arrow Right
  • Currency Dollar
How it worksapps/web/app/[locale]/(site)/(with-footer)/(marketing)/how-it-works/page.tsx
  • Heart
  • Shield
Pricingapps/web/app/[locale]/(site)/(with-footer)/(pricing)/pricing/page.tsx
  • Headset
  • Shield Check

Interface components60 icons

Inspect
Inspect
Inspect
Inspect
Accordionpackages/ui-web/components/ui/accordion.tsx
  • Chevron Down
  • Chevron Up
Alertpackages/ui-web/components/ui/alert.tsx
  • Clock
Animated theme togglerpackages/ui-web/components/animated-theme-toggler.tsx
  • Moon
  • Sun
Attachmentspackages/ui-web/components/ai-elements/attachments.tsx
  • File Text
  • Globe
  • Music
  • Paperclip
  • Photo
  • Video
  • X
Breadcrumbpackages/ui-web/components/ui/breadcrumb.tsx
  • Chevron Right
  • Dots
Button backpackages/ui-web/components/ui/button-back.tsx
  • Arrow Left
Button closepackages/ui-web/components/ui/button-close.tsx
  • X
Button copypackages/ui-web/components/ui/button-copy.tsx
  • Check
  • Circle X
  • Copy
Button morepackages/ui-web/components/ui/button-more.tsx
  • Dots
  • Dots Vertical
Button videopackages/ui-web/components/ui/button-video.tsx
  • Player Play
Calendarpackages/ui-web/components/ui/calendar.tsx
  • Chevron Down
  • Chevron Left
  • Chevron Right
Carouselpackages/ui-web/components/ui/carousel.tsx
  • Arrow Left
  • Arrow Right
Checkboxpackages/ui-web/components/ui/checkbox.tsx
  • Check
  • Minus
Code valuepackages/ui-web/components/ui/code-value.tsx
  • Check
  • Circle X
  • Copy
Comboboxpackages/ui-web/components/ui/combobox.tsx
  • Check
  • Chevron Down
  • X
Combobox responsivepackages/ui-web/components/ui/combobox-responsive.tsx
  • Chevron Down
  • Loader
  • Search
Context menupackages/ui-web/components/ui/context-menu.tsx
  • Check
  • Chevron Right
  • Circle
Cute avatarpackages/ui-web/components/brand/cute-avatar.tsx
  • Users
Data grid cardpackages/ui-web/components/data-grid/data-grid-card.tsx
  • Search
Date pickerpackages/ui-web/components/ui/date-picker.tsx
  • Calendar
Dev boundarypackages/ui-web/components/dev/dev-boundary.tsx
  • Dots
  • External Link
Dock arrowspackages/ui-web/components/dock/dock-arrows.tsx
  • Arrow Left
  • Arrow Right
Dock breadcrumbpackages/ui-web/components/dock/dock-breadcrumb.tsx
  • Layout Grid
Dock controlspackages/ui-web/components/dock/dock-controls.tsx
  • Arrows Minimize
  • Chevron Left
  • Chevron Right
  • Rotate
Dock drawerpackages/ui-web/components/dock/dock-drawer.tsx
  • Chevron Up
Dock restorepackages/ui-web/components/dock/dock-restore.tsx
  • Layout Bottombar Expand
Dropdown menupackages/ui-web/components/ui/dropdown-menu.tsx
  • Check
  • Chevron Right
  • Circle
Error boundarypackages/ui-web/components/error-boundary.tsx
  • Refresh
Fieldpackages/ui-web/components/ui/field.tsx
  • Alert Circle Filled
  • Circle Check
Field clearpackages/ui-web/components/ui/field-clear.tsx
  • X
Iconspackages/ui-web/components/icons.tsx
  • Truck
  • User
Image fallbackpackages/ui-web/components/ui/image-fallback.tsx
  • Photo
Image upload multiple defaultpackages/ui-web/components/file-upload/image-upload-multiple-default.tsx
  • Alert Triangle
  • Photo
  • Upload
  • X
Image upload multiple sortablepackages/ui-web/components/file-upload/image-upload-multiple-sortable.tsx
  • Alert Triangle
  • Edit
  • Photo Spark
  • Plus
  • X
Image upload single avatarpackages/ui-web/components/file-upload/image-upload-single-avatar.tsx
  • Upload
  • User
  • X
Image upload single defaultpackages/ui-web/components/file-upload/image-upload-single-default.tsx
  • Photo
  • Upload
  • X
Inline promptpackages/ui-web/components/ui/inline-prompt.tsx
  • Alert Triangle
  • Circle Check
  • Circle X
  • Info Circle
  • Sparkles
Input otppackages/ui-web/components/ui/input-otp.tsx
  • Minus
Itempackages/ui-web/components/ui/item.tsx
  • Chevron Right
List searchpackages/ui-web/components/admin/list-search.tsx
  • Search
Logopackages/ui-web/components/brand/logo.tsx
  • Copy
  • Download
  • External Link
Mermaid previewpackages/ui-web/components/mermaidcn/mermaid-preview.tsx
  • Copy
  • Download
  • Focus Centered
  • Zoom In
  • Zoom Out
Multi select comboboxpackages/ui-web/components/ui/multi-select-combobox.tsx
  • X
Navigation menupackages/ui-web/components/ui/navigation-menu.tsx
  • Chevron Down
Paginationpackages/ui-web/components/ui/pagination.tsx
  • Chevron Left
  • Chevron Right
  • Dots
Password inputpackages/ui-web/components/ui/password-input.tsx
  • Check
  • Eye
  • Eye Off
  • X
Radio indicatorpackages/ui-web/components/ui/radio-indicator.tsx
  • Check
Resizablepackages/ui-web/components/ui/resizable.tsx
  • Grip Vertical
Selectpackages/ui-web/components/ui/select.tsx
  • Check
  • Chevron Down
  • Chevron Up
Server error alertpackages/ui-web/components/ui/server-error-alert.tsx
  • Circle XFilled
Sidebarpackages/ui-web/components/ui/sidebar.tsx
  • Layout Sidebar
Sonnerpackages/ui-web/components/ui/sonner.tsx
  • Alert Triangle Filled
  • Circle Check Filled
  • Circle XFilled
  • Info Circle Filled
Spinnerpackages/ui-web/components/ui/spinner.tsx
  • Loader
State machine diagrampackages/ui-web/components/mermaidcn/state-machine-diagram.tsx
  • Arrows Diagonal
  • X
Stats cardpackages/ui-web/components/stats-card.tsx
  • Arrow Down
  • Arrow Up
Support markpackages/ui-web/components/admin/support-mark.tsx
  • Check
  • Minus
Treepackages/ui-web/components/ui/tree.tsx
  • Chevron Down
  • Minus
  • Plus

Usage guidelines

Do

  • Use icons to enhance meaning, not replace text
  • Maintain consistent stroke width
  • Pair icons with labels when clarity is important
  • Use appropriate sizes for context

Don't

  • Mix different icon styles in the same interface
  • Use icons that are too small to recognize
  • Stretch or distort icon proportions
  • Use decorative icons that don't add meaning