# Icons & Images
## API Reference
### Icon
List of built-in icons that can be used for actions or list items.
#### Example
```typescript
import { Icon, List } from "@raycast/api";
export default function Command() {
return (
);
}
```
#### Enumeration members
|
|
### Image.Mask
Available masks that can be used to change the shape of an image.
Can be handy to shape avatars or other items in a list.
#### Example
```typescript
import { Image, List } from "@raycast/api";
export default function Command() {
return (
);
}
```
#### Enumeration members
| Name | Value |
| :--------------- | :----------------- |
| Circle | "circle" |
| RoundedRectangle | "roundedRectangle" |
## Types
### Image
Display different types of images, including network images or bundled assets.
Apply image transforms to the source, such as a `mask` or a `tintColor`.
{% hint style="info" %}
Tip: Suffix your local assets with `@dark` to automatically provide a dark theme option, eg: `icon.png` and `icon@dark.png`.
{% endhint %}
#### Example
```typescript
// Built-in icon
const icon = Icon.Eye;
// Built-in icon with tint color
const tintedIcon = { source: Icon.Bubble, tintColor: Color.Red };
// Bundled asset with circular mask
const avatar = { source: "avatar.png", mask: Image.Mask.Circle };
// Implicit theme-aware icon
// with 'icon.png' and 'icon@dark.png' in the `assets` folder
const icon = "icon.png";
// Explicit theme-aware icon
const icon = { source: { light: "https://example.com/icon-light.png", dark: "https://example.com/icon-dark.png" } };
```
#### Properties
| Property | Description | Type |
| :--- | :--- | :--- |
| source* | The Image.Source of the image. | Image.Source |
| fallback | Image.Fallback image, in case `source` can't be loaded. | Image.Fallback |
| mask | A Image.Mask to apply to the image. | Image.Mask |
| tintColor | A Color.ColorLike to tint all the non-transparent pixels of the image. | Color.ColorLike |
### FileIcon
An icon as it's used in the Finder.
#### Example
```typescript
import { List } from "@raycast/api";
export default function Command() {
return (
);
}
```
#### Properties
| Property | Description | Type |
| :--- | :--- | :--- |
| fileIcon* | The path to a file or folder to get its icon from. | string |
### Image.ImageLike
```typescript
ImageLike: URL | Asset | Icon | FileIcon | Image;
```
Union type for the supported image types.
#### Example
```typescript
import { Icon, Image, List } from "@raycast/api";
export default function Command() {
return (
);
}
```
### Image.Source
```typescript
Image.Source: URL | Asset | Icon | { light: URL | Asset; dark: URL | Asset }
```
The source of an Image or
a single emoji.
For consistency, it's best to use the built-in Icon in lists, the Action Panel, and other places. If a
specific icon isn't built-in, you can reference custom ones from the `assets` folder of the extension by file name,
e.g. `my-icon.png`. Alternatively, you can reference an absolute HTTPS URL that points to an image or use an emoji.
You can also specify different remote or local assets for light and dark theme.
#### Example
```typescript
import { Icon, List } from "@raycast/api";
export default function Command() {
return (
);
}
```
### Image.Fallback
```typescript
Image.Fallback: Asset | Icon | { light: Asset; dark: Asset }
```
A fallback Image, a single emoji, or a theme-aware asset. Any specified `mask` or `tintColor` will also apply to the fallback image.
#### Example
```typescript
import { List } from "@raycast/api";
export default function Command() {
return (
);
}
```
### Image.URL
Image is a string representing a URL.
#### Example
```typescript
import { List } from "@raycast/api";
export default function Command() {
return (
);
}
```
### Image.Asset
Image is a string representing an asset from the `assets/` folder
#### Example
```typescript
import { List } from "@raycast/api";
export default function Command() {
return (
);
}
```
---
description: >-
The de-facto user interface in Raycast. Ideal to present similar data such as
to-dos or files.
---
