# Pictogram

**📖 Live documentation:** https://cds.coinbase.com/components/media/Pictogram/

Displays elevated product icons.

## Import

```tsx
import { Pictogram } from '@coinbase/cds-web/illustrations/Pictogram'
```

## Examples

### Basic example

```jsx live
<Pictogram name="shield" dimension="64x64" />
```

### `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
<Pictogram 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
<Pictogram name="shield" dimension="48x48" scaleMultiplier={2.5} />
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `PictogramName` | 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` | `48x48 \| 64x64` | 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 |