# Composant d’icône pour les applications Stripe Affichez une image d'icône dans un format compatible. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/icon?app-sdk-version=8. Pour ajouter le composant `Icon` à votre application : ```js import {Icon} from '@stripe/ui-extension-sdk/ui'; ``` Voici un aperçu d’un composant `Icon` : ### Propriétés des icônes | Propriété | Type | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"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` | (Facultatif) `CSS | undefined` Types associés : [CSS](https://docs.stripe.com/stripe-apps/components/icon.md#css). | | `size` | (Facultatif) `("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined` | ### CSS | Propriété | Type | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fill` | (Facultatif) [token de couleur de texte et d’icônes](https://docs.stripe.com/stripe-apps/style.md#text-and-icons) Couleur contrastante. Pour en savoir plus, consultez la section [Couleur](https://docs.stripe.com/stripe-apps/style.md#color). Si vous ne spécifiez pas de valeur de remplissage, l’`Icon` hérite de la couleur de son parent. | ## Taille Les dimensions des icônes sont déterminées par la propriété `size`. Elles peuvent avoir l’une de ces 5 tailles : - `xsmall` : `12px` - `small` : `16px` - `medium` : `20px` (par défaut) - `large` : `32px` - `xlarge` : `64px` ## Colorer et remplir Vous pouvez attribuer une couleur au composant `Icon` avec la propriété `fill` de la propriété `css`. ### Comportement de la couleur par défaut Par défaut, les icônes prennent la couleur du texte qui les entoure. ## Accessibilité Par défaut, les icônes contiennent un attribut `aria-hidden` ([en savoir plus sur ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)). Dans les rares cas où l’icône a une valeur sémantique pour les utilisateurs de lecteurs d’écran, vous pouvez définir manuellement `aria-hidden={false}`. Dans ces situations, il est souvent utile d’ajouter également un libellé `aria-label`. En règle générale, il est préférable d’utiliser des libellés textuels plutôt que des icônes visuelles pour les éléments importants d’un workflow. ## Icônes dans des composants Button ou Badge Vous pouvez placer un composant `Icon` dans un composant `Button` ou `Badge`. ## Référence d’icône # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/icon?app-sdk-version=9. Pour ajouter le composant `Icon` à votre application : ```js import {Icon} from '@stripe/ui-extension-sdk/ui'; ``` Voici un aperçu d’un composant `Icon` : ### Propriétés des icônes | Propriété | Type | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Obligatoire) `"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` | (Facultatif) `CSS | undefined` Types associés : [CSS](https://docs.stripe.com/stripe-apps/components/icon.md#css). | | `size` | (Facultatif) `("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined` | ### CSS | Propriété | Type | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fill` | (Facultatif) [token de couleur de texte et d’icônes](https://docs.stripe.com/stripe-apps/style.md#text-and-icons) Couleur contrastante. Pour en savoir plus, consultez la section [Couleur](https://docs.stripe.com/stripe-apps/style.md#color). Si vous ne spécifiez pas de valeur de remplissage, l’`Icon` hérite de la couleur de son parent. | ## Taille Les dimensions des icônes sont déterminées par la propriété `size`. Elles peuvent avoir l’une de ces 5 tailles : - `xsmall` : `12px` - `small` : `16px` - `medium` : `20px` (par défaut) - `large` : `32px` - `xlarge` : `64px` ## Colorer et remplir Vous pouvez attribuer une couleur au composant `Icon` avec la propriété `fill` de la propriété `css`. ### Comportement de la couleur par défaut Par défaut, les icônes prennent la couleur du texte qui les entoure. ## Accessibilité Par défaut, les icônes contiennent un attribut `aria-hidden` ([en savoir plus sur ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)). Dans les rares cas où l’icône a une valeur sémantique pour les utilisateurs de lecteurs d’écran, vous pouvez définir manuellement `aria-hidden={false}`. Dans ces situations, il est souvent utile d’ajouter également un libellé `aria-label`. En règle générale, il est préférable d’utiliser des libellés textuels plutôt que des icônes visuelles pour les éléments importants d’un workflow. ## Icônes dans des composants Button ou Badge Vous pouvez placer un composant `Icon` dans un composant `Button` ou `Badge`. ## Référence d’icône ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)