List of built-in icons that can be used for actions or list items.
import { Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="Icon" icon={Icon.Circle} />
</List>
);
}
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.
import { Image, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="Icon"
icon={{
source: "https://raycast.com/uploads/avatar.png",
mask: Image.Mask.Circle,
}}
/>
</List>
);
}| Name | Value |
|---|---|
| Circle | "circle" |
| RoundedRectangle | "roundedRectangle" |
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 %}
// 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" } };| 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 |
An icon as it's used in the Finder.
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="File icon" icon={{ fileIcon: __filename }} />
</List>
);
}| Property | Description | Type |
|---|---|---|
| fileIcon* | The path to a file or folder to get its icon from. | string |
ImageLike: URL | Asset | Icon | FileIcon | Image;Union type for the supported image types.
import { Icon, Image, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="URL" icon="https://raycast.com/uploads/avatar.png" />
<List.Item title="Asset" icon="avatar.png" />
<List.Item title="Icon" icon={Icon.Circle} />
<List.Item title="FileIcon" icon={{ fileIcon: __filename }} />
<List.Item
title="Image"
icon={{
source: "https://raycast.com/uploads/avatar.png",
mask: Image.Mask.Circle,
}}
/>
</List>
);
}Image.Source: URL | Asset | Icon | { light: URL | Asset; dark: URL | Asset }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.
import { Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="URL" icon={{ source: "https://raycast.com/uploads/avatar.png" }} />
<List.Item title="Asset" icon={{ source: "avatar.png" }} />
<List.Item title="Icon" icon={{ source: Icon.Circle }} />
<List.Item
title="Theme"
icon={{
source: {
light: "https://raycast.com/uploads/avatar.png",
dark: "https://raycast.com/uploads/avatar.png",
},
}}
/>
</List>
);
}Image.Fallback: Asset | Icon | { light: Asset; dark: Asset }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.
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="URL Source With Asset Fallback"
icon={{
source: "https://raycast.com/uploads/avatar.png",
fallback: "default-avatar.png",
}}
/>
</List>
);
}Image is a string representing a URL.
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="URL" icon={{ source: "https://raycast.com/uploads/avatar.png" }} />
</List>
);
}Image is a string representing an asset from the assets/ folder
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="Asset" icon={{ source: "avatar.png" }} />
</List>
);
}