---
id: illustrations
title: Illustrations
sidebar_label: Illustrations
---

Note: Please use appropriate sizes & colors in production. This is only meant to display what the illustrations look like.

## BrowseContentCatalog

```tsx live
<BrowseContentCatalog style={{ width: '100%' }} />
```

## Calendar

```tsx live
<Calendar />
```

## ContentCatalogTraining

```tsx live
<ContentCatalogTraining style={{ width: '100%' }} />
```

## DnsOutline

```tsx live
<DnsOutline style={{ background: 'gray' }} />
```

## EmptyUpload

```tsx live
<EmptyUpload style={{ stroke: 'black' }} />
```

## GhostEmpty

```tsx live
<GhostEmpty />
```

## GhostShrug

```tsx live
<GhostShrug />
```

## HappySun

```tsx live
<HappySun />
```

## MysteryMan

```tsx live
<MysteryMan style={{ stroke: 'black' }} />
```

## NoFaceCaptain

```tsx live
<NoFaceCaptain style={{ stroke: 'black' }} />
```

## NoFaceGlasses

```tsx live
<NoFaceGlasses style={{ stroke: 'black' }} />
```

## NoFaceHardHat

```tsx live
<NoFaceHardHat style={{ stroke: 'black' }} />
```

## NoFaceMonocle

```tsx live
<NoFaceMonocle style={{ stroke: 'black' }} />
```

## NoFaceNurse

```tsx live
<NoFaceNurse style={{ stroke: 'black' }} />
```

## NoFaceSupportPerson

```tsx live
<NoFaceSupportPerson style={{ stroke: 'black' }} />
```

## PacMan

```tsx live
<PacMan />
```

## ShieldCheckered

```tsx live
<ShieldCheckered style={{ stroke: 'black' }} />
```

## ShieldKey

```tsx live
<ShieldKey style={{ stroke: 'black' }} />
```

## ShortSword

```tsx live
<ShortSword style={{ stroke: 'black' }} />
```

## Shrug

Comment: Not sure why `Shrug` is not displayed. <!-- QV-2020-10-22 -->

```tsx live
<Shrug style={{ background: 'gray', stroke: 'black' }} />
```

## TargetEmpty

```tsx live
<TargetEmpty />
```

## Telescope

```tsx live
<Telescope />
```
