Icons & Images

API Reference

Icon

List of built-in icons that can be used for actions or list items.

Example

1
import { Icon, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item title="Icon" icon={Icon.Circle} />
7
</List>
8
);
9
}
Copied!

Enumeration members

Name
Image
ArrowClockwise
TwoArrowsClockwise
ArrowRight
Binoculars
Bubble
Calendar
Checkmark
ChevronDown
ChevronUp
Circle
Clipboard
Clock
Desktop
Document
Dot
Download
Envelope
ExclamationMark
Eye
EyeSlash

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

1
import { Image, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item
7
title="Icon"
8
icon={{
9
source: "https://raycast.com/uploads/avatar.png",
10
mask: Image.Mask.Circle,
11
}}
12
/>
13
</List>
14
);
15
}
Copied!

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.

Example

1
// Built-in icon
2
const icon = Icon.Eye;
3
4
// Built-in icon with tint color
5
const tintedIcon = { source: Icon.Bubble, tintColor: Color.Red };
6
7
// Bundled asset with circular mask
8
const avatar = { source: "avatar.png", mask: ImageMask.Circle };
9
10
// Theme-aware icon
11
const icon = { source: { light: "icon-light.png", dark: "icon-dark.png" } };
Copied!

Properties

Property
Description
Type
source*
The Image.Source of the image.
fallback
Image.Fallback image, in case source can't be loaded.
mask
A Image.Mask to apply to the image.
tintColor
A Color.ColorLike to tint all the non-transparent pixels of the image.

FileIcon

An icon as it's used in the Finder.

Example

1
import { List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item title="File icon" icon={{ fileIcon: __filename }} />
7
</List>
8
);
9
}
Copied!

Properties

Property
Description
Type
fileIcon*
The path to a file or folder to get its icon from.
string

Image.ImageLike

1
ImageLike: URL | Asset | Icon | FileIcon | Image;
Copied!
Union type for the supported image types.

Example

1
import { Icon, Image, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item title="URL" icon="https://raycast.com/uploads/avatar.png" />
7
<List.Item title="Asset" icon="avatar.png" />
8
<List.Item title="Icon" icon={Icon.Circle} />
9
<List.Item title="FileIcon" icon={{ fileIcon: __filename }} />
10
<List.Item
11
title="Image"
12
icon={{
13
source: "https://raycast.com/uploads/avatar.png",
14
mask: Image.Mask.Circle,
15
}}
16
/>
17
</List>
18
);
19
}
Copied!

Image.Source

1
Image.Source: URL | Asset | Icon | { light: URL | Asset; dark: URL | Asset }
Copied!
The source of an Image. Can be either a remote URL, a local file resource, a built-in Icon 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

1
import { Icon, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item
7
title="URL"
8
icon={{ source: "https://raycast.com/uploads/avatar.png" }}
9
/>
10
<List.Item title="Asset" icon={{ source: "avatar.png" }} />
11
<List.Item title="Icon" icon={{ source: Icon.Circle }} />
12
<List.Item
13
title="Theme"
14
icon={{
15
source: {
16
light: "https://raycast.com/uploads/avatar.png",
17
dark: "https://raycast.com/uploads/avatar.png",
18
},
19
}}
20
/>
21
</List>
22
);
23
}
Copied!

Image.Fallback

1
Image.Fallback: Asset | Icon | { light: Asset; dark: Asset }
Copied!
A fallback Image that will be displayed in case the source image cannot be loaded. Can be either a local file resource, a built-in Icon, a single emoji, or a theme-aware asset. Any specified mask or tintColor will also apply to the fallback image.

Example

1
import { Icon, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item
7
title="URL Source With Asset Fallback"
8
icon={{
9
source: "https://raycast.com/uploads/avatar.png",
10
fallback: "default-avatar.png",
11
}}
12
/>
13
</List>
14
);
15
}
Copied!

Image.URL

Image is a string representing a URL.

Example

1
import { Icon, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item
7
title="URL"
8
icon={{ source: "https://raycast.com/uploads/avatar.png" }}
9
/>
10
</List>
11
);
12
}
Copied!

Image.Asset

Image is a string representing an asset from the assets/ folder

Example

1
import { Icon, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item title="Asset" icon={{ source: "avatar.png" }} />
7
</List>
8
);
9
}
Copied!
Last modified 2d ago