> For the complete documentation index, see [llms.txt](https://developers.raycast.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.raycast.com/api-reference/user-interface/icons-and-images.md).
# 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/user-interface/pages/-MiwANRbUk391XIQ6FMp#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 (
);
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://developers.raycast.com/api-reference/user-interface/icons-and-images.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
