# 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`](#image.source) |
| fallback | Image.Fallback image, in case `source` can't be loaded. | [`Image.Fallback`](#image.fallback) |
| mask | A Image.Mask to apply to the image. | [`Image.Mask`](#image.mask) |
| tintColor | A Color.ColorLike to tint all the non-transparent pixels of the image. | [`Color.ColorLike`](https://developers.raycast.com/api-reference/colors#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](#image). Can be either a remote URL, a local file resource, a built-in [Icon](#icon) or a single emoji.
For consistency, it's best to use the built-in [Icon](#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](#image) that will be displayed in case the source image cannot be loaded. Can be either a local file resource, a built-in [Icon](#icon), 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 (
);
}
```
