---
title: 'Asset'
type: 'component'
status: 'stable'
slug: /components/asset/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/asset'
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-asset--basic'
typescript: ./src/Asset.tsx
---

Represent an asset visually without showing the actual asset.

Useful in a file selector, a drag-n-drop component or in lists.

## Import

```js static=true
import { Asset } from '@contentful/f36-components';
// or
import { Asset } from '@contentful/f36-asset';
```

## Examples

### Basic usage

```jsx file=examples/AssetExample.tsx

```

### An image asset

By default an asset with the `type` `image` will render the `src` attribute directly, like a HTML `<img />` element.

```jsx file=examples/ImageAssetExample.tsx

```

### An archived image asset

If asset `status` is set to `archived`, an image icon is displayed instead of the actual image.

```jsx file=examples/ArchivedAssetExample.tsx

```

## Props (API reference)

<PropsTable of="Asset" />