To add the Icon component to your app:
This is a preview of an Icon component:
Icon props Property Type name
Required "accept" | "add" | "addCircle" | "addCircleFilled" | "api" | "apps" | "arrowDown" | "arrowDownCircle" | "arrowExport" | "arrowExportCircle" | "arrowIncrease" | "arrowLeft" | "arrowLeftCircle" | "arrowRight" | "arrowRightCircle" | "arrowsInward" | "arrowsLoop" | "arrowsOutward" | "arrowUp" | "arrowUpCircle" | "arrowUpDown" | "arrowUpRight" | "arrowUpRightCircle" | "balance" | "bank" | "bankLightning" | "barChart" | "barGraph" | "beta" | "billing" | "billingQuote" | "block" | "business" | "calculator" | "calendar" | "call" | "camera" | "cancel" | "cancelCircle" | "cancelCircleFilled" | "card" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "cart" | "certificate" | "change" | "changeCircle" | "charge" | "chat" | "check" | "checkCircle" | "checkCircleFilled" | "checkmark" | "chevronDown" | "chevronDownCircle" | "chevronLeft" | "chevronLeftCircle" | "chevronRight" | "chevronRightCircle" | "chevronUp" | "chevronUpCircle" | "circle" | "clipboard" | "clipboardCheck" | "clock" | "cloud" | "code" | "collapse" | "compliance" | "connectPayments" | "convert" | "coupon" | "createCards" | "createIdentityVerification" | "cross" | "crypto" | "customer" | "customerPortal" | "customers" | "customizeBrand" | "data" | "dataExport" | "delete" | "deploy" | "desktop" | "dispute" | "disputeProtection" | "doc" | "document" | "download" | "dragHandle" | "earlyFraudWarning" | "edit" | "editCircle" | "email" | "expand" | "explorer" | "export" | "exportCircle" | "external" | "externalTest" | "eyeClosed" | "eyeOpen" | "fee" | "filter" | "financialActivity" | "fingerprint" | "flag" | "folder" | "gavel" | "gift" | "globe" | "gridView" | "growth" | "guide" | "heart" | "heartFilled" | "help" | "hide" | "history" | "home" | "identityVerification" | "import" | "info" | "insight" | "invite" | "invoice" | "iosShare" | "lab" | "lightBulb" | "lightningBolt" | "link" | "list" | "listView" | "locationPin" | "lock" | "menu" | "miniPlayer" | "mobileWallet" | "moneyMovement" | "more" | "moreCircle" | "moved" | "navClock" | "negative" | "negativeCircle" | "negativeCircleFilled" | "new" | "next" | "note" | "notifications" | "office" | "openLock" | "order" | "orgChart" | "overflow" | "pane" | "panelArrowLeft" | "panelArrowRight" | "paperclip" | "passkey" | "pause" | "payByBank" | "payment" | "paymentLink" | "payout" | "person" | "personWithKey" | "phone" | "pieChart" | "pin" | "pinAdd" | "pinFilled" | "ping" | "pinOutline" | "plan" | "platform" | "play" | "playCircle" | "positive" | "previous" | "product" | "productSubscription" | "qrCode" | "recurring" | "recurringInvoice" | "refresh" | "refreshCircle" | "refund" | "refundCircle" | "reporting" | "reserve" | "review" | "risk" | "rocket" | "rule" | "safe" | "sandbox" | "search" | "send" | "settings" | "share" | "shield" | "shieldCheck" | "shoppingBag" | "show" | "signed" | "signOut" | "soundOff" | "soundOn" | "source" | "sparkle" | "spinner" | "star" | "starFilled" | "subscription" | "support" | "tag" | "tasks" | "terminal" | "thumbsDown" | "thumbsUp" | "topup" | "transfer" | "trash" | "trial" | "truck" | "upload" | "usage" | "vault" | "video" | "wallet" | "warning" | "warningCircle" | "webhook" | "website" | "wifi" | "withdrawal"
css
Optional CSS | undefined
Related types: CSS
size
Optional ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined
CSS Property Type fill
Optional text and icon color token
Contrasting color. See Color
If you don’t specify a fill value, the Icon gets its color from its parent.
Size Icons use the size prop for sizing. They can have one of five sizes:
xsmall: 12pxsmall: 16pxmedium: 20px (default)large: 32pxxlarge: 64pxColor and fill You can give the Icon component color with the fill property of the css prop.
Default color behavior By default, icons are the same color as the text around them.
Accessibility By default, there is an aria-hidden attribute on icons (read more about ARIA aria-hidden={false}. In these situations it’s often a good idea to add an aria-label as well. In general, it’s better to have text labels rather than making visual-only icons important for a workflow.
You can place an Icon component inside of a Button or Badge component.
Icon reference