# SpotIcon

An icon-sized illustration component for displaying spot graphics.

## Import

```tsx
import { SpotIcon } from '@coinbase/cds-web/illustratations/SpotIcon'
```

## Examples

### Basic example

```jsx live
<SpotIcon name="shield" dimension="32x32" />
```

### `scaleMultiplier` prop

If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.

Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly.

```jsx live
<SpotIcon name="shield" scaleMultiplier={1.5} />
```

### Scaling with dimension

If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.

```jsx live
<SpotIcon name="shield" dimension="24x24" scaleMultiplier={1.5} />
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `done \| warning \| error \| advancedTradeProduct \| assetHubProduct \| assetManagementProduct \| bank \| base \| borrowProduct \| cloudProduct \| coinbase \| commerceProduct \| custodyProduct \| delegateProduct \| derivativesProduct \| email \| exchangeProduct \| helpCenterProduct \| institutionalProduct \| learningRewardsProduct \| nftProduct \| nodeProduct \| participateProduct \| privateClientProduct \| rewardsProduct \| rosettaProduct \| shield \| venturesProduct \| wallet \| walletLogo \| 2fa \| authenticator \| bonusFivePercent \| bonusTwoPercent \| businessProduct \| chat \| coinbaseOneEarn \| coinbaseOneProductInvestWeekly \| creditCard \| delegate \| fast \| idVerification \| outage \| pieChart \| recurringPurchases \| send \| layeredNetworks \| noFees \| assetEmptyStateAa \| assetEmptyStateAb \| assetEmptyStateAc \| assetEmptyStateAd \| assetEmptyStateAe \| assetEmptyStateBa \| assetEmptyStateBb \| assetEmptyStateBc \| assetEmptyStateBd \| assetEmptyStateBe \| assetEmptyStateCa \| assetEmptyStateCb \| assetEmptyStateCc \| assetEmptyStateCd \| assetEmptyStateCe \| assetEmptyStateDa \| assetEmptyStateDb \| assetEmptyStateDc \| assetEmptyStateDd \| assetEmptyStateDe \| assetEmptyStateEa \| assetEmptyStateEb \| assetEmptyStateEc \| assetEmptyStateEd \| assetEmptyStateEe \| cb1Cash \| coinbaseOneChart \| coinbaseOneProduct \| contract \| dataMarketplace \| internationalExchangeProduct \| multiCoin \| paySDKProduct \| primeProduct \| productCoinbaseCard \| productCompliance \| productEarn \| productPro \| productWallet \| signInProduct \| stakingProduct \| walletAsAServiceProduct` | Yes | `-` | Name of illustration as defined in Figma |
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
| `dimension` | `32x32 \| 24x24` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |